顯示一個mouseOver事件的兩個文本

我試圖在一個mouseover事件上顯示兩個不同的文本。我爲兩個函數添加了不同的id。顯示一個mouseOver事件的兩個文本

<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樣式在不同的位置顯示它們，但somethow我只能看到「地球」上的鼠標懸停出現。

我以爲這可能是因爲<p>只有id地球，但我不知道如何在這裏添加另一個id？

有誰知道有什麼問題？

這裏是什麼，我想實現一個簡化的例子（黑色箭頭呈現鼠標） Example

來源

2014-11-08 Rika

請格式化你的代碼，爲什麼會出現你的標籤屬性列表中的分號？ – 2014-11-08 22:39:23

爲什麼不創建調用兩個函數的單個函數？另外，金星在哪裏？我甚至沒有看到它。 – 2014-11-08 22:40:26

@Rika你需要這樣的東西？ http://jsfiddle.net/hstjs1k1/1/ – Kavvson 2014-11-08 22:43:16

哦，看來你正在實施一個可能提供工具提示的解決方案？看起來你已經偶然發現了這個教程：w3shools: HTML <area> Tag。

你剛纔需要修改的東西就是這樣。

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>

來源

2014-11-08 22:58:32

好的，但是這會在兩個不同的鼠標懸停區域顯示不同的文本。我想在同一區域懸停時顯示兩個文本。文本將同時顯示在左上角和左下角。 – Rika 2014-11-08 23:14:19

對於href？你知道這不是一個圖像... – 2014-11-08 23:14:29

你可以做一個你想要完成的截圖嗎？這會更容易。只需使用MS Paint或其他... – 2014-11-08 23:15:21

試試這個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>

來源

2014-11-08 22:36:43 Kavvson

解決方案是好的，但只是錯過了這個事件 – 2014-11-08 22:44:58

我試圖實現你的解決方案，但不知何故在鼠標懸停上沒有任何顯示 – Rika 2014-11-08 22:51:17

功能「的getElementById（）」查找元素與指定的ID。由於沒有元素的「venus」的id，你的writetext（）函數什麼都不做。你似乎意識到這一點，這就是爲什麼你問如何添加另一個ID。

一個元素只能有一個id，但還有很多其他的方法可以找到一個特定的元素。但是，如果找到相同的元素並將其文本設置爲兩次，則第二次只會覆蓋第一次。

完成你似乎試圖完成的最直接的方法是簡單地添加另一個元素，並給它金星的ID。

如果您確實需要單個元素在其innerHTML屬性中都具有兩個字符串，則需要附加第二個字符串，而不是設置屬性。

補充：

我不熟悉的領域的標籤，但它似乎只需要添加另一個段落元素與金星的ID：

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

來源

2014-11-08 22:55:00 tinabaninaboo

你知道添加另一個元素和ID的例子嗎？我無法使其工作 – Rika 2014-11-08 23:15:44

感謝您重申我在評論中所說的內容... :-p – 2014-11-08 23:16:03

的功能只需使用這樣的：

 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>

來源

2014-11-09 00:12:34 SergeDirect

它在頁面底部顯示'textOne'，但當我懸停在該區域時沒有任何內容 – Rika 2014-11-09 04:40:18

顯示一個mouseOver事件的兩個文本

回答

相關問題