Search code examples
javascripthtmlcssimagemap

show two texts for one mouseOver event

I am trying to display two different texts on one mouseover event. I added different id's to two 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 and #earth some CSS styling to display them on different positions but somethow I can only see the 'earth' appear on mouseover.

I thought it might be because the <p> only has the id earth but I am not sure how to add another id here?

Does anyone know what's the problem?

Here is a simplified example of what I am trying to achieve (the black arrow presents the mouse) Example

Solution

  • Well, it appears that you are implementing a solution for maybe a tooltip? Looks like you have stumbled upon this tutorial: w3shools: HTML <area> Tag.

    What you already have just needs to be modified as such.

    var planets = [ 'mercury', 'venus' ];

function showTooltips(selectedPlanet) {
  for (var i = 0; i < planets.length; i++) {
    var planet = planets[i];
    var el = getEl(planet);
    writeText(el, planet);
    if (planet === selectedPlanet) {
      addClass(el, 'current');
    }
  }
}

function clearTooltips() {
  for (var i = 0; i < planets.length; i++) {
    var el = getEl(planets[i]);
    writeText(el, '');
    removeClass(el, 'current');
  }
}

function writeText(el, txt) {
  el.innerHTML = txt;
}

function getEl(id) {
  return 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;
}
    .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;
}
    <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>