Asp Forum - Javascript - comp.lang.javascript

dil.nandoo

8/23/2015 3:04:00 AM

Hello people,

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

to hover over the city, he should change the city's image with another clearer, 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 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

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 spent the mouse,

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

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

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

</head><body>

<div id="corpo">

<div id="mapa"><img border="0" src ="http://path_of_the_main_image... id="mapaimag" alt="Mapa" width="200" height="200" usemap="#Map"/>
<map name="Map" id="Map">

<area href="#" onclick="mapa_on_1();" onMouseover="mapa_over_1();" shape="poly" title="city1" data-toggle="popover" data-trigger="hover" data-content="" coords="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="city1"/>

<area href="#" onclick="mapa_on_2();" onMouseover="mapa_over_2();" shape="poly" title="city2" data-toggle="popover" data-trigger="hover" data-content="" coords="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" alt="city2"/>

</map></div>

---------
CODE JAVASCRIPT

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

function mapa_on_1()
{

document.getElementById("mapaimag").src="http://path_of_the_main_image_city_1_Click....
document.getElementById("descricao1").className = 'on';
}

function mapa_on_2()
{
document.getElementById("mapaimag").src="http://path_of_the_main_image_city_2_Click....
document.getElementById("descricao2").className = 'on';
}

/*over function*/
function mapa_over_1()
{
document.getElementById("mapaimag").src="path_of_the_main_image_city_1_Over.gif";

}
function mapa_over_2()
{
document.getElementById("mapaimag").src="path_of_the_main_image_city_2_Over.gif";
}
/*popover function*/

$(document).ready(function(){
$('[data-toggle="popover"]').popover({html:true});
});

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

5 Answers

Evertjan.

8/23/2015 9:16:00 AM

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)

Ralf S. Hellersen

8/24/2015 8:07:00 PM

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 ?

Thomas 'PointedEars' Lahn

8/24/2015 8:46:00 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.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.

Evertjan.

8/24/2015 9:50:00 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)

dil.nandoo

8/24/2015 9:57:00 PM

Em domingo, 23 de agosto de 2015 00:03:48 UTC-3, dil.n...@gmail.com escreveu:
> Hello people,
>
> I'm trying to make a regional map in html and javascript, I'm sure how to do the following:
>
> to hover over the city, he should change the city's image with another clearer, 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 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
>
> 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 spent the mouse,
>
> use (data-toggle = "popover") but can not run on top of the city because of the mapping (coords =) when closing it causes the coordinates turn text
>
> -----------
> COD HTML
>
> <link type="text/css" rel="stylesheet" href="http://paste/map.css" />
> <script language="JavaScript" type="text/javascript" src="http://paste/map.js">
> </script>
>
>
> </head><body>
>
> <div id="corpo">
>
>
> <div id="mapa"><img border="0" src ="http://path_of_the_main_image... id="mapaimag" alt="Mapa" width="200" height="200" usemap="#Map"/>
> <map name="Map" id="Map">
>
> <area href="#" onclick="mapa_on_1();" onMouseover="mapa_over_1();" shape="poly" title="city1" data-toggle="popover" data-trigger="hover" data-content="" coords="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="city1"/>
>
> <area href="#" onclick="mapa_on_2();" onMouseover="mapa_over_2();" shape="poly" title="city2" data-toggle="popover" data-trigger="hover" data-content="" coords="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" alt="city2"/>
>
> </map></div>
>
> ---------
> CODE JAVASCRIPT
>
> for (i = 0; i <image_qtd; i++) {
> var preload = new Image();
> preload.src = image_list[i];
> }
> /*click function*/
>
> function mapa_on_1()
> {
>
> document.getElementById("mapaimag").src="http://path_of_the_main_image_city_1_Click....
> document.getElementById("descricao1").className = 'on';
> }
>
> function mapa_on_2()
> {
> document.getElementById("mapaimag").src="http://path_of_the_main_image_city_2_Click....
> document.getElementById("descricao2").className = 'on';
> }
>
> /*over function*/
> function mapa_over_1()
> {
> document.getElementById("mapaimag").src="path_of_the_main_image_city_1_Over.gif";
>
> }
> function mapa_over_2()
> {
> document.getElementById("mapaimag").src="path_of_the_main_image_city_2_Over.gif";
> }
> /*popover function*/
>
> $(document).ready(function(){
> $('[data-toggle="popover"]').popover({html:true});
> });
>
> ---------
> 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 font color, background ...
It is simple

awaiting return

Thank you!

comp.lang.javascript

Javascript

dil.nandoo

Evertjan.

Ralf S. Hellersen

Thomas 'PointedEars' Lahn

Evertjan.

dil.nandoo

x Login to ForumsZone