f



Javascript

Hello people,

I'm trying to make a regional map in html and javascript, I'm sure how to d=
o the following:

to hover over the city, he should change the city's image with another clea=
rer, and clicking in the city he should get a darker color than the picture=
 when we hover.

Until there all right, but when I click it gets darker image and move the m=
ouse in another city he immediately removes the dark image and return to th=
e clearer picture.
How to keep the image when I click on it and still the effect of passing th=
e mouse?
---------------------
the other thing is

When we move the mouse over the image should appear the title of the city,

but the title appears it on top of the div, not on top of the city that spe=
nt the mouse,

use (data-toggle =3D "popover") but can not run on top of the city because =
of the mapping (coords =3D) when closing it causes the coordinates turn tex=
t

-----------
COD HTML

<link type=3D"text/css" rel=3D"stylesheet" href=3D"http://paste/map.css" />
<script language=3D"JavaScript" type=3D"text/javascript" src=3D"http://past=
e/map.js">
</script>


</head><body>

<div id=3D"corpo">


<div id=3D"mapa"><img border=3D"0" src =3D"http://path_of_the_main_image.gi=
f" id=3D"mapaimag" alt=3D"Mapa" width=3D"200" height=3D"200"  usemap=3D"#Ma=
p"/>=20
<map name=3D"Map" id=3D"Map">
=20
<area href=3D"#" onclick=3D"mapa_on_1();" onMouseover=3D"mapa_over_1();" sh=
ape=3D"poly" title=3D"city1" data-toggle=3D"popover" data-trigger=3D"hover"=
 data-content=3D"" coords=3D"112,186,114,197,111,173,114,171,111,149,116,16=
0,115,157,119,187,121,154,125,154,133,156,135,155,138,156,140,154,141,156" =
 alt=3D"city1"/>
=20
<area href=3D"#" onclick=3D"mapa_on_2();" onMouseover=3D"mapa_over_2();" sh=
ape=3D"poly" title=3D"city2" data-toggle=3D"popover" data-trigger=3D"hover"=
 data-content=3D"" coords=3D"41,96,191,98,147,110,198,109,153,112,157,184,1=
58,117,158,121,144,131,157,132,156,135,177,138,154,129,157,137,158,142" alt=
=3D"city2"/>

</map></div>

---------
CODE JAVASCRIPT

for (i =3D 0; i <image_qtd; i++) {
    var preload =3D new Image();
    preload.src =3D image_list[i];
}
                                       /*click function*/

function mapa_on_1()=20
	{
	=09
		document.getElementById("mapaimag").src=3D"http://path_of_the_main_image_=
city_1_Click.gif";
		document.getElementById("descricao1").className =3D 'on';
		}
	=09
function mapa_on_2()
	{
		document.getElementById("mapaimag").src=3D"http://path_of_the_main_image_=
city_2_Click.gif";
		document.getElementById("descricao2").className =3D 'on';
	    }
	=09
                                       /*over function*/
function mapa_over_1()
	{
		document.getElementById("mapaimag").src=3D"path_of_the_main_image_city_1_=
Over.gif";
=09
	}
function mapa_over_2()
	{
		document.getElementById("mapaimag").src=3D"path_of_the_main_image_city_2_=
Over.gif";
	}
	                                   /*popover function*/
=09
	$(document).ready(function(){
    $('[data-toggle=3D"popover"]').popover({html:true});  =20
});

---------
They are several cities but put only two to simplify the code

0
dil
8/23/2015 3:03:38 AM
comp.lang.javascript 38370 articles. 2 followers. javascript4 (1315) is leader. Post Follow

5 Replies
1095 Views

Similar Articles

[PageSpeed] 17

dil.nandoo@gmail.com wrote on 23 Aug 2015 in comp.lang.javascript:

> Re: Javascript

The subject line is ment to explain your Q.
Putting "Javascript" there in the NG comp.lang.javascript,
is not doing anything of that sort.

