changing div styles in image maps

P

prash.marne

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.
 
A

ASM

(e-mail address 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
Click to expand...


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>
 
P

prash.marne

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,
 
A

ASM

(e-mail address removed) a écrit :
hey tahnks for your reply ,
Click to expand...

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 ...
Click to expand...
<html>
<head>
<script type="text/javascript">
Click to expand...

/* *** 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="........"
Click to expand...

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 ...??
Click to expand...

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' : '';
}
 
P

prash.marne

(e-mail address removed) a écrit :


Please left some trace of post you're answering.



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

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

}

with real coords it would be better



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' : '';

}
Click to expand...

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

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Indentation styles 27
Dynamic Image Maps 1
Image overlay and comparison code error. 2
Image shifts to the right when export the page to pdf 4
Static Maps from Lat Long data in XLS file 4
Changing CSS styles with javascript 8
Working on mobile css menu with plenty of frustration! 2
Changing <div> width in IE 2

Members online

No members online now.
Total: 40 (members: 0, guests: 40)
Robots: 414

Forum statistics

Threads
473,755
Messages
2,569,537
Members
45,020
Latest member
GenesisGai

Latest Threads

Top