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
834 Views

Similar Articles

[PageSpeed] 1

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:

Similar Artilces:

javascript within a javascript
Hello, I have a multi-frame page. The frames are named Frame_1, Frame_2 and Frame_3. Frame_1 has a drop down box. When a value is selected in this drop down box, Frame_2 is updated using an asp file (as I have to read from a back-end access database). In turn in the asp file, I have a Body onload tag to execute a javascript function within Frame_2. this function updates the contents of Frame_3. Till now this is working fine. Here is the problem. Frame_3 has a form with a radio button. When a radio button is selected, I want that a function be executed in Frame_3. However since conte...

Javascript and IE? Javascript and C#?
While my question might be simple, the environment around it is terribly messy and so I will try to keep this clear and simple by only including the relevant code - however, as I will soon suggest, I worry that the problem isnt in what would seem to be the relevant code but instead is lost somewhere in the do-and-donts of the peripheral code. So at the end, i'll try to include all the affected code and you can see if any of its actually relevant. I know there is a lot going on... sorry, but I tried to write this clearly. So here is what I imagine to be relevant. I'm working with a pa...

dynamic load javascript from javascript
hi, from here: http://www.activewidgets.com/javascript.forum.6114.15/dynamic-load-javascript-from-javascript.html there is a method to load js from js, e.g. //--------------------------------------------------------------------------------------- var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'snip.js'; document.getElementsByTagName('head')[0].appendChild(script); //--------------------------------------------------------------------------------------- this method works great, but there is a bug(?) when using wit...

JavaScript
Javascript has it's own significance Amit Patel wrote: > Javascript has it's own significance Mr Patel, Stop using that stuff, it's bad for your brains. :P "Amit Patel" <amit2749@hotmail.com> wrote in message news:5f04ccb8.0401210427.3f93300c@posting.google.com... | Javascript has it's own significance It also has it's own group.. news:comp.lang.javascript ...

JavaScript
If I have Options/ViewingMail/AllowExecutables unchecked does Eudora strip out the JavaScript? Or just refuse to execute it? TIA... Bob "Bob Bailey" <ebiz@usa.net> wrote in message news:rfOdnaRVycZZNzXenZ2dnUVZ_v-dnZ2d@rcn.net... > If I have Options/ViewingMail/AllowExecutables unchecked does Eudora strip > out the JavaScript? Or just refuse to execute it? OK. I've answered my own question but that begs a new one. (Eudora strips the JS.) Having allowed Executables it only works if I open, not preview, the message and then it insists on ope...

JavaScript
Guys, anybody know if is possible "to press" a button linked a javascript function using python? My Firefox send something like that: POST /msgs.aspx TOKEN=B8B83BGDBC191B9FE0A0BE1393294FAB&sig=gpaiOqbp0Nr %2BoecRLF4FGGDOAao %3D&toUserId=1331299&rawAddedDate=1188546666&fromUserId=23029&Action.delete=Send +data python has modules for forms and other things... and for it? Thank you for help... zowtar >python has modules for forms and other things... and for it? Check out httplib and urlib2, it might be useful for you. Hi! I know "how to", but o...

