prash.marne@gmail.com a écrit :
Quote:
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
