Question

我试图在一个mouseover事件上显示两个不同的文本。我在两个函数中添加了不同的id。

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

我给#venus和#earth提供了一些CSS样式，以便在不同的位置显示它们，但有些我只能看到地球＆＃39;鼠标悬停时出现。

我认为可能是因为<p>只有id地球但我不确定如何在这里添加其他ID？

有谁知道问题是什么？

这是我想要实现的简化示例（黑色箭头显示鼠标） Example

Answer 1

功能＆＃34; getElementById（）＆＃34;找到具有指定id的元素。由于没有＆＃34; venus＆＃34;的id元素，你的writetext（）函数什么都不做。你似乎意识到这一点，这就是为什么你问如何添加另一个id。

元素只能有一个id，但是还有很多其他方法可以找到特定的元素。但是，如果您找到相同的元素并将其文本设置两次，则第二次将仅覆盖第一次。

完成你似乎尝试的最直接的方法是简单地添加另一个元素并赋予它金星的id。

如果您真的希望单个元素在其innerHTML属性中包含两个字符串，则需要附加第二个字符串，而不是设置属性。

添加了：

我不熟悉区域标记，但似乎你可以添加另一个段号为venus的段落元素：

<map name="planet">
<p id="earth"></p>
<p id="venus"></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>

Answer 2

好吧，您似乎正在为工具提示实施解决方案？看起来你偶然发现了这个教程：w3shools: HTML <area> Tag。

您已经拥有的东西需要进行修改。

＆＃13;

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;
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

试试这个http://jsfiddle.net/hstjs1k1/10/

$(document).ready( function () {
$('.mapping').mouseover(function() {
    $("#mytext").append($(this).attr('planet-name')+ " : " +$(this).attr('custom-text1')+ "" +$(this).attr('custom-text1')+'<br>');
    //alert();

}).mouseout(function(){
    $("#mytext").empty();
});
 });


    <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" custom-text1="custom1.1" custom-text2="custom1.2" planet-name="Sun" class="mapping" href="http://www.w3schools.com/images/sun.gif" />
    <p id="mercury"></p>
    <area shape="circle" custom-text1="custom1.1" custom-text2="custom1.2" coords="90,58,3" class="mapping" planet-name="Mercury" href="http://www.w3schools.com/tags/mercur.htm"/>
    <p id="venus"></p>
    <area shape="circle" custom-text1="custom2.1" custom-text2="custom2.2" coords="124,58,8" planet-name="Venus" class="mapping" href="http://www.w3schools.com/tags/venus.htm" />
</map>
    <div id="mytext" style="border:1px;">This will change</div>

Answer 4

只需使用类似的功能：

      function writeText() {
var txt1 = 'textOne';
var txt2 = 'textTwo'; 
          document.getElementById("earth").innerHTML = txt1;
          document.getElementById("venus").innerHTML = txt2;

            };
     function deletText() {

var txt1 = '';
var txt2 = ''; 
          document.getElementById("earth").innerHTML = txt1;
          document.getElementById("venus").innerHTML = txt2;
}



            </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="writeText();" onmouseout="deleteText();"/> 
        </map>

显示一个mouseOver事件的两个文本

4 个答案: