Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > changing div styles in image maps

Reply
Thread Tools

changing div styles in image maps

 
 
prash.marne@gmail.com
Guest
Posts: n/a
 
      02-28-2007
hi all,
this is an intresting thing ,

i have a simple image map (with world map image),

in which i have diffrent regions specified ,also i have mentioned the
region names next to the map image
so now the functionality i want is :-

whenever the user hovers on the region (lets say :europe) the text
(europe) next to the image should change to bold & also the color
should change .

in the same way i have to change many dives for diffent regions

any help how i can change the classes for those dives after user
hovers on it ..? ,

thanks in advance,

Prashant.

 
Reply With Quote
 
 
 
 
ASM
Guest
Posts: n/a
 
      02-28-2007
http://www.velocityreviews.com/forums/(E-Mail Removed) a écrit :
> whenever the user hovers on the region (lets say :europe) the text
> (europe) next to the image should change to bold & also the color
> should change .
>
> in the same way i have to change many dives for diffent regions



function boldIt(what) {
what = document.getElementById(what).style;
what.fontWeight = what.fontWeight=''? 'bold' : '';
}

<map ...
<area onmouseover="boldIt('div1');" onmouseout="boldIt('div1');" ...

<dt id="div1">Europe</dt>


and if you prefer class :

function boldIt(what) {
what = document.getElementById(what);
what.className = what.className=''? 'highlight' : '';
}


Idea :
------

CSS :
=====
#myMap { border:1px solid black; padding: 8px }
#myMap img { float: left; width: 200px; }
#myMap dl { position:relative; margin-left: 210px }
#myMap dt { color: blue }
#myMap dt.highligth { font-weight: bold; color: red }
#myMap dd { visibility: hidden }
#myMap dd.highligth { visibily: visible }

JS :
====
function higtLight(what) {
var D = document.getElementById('text_'+what);
var L = document.getElementById('legend_'+what);
D.className = D.className=''? 'highlight' : '';
L.className = L.className=''? 'highlight' : '';
}

HTML :
======
<div id="myMap">
<img usemap="#wrldMap"
src="world.jpg" alt"World Map" title"Oveflow me" />
<dl>
<dt id="legend_eur'>Europe</dt>
<dd id="text_eur'>Somewhere in North side</dd>
<dt id="legend_asi'>Asia</dt>
<dd id="text_asi'>Somewhere in South side</dd>
</dl>
<map name="wrldMap>
<AREA HREF="europe.htm" ... blah ...
onmouseover="higtLight('eur');"
onmouseout="higtLight('eur');>
<AREA HREF="asia.htm"... blah ...
onmouseover="higtLight('asi');"
onmouseout="higtLight('asi');>
</map>
</div>

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
 
Reply With Quote
 
 
 
 
prash.marne@gmail.com
Guest
Posts: n/a
 
      02-28-2007
hey tahnks for your reply ,
u guys are relly helpful for beginers like me...

but the thing dosent work in my case i have tried a simple one ...
<html>
<head>
<script type="text/javascript">

function boldIt(what) {
what = document.getElementById(what).style;
what.fontWeight = what.fontWeight=''? 'bold' : '';
}
</script>
</head>
<body>
<img scr="wrld_map.jpg" type="image/jpg" usemap="#wrldMap">
<map name="wrldMap"
<area href="#" shape="poly" coords="........"
onmouseover="boldIt('div1');" onmouseout="boldIt('div1');">
</map>
<div id="div1">Europe</div>
</body>
</html>

do i need to add some more stuff ....?? or i am getting wrong
somwhere ...??
thanks,

 
Reply With Quote
 
ASM
Guest
Posts: n/a
 
      02-28-2007
(E-Mail Removed) a écrit :
> hey tahnks for your reply ,


Please left some trace of post you're answering.

> u guys are relly helpful for beginers like me...
>
> but the thing dosent work in my case i have tried a simple one ...


> <html>
> <head>
> <script type="text/javascript">


/* *** Ooops ! little error ! **** */

function boldIt(what) {
what = document.getElementById(what).style;
what.fontWeight = what.fontWeight==''? 'bold' : '';
}

> </script>
> </head>
> <body>
> <img scr="wrld_map.jpg" type="image/jpg" usemap="#wrldMap">
> <map name="wrldMap"
> <area href="#" shape="poly" coords="........"


with real coords it would be better

> onmouseover="boldIt('div1');" onmouseout="boldIt('div1');">
> </map>
> <div id="div1">Europe</div>
> </body>
> </html>
>
> do i need to add some more stuff ....?? or i am getting wrong
> somwhere ...??


Not seems so.

And if you try the "idea"
correct it same way as above (two '=' insteed one '=' in condition)

function higtLight(what) {
var D = document.getElementById('text_'+what);
var L = document.getElementById('legend_'+what);
D.className = D.className==''? 'highlight' : '';
L.className = L.className==''? 'highlight' : '';
}


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
 
Reply With Quote
 
prash.marne@gmail.com
Guest
Posts: n/a
 
      03-09-2007
On Feb 28, 11:15 pm, ASM <(E-Mail Removed)>
wrote:
> (E-Mail Removed) a écrit :
>
> > hey tahnks for your reply ,

>
> Please left some trace of post you're answering.
>
> > u guys are relly helpful for beginers like me...

>
> > but the thing dosent work in my case i have tried a simple one ...
> > <html>
> > <head>
> > <script type="text/javascript">

>
> /* *** Ooops ! little error ! **** */
>
> function boldIt(what) {
> what = document.getElementById(what).style;
> what.fontWeight = what.fontWeight==''? 'bold' : '';
>
> }
> > </script>
> > </head>
> > <body>
> > <img scr="wrld_map.jpg" type="image/jpg" usemap="#wrldMap">
> > <map name="wrldMap"
> > <area href="#" shape="poly" coords="........"

>
> with real coords it would be better
>
> > onmouseover="boldIt('div1');" onmouseout="boldIt('div1');">
> > </map>
> > <div id="div1">Europe</div>
> > </body>
> > </html>

>
> > do i need to add some more stuff ....?? or i am getting wrong
> > somwhere ...??

>
> Not seems so.
>
> And if you try the "idea"
> correct it same way as above (two '=' insteed one '=' in condition)
>
> function higtLight(what) {
> var D = document.getElementById('text_'+what);
> var L = document.getElementById('legend_'+what);
> D.className = D.className==''? 'highlight' : '';
> L.className = L.className==''? 'highlight' : '';
>
> }
>
> --
> Stephane Moriaux et son (moins) vieux Mac déjà dépassé
> Stephane Moriaux and his (less) old Mac already out of date


cool the problem is solved....
thanks once again.....

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
<div ... /> and <div ...></div> K Viltersten ASP .Net 4 03-31-2009 07:33 PM
MSN maps vs. Google maps Ralph Fox NZ Computing 0 07-30-2007 10:30 AM
STL: Map of maps possible, but no multi-map of maps? Workarounds? Marcus C++ 2 12-09-2005 06:34 AM
Q: Div A inside Div B is larger than Div B Dwayne Madsen Javascript 1 06-01-2005 03:02 PM
std::maps within std::maps -- optimisation Simon Elliott C++ 4 03-10-2005 10:11 AM



Advertisments