показать два текста для одного события mouseOver

Я пытаюсь отобразить два разных текста в одном событии mouseover. Я добавил разные идентификаторы к двум функциям.показать два текста для одного события 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> есть только земля, но я не уверен, как добавить сюда еще один идентификатор?

Кто-нибудь знает, в чем проблема?

Вот упрощенный пример того, что я пытаюсь достичь (черная стрелка представляет мышь) Example

источник

2014-11-08 Rika

Отформатируйте код, и почему существует точка с запятой в списке атрибутов тега? –

Почему бы вам не создать одну функцию, которая вызывает обе функции? Кроме того, где Венера? Я даже этого не вижу. –

@Rika Вам нужно что-то вроде этого? http://jsfiddle.net/hstjs1k1/1/ – Kavvson

Ну, кажется, что вы реализуют решение, возможно, всплывающую подсказку? Похоже, вы наткнулись на этот урок: 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

Для href? Вы знаете, что это не образ ... –

Можете ли вы сделать снимок экрана о том, чего хотите? Это было бы проще. Просто используйте MS Paint или что-то еще ... –

Попробуйте 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

Решение в порядке, но просто пропущено событие onmouseout –

Я попытался реализовать ваше решение, но как-то ничего не появляется на mouseover – Rika

Функция «getElementById()» находит элемент с указанным идентификатором. Поскольку нет элемента с идентификатором «venus», ваша функция writetext() ничего не делает. Вы, кажется, знаете об этом, поэтому вы спрашиваете, как добавить еще один идентификатор.

Элемент может иметь только один идентификатор, но есть много других способов найти определенный элемент. Однако, если вы найдете один и тот же элемент и дважды установите его текст, второй раз просто переопределит первый раз.

Самый простой способ выполнить то, что вы пытаетесь сделать, это просто добавить еще один элемент и дать ему идентификатор venus.

Если вы действительно хотите, чтобы один элемент имел обе строки в свой внутренний атрибутHTML, вам нужно будет добавить вторую строку вместо установки атрибута.

Добавлено:

Я не знаком с областью тега, но это, казалось бы, можно просто добавить еще один пункт элемент с идентификатором венеры:

<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

Спасибо за повторение того, что я сказал в комментариях ... :-p –

Просто используйте на функцию так:

 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

показать два текста для одного события mouseOver

ответ

Смежные вопросы