javascript
Cut'n'paste from "my" ticket 202 at www.ecomstation.com as they seem to have come to a halt... :-( ################################ Recenty I went from w4 fp17 to eCS 1.2. I get the odd behavior described beneath. Both boxes sees, and uses the same installations and user profiles. Clean install(s) of both Moz and FF has been done several times. Starting FF or Moz clean (no userprofiles), doesn't make any differnce. FIREFOX: The Weather extension i.e doesn't show it's 'mouseover' info, and it refreshes slow. Unit change which ...

javascript
Hi all I wounder if some one can help me i have to write a program that sums numbe3rs together using a for loop. The numbers are 1 to 10 then one to 20 then 1 to 10,000. // A program for summing numbers from one to biggestNumber Var biggestNumber; Var theSum = 0; its got to start like this. Im having problems with this one viicki -- v davies Message posted via JavaKB.com http://www.javakb.com/Uwe/Forums.aspx/java-tools/200512/1 On Fri, 16 Dec 2005 11:27:29 GMT, "vicki via JavaKB.com" <u16404@uwe> wrote, quoted or indirectly quoted someone who said : >// A program fo...

dynamic javascript and html using javascript
Hi all, i have a page page.aspx which spits out javascript. something like this.. document.write("<html>"); document.write("<body>") document.write(Stuff) document.write("</body>") document.write("</html>") Page2.html <script src="page.aspx"></script> Stuff is controlled by me. Now i have to make change so that user can uploadtheir own html and javascript. and i get errors with user defined javascript in Stuff mostly because of qoutes. e.g var a ="safdf" + "df"; in stuff will b...

Javascript of Google inside my javascript file
Good Morning, I would want to insert the javascript of google adsense in my site, here it is : <script type="text/javascript"><!-- google_ad_client = "pub-4902392511135327"; google_ad_width = 728; google_ad_height = 90; google_ad_format = "728x90_as"; google_ad_channel =""; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> the problem is that I want to insert it inside a javascript file I already use in a way that I've not to in...

Extract links from Javascript (not using Javascript)?
I am looking for a method to extract the links embedded within the Javascript in a web page: an ActiveX component, or example code in C++/Pascal/etc. I am looking for a general solution, not one tailored to a particular page/script. Hopefully, the problem can be solved without recreating a complete Javascript interpreter. Any ideas? <chrisspencer02@yahoo.com> wrote in message news:1148670236.974770.107310@j55g2000cwa.googlegroups.com... > I am looking for a method to extract the links embedded within the > Javascript in a web page: an ActiveX component, or example code in >...

Nixing Javascript via javascript: pseudoproto?
This is a question about defensive web browsing. Ocassionally I run into a page whose JavaScript does something that I find obnoxious. I would like to turn off JavaScript only for that page (instead of disabling it globally). It would be cool if there were some way to do this through a "bookmarkable" JavaScript snippet using the javascript: pseudoprotocol. Does anyone know any trick to do any of this? Many thanks! -bill "bill" wrote > This is a question about defensive web browsing. Ocassionally I > run into a page whose JavaScript does something that I fi...

Web resources about - Javascript - comp.lang.javascript

JavaScript Kit- Your comprehensive JavaScript, DHTML, CSS, and Ajax stop
Your comprehensive JavaScript, DHTML, CSS, and Ajax stop

Let's Code: Test-Driven Javascript by James Shore — Kickstarter
James Shore is raising funds for Let's Code: Test-Driven Javascript on Kickstarter! A screencast series focusing on rigorous, professional Javascript ...

Eloquent JavaScript: A Modern Introduction to Programming
... and pragmatics. I loved the tutorial-style game-like program development. This book rekindled my earliest joys of programming. Plus, JavaScript! ...

Lightbox (JavaScript) - Wikipedia, the free encyclopedia
On a Lightbox-enabled page, a user can click an image to have it magnified in a Lightbox window, which resizes itself according to the size of ...

Open Directory - Computers: Programming: Languages: JavaScript: Tools: Obfuscators
about dmoz - help Top : Computers : Programming : Languages : JavaScript : Tools : Obfuscators Tools for obfuscation/compression JavaScript code. ...

Facebook Open-Sources JavaScript Static-Type Checker Flow
The latest software to be open-sourced by Facebook is Flow , a static-type checker for JavaScript . (more…) New Career Opportunities Daily: ...

Under the Hood: The JavaScript SDK - The use of polyfills - Facebook
Facebook Engineering hat eine Notiz mit dem Titel Under the Hood: The JavaScript SDK - The use of polyfills geschrieben. Du kannst den vollständigen ...

Quickstart: Facebook SDK for JavaScript
This quickstart will show you how to setup the SDK, load social plugins, trigger a dialog, and get it to make some basic Graph API calls.

Facebook App Devs Get Javascript
It has been an oft-lamented fact of the Facebook Platform thus far in its life that, in order to use all but the most simple of Javascript functionality–the ...

Badass JavaScript (@badass_js) on Twitter
WebGLWorker is an open source library that allows using WebGL from Web Workers. Great work as always from @kripken . blog.mozilla.org/research/2014/… ...

Resources last updated: 1/25/2016 7:53:09 AM