> <link type="text/css" rel="stylesheet" href="http://paste/map.css" />

http://paste/ ???

Is that a usable URL?

"/>" are you using XML? Why?

> <script language="JavaScript" type="text/javascript"
> src="http://paste/map.js"> </script>

that is last century type spec

> id="mapaimag" alt="Mapa" width="200" height="200"  usemap="#Map"/>

Why not use CSS here?

> for (i = 0; i <image_qtd; i++) {

image_qtd is that defined somewhere?

>     var preload = new Image();

You are doing a var on every instance of the for,
once is enough, because for does not make a closure.
  
>           document.getElementById("mapaimag").src

>      $(document).ready(function(){

And now suddenly you are using Jquery ???

This NG is not realy suited for Jquery Qs,
because some or more of us hate thet.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
0
Evertjan
8/23/2015 9:15:30 AM
Am Sun, 23 Aug 2015 11:15:30 +0200 schrieb Evertjan.:
 
> This NG is not realy suited for Jquery Qs,
> because some or more of us hate thet.
Hi, could you please tell me why you don't like it ?
Why do others use that ?
0
Ralf
8/24/2015 8:07:05 PM
Evertjan. wrote:

> dil.nandoo@gmail.com wrote on 23 Aug 2015 in comp.lang.javascript:
>> <link type="text/css" rel="stylesheet" href="http://paste/map.css" />
> 
> http://paste/ ???
> 
> Is that a usable URL?

Probably yes, but not for the general public.
 
> "/>" are you using XML? Why?

You are jumping to conclusions.  This is also Valid HTML5 syntax for the 
“link” element, although the “/” is optional when one is not using the XHTML 
syntax of HTML5.

>> for (i = 0; i <image_qtd; i++) {
> 
> image_qtd is that defined somewhere?

More important: Is “i” declared?  If not, this code will not run in strict 
mode.
 
>>     var preload = new Image();
> 
> You are doing a var on every instance of the for,
> once is enough, because for does not make a closure.

Variables are instantiated once as execution enters a context, and because 
the default scope is the execution context, not the Block statement (cf. 
“let”), there is no intrinsic problem with putting the “var” statement in 
the block adjacent to the “for” statement.  Only that sometimes it is better 
to declare a variable outside of the Block statement to see the relation 
better if the variable is also used outside of the Block statement.

Some advocate declaring all variables on the top of an execution context, 
some based on having an ill-defined notion of “hoisting”.  I prefer to 
declare my variables as close as possible to where they are first used, and 
let linters take care of the rest (such as unused variables); which in the 
case of a variable that is only used in a “for” loop to declare it in the 
“for” statement or near the top of the adjacent Block statement, precisely 
as the OP did.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.
0
Thomas
8/24/2015 8:45:41 PM
"Ralf S. Hellersen" <schneiderxr@arcor.de> wrote on 24 Aug 2015 in 
comp.lang.javascript:

> Am Sun, 23 Aug 2015 11:15:30 +0200 schrieb Evertjan.:
>  
>> This NG is not realy suited for Jquery Qs,
>> because some or more of us hate thet.

> Hi, could you please tell me why you don't like it ?

Personally I don't hate, period, I said "some of us".

Read the archives of this NG If you want to 
know about the bad things of using Jquery,
especially if in the hands of 
the still Javascript-incompetent.

> Why do others use that ?

Do you think usage-figures are a measure of quality,
like smoking, drinking and drug-use? 

Perhaps the quest for not using one's brain is infective.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
0
Evertjan
8/24/2015 9:49:58 PM
Em domingo, 23 de agosto de 2015 00:03:48 UTC-3, dil.n...@gmail.com  escrev=
eu:
> Hello people,
>=20
> I'm trying to make a regional map in html and javascript, I'm sure how to=
 do the following:
>=20
> to hover over the city, he should change the city's image with another cl=
earer, and clicking in the city he should get a darker color than the pictu=
re when we hover.
>=20
> Until there all right, but when I click it gets darker image and move the=
 mouse in another city he immediately removes the dark image and return to =
the clearer picture.
> How to keep the image when I click on it and still the effect of passing =
the mouse?
> ---------------------
> the other thing is
>=20
> When we move the mouse over the image should appear the title of the city=
,
>=20
> but the title appears it on top of the div, not on top of the city that s=
pent the mouse,
>=20
> use (data-toggle =3D "popover") but can not run on top of the city becaus=
e of the mapping (coords =3D) when closing it causes the coordinates turn t=
ext
>=20
> -----------
> COD HTML
>=20
> <link type=3D"text/css" rel=3D"stylesheet" href=3D"http://paste/map.css" =
/>
> <script language=3D"JavaScript" type=3D"text/javascript" src=3D"http://pa=
ste/map.js">
> </script>
>=20
>=20
> </head><body>
>=20
> <div id=3D"corpo">
>=20
>=20
> <div id=3D"mapa"><img border=3D"0" src =3D"http://path_of_the_main_image.=
gif" id=3D"mapaimag" alt=3D"Mapa" width=3D"200" height=3D"200"  usemap=3D"#=
Map"/>=20
> <map name=3D"Map" id=3D"Map">
> =20
> <area href=3D"#" onclick=3D"mapa_on_1();" onMouseover=3D"mapa_over_1();" =
shape=3D"poly" title=3D"city1" data-toggle=3D"popover" data-trigger=3D"hove=
r" data-content=3D"" coords=3D"112,186,114,197,111,173,114,171,111,149,116,=
160,115,157,119,187,121,154,125,154,133,156,135,155,138,156,140,154,141,156=
"  alt=3D"city1"/>
> =20
> <area href=3D"#" onclick=3D"mapa_on_2();" onMouseover=3D"mapa_over_2();" =
shape=3D"poly" title=3D"city2" data-toggle=3D"popover" data-trigger=3D"hove=
r" data-content=3D"" coords=3D"41,96,191,98,147,110,198,109,153,112,157,184=
,158,117,158,121,144,131,157,132,156,135,177,138,154,129,157,137,158,142" a=
lt=3D"city2"/>
>=20
> </map></div>
>=20
> ---------
> CODE JAVASCRIPT
>=20
> for (i =3D 0; i <image_qtd; i++) {
>     var preload =3D new Image();
>     preload.src =3D image_list[i];
> }
>                                        /*click function*/
>=20
> function mapa_on_1()=20
> 	{
> 	=09
> 		document.getElementById("mapaimag").src=3D"http://path_of_the_main_imag=
e_city_1_Click.gif";
> 		document.getElementById("descricao1").className =3D 'on';
> 		}
> 	=09
> function mapa_on_2()
> 	{
> 		document.getElementById("mapaimag").src=3D"http://path_of_the_main_imag=
e_city_2_Click.gif";
> 		document.getElementById("descricao2").className =3D 'on';
> 	    }
> 	=09
>                                        /*over function*/
> function mapa_over_1()
> 	{
> 		document.getElementById("mapaimag").src=3D"path_of_the_main_image_city_=
1_Over.gif";
> =09
> 	}
> function mapa_over_2()
> 	{
> 		document.getElementById("mapaimag").src=3D"path_of_the_main_image_city_=
2_Over.gif";
> 	}
> 	                                   /*popover function*/
> =09
> 	$(document).ready(function(){
>     $('[data-toggle=3D"popover"]').popover({html:true});  =20
> });
>=20
> ---------
> They are several cities but put only two to simplify the code









Hello people

thanks for the feedback,
I want to clarify that I am very new to Javascript.

forgive me if I'm doing aldo absurd.

so what you say to improve the code above will be welcome.

please, will you could clarify how to solve the above problems?

Note: not coloqueir the css code here since it only interferes with the fon=
t color, background ...
=A0It is simple

awaiting return


Thank you!
0
dil
8/24/2015 9:57:04 PM
Reply: