javascript - show two texts for one mouseOver event -
i trying display 2 different texts on 1 mouseover event. added different id's 2 functions.
<script> function writetext2(txt) { document.getelementbyid("earth").innerhtml = txt; }; function writetext(txt) { document.getelementbyid("venus").innerhtml = txt; } </script> </head> <body> <img src ="test.png" alt="planet" usemap="#planet" /> <map name="planet"> <p id="earth"></p> <area shape="poly" coords="174,361,149,350,180,203,217,213 "href="#"; title="learn" alt="shop now" onmouseover="writetext2('earth'); writetext('venus')" onmouseout="writetext2(''); writetext('')"/> </map> i gave both #venus , #earth css styling display them on different positions somethow can see 'earth' appear on mouseover.
i thought might because <p> has id earth not sure how add together id here?
does know what's problem?
here simplified illustration of trying accomplish (the black arrow presents mouse)
well, appears implementing solution maybe tooltip? looks have stumbled upon tutorial: w3shools: html <area> tag.
what have needs modified such.
class="snippet-code-js lang-js prettyprint-override">var planets = [ 'mercury', 'venus' ]; function showtooltips(selectedplanet) { (var = 0; < planets.length; i++) { var planet = planets[i]; var el = getel(planet); writetext(el, planet); if (planet === selectedplanet) { addclass(el, 'current'); } } } function cleartooltips() { (var = 0; < planets.length; i++) { var el = getel(planets[i]); writetext(el, ''); removeclass(el, 'current'); } } function writetext(el, txt) { el.innerhtml = txt; } function getel(id) { homecoming document.getelementbyid(id); } function addclass(el, classname) { if (el.classname.indexof(classname) == -1) { el.classname += ' ' + classname; } } function removeclass(el, classname){ var elclass = el.classname; while (elclass.indexof(classname) != -1) { elclass = elclass.replace(classname, ''); elclass = elclass.trim(); } el.classname = elclass; } class="snippet-code-css lang-css prettyprint-override">.hover-text { position: absolute; z-index: 1; color: #ffffff; font-size: 10px; text-shadow: 1px 1px 1px #000000; } #mercury { left: 80px; top: 36px; } #venus { left: 120px; top: 30px; } .current { color: #ffaa00; } class="snippet-code-html lang-html prettyprint-override"><img src="http://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="sun" href="http://www.w3schools.com/images/sun.gif" /> <area shape="circle" coords="90,58,3" alt="mercury" href="http://www.w3schools.com/tags/mercur.htm" onmouseover="showtooltips('mercury')" onmouseout="cleartooltips()" /> <area shape="circle" coords="124,58,8" alt="venus" href="http://www.w3schools.com/tags/venus.htm" onmouseover="showtooltips('venus')" onmouseout="cleartooltips()" /> </map> <p class="hover-text" id="mercury"></p> <p class="hover-text" id="venus"></p>
javascript html css imagemap
No comments:
Post a Comment