При наведении мышки на поле показать циферку

@Tavenger · Регистрация: 07.08.2014

Author24 — интернет-сервис помощи студентам

Не силен в JS.
В кратце опишу то, чего делаю.
Есть рисунок, на котором обозначены 10 элементов в AREA. Ниже этого рисунка поле, в котором отображается номер (от 0 до 9) одного из элементов area.
При наведении мышки на area, в поле отображается соответствующая циферка. Как только мышка уходит из поле area, поле обнуляется.
Все в принципе то работает, и работает правильно, за исключением маленького нюанса. При первом наведении мышки, появляется второе поле с отображением цифр (ниже первого). на второй раз работает как надо.
Как сделать, чтобы при первом наведении не отображалось второе поле.

Если кто-то что-то понял из того что написал =) могу скинуть свое творение, для того чтобы разобраться в данной проблеме.

@Eva Rosalene · 07.08.2014, 17:14

Экстрасенсы пока в отпуске, поэтому код в студию

@Tavenger · 07.08.2014, 17:19 **[ТС]**

Я думал скинуть как-то файлики, но раз код, то пусть будет...

Javascript

var initialtab=[1, "sc1"]
var turntosingle=0
var disabletablinks=0
var previoustab=""
if (turntosingle==1)
document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')
function expandcontent(cid, aobject){
if (disabletablinks==1)
aobject.onclick=new Function("return false")
if (document.getElementById){
highlighttab(aobject)
if (turntosingle==0){
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
}}}
function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
}
function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}
function do_onload(){
collecttablinks()
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}
if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

HTML5

<link rel="stylesheet" href="style.css" type="text/css">
<script language="javascript" src="keytip.js" type="text/javascript"></script>
<style type="text/css">
.heart1 {position: relative; height: 522px; width: 600px;}
.putty {
    position: absolute;
    bottom: 0;
}
.null {}
 
.tabcontent {display: none;}
.tabcontentB {display: block;}
</style>
<div class="heart1">
    <div class="null" id="wrapper">
<img src="img/logo.gif" border="0" alt="logo" usemap="#logo">
<map name="logo">
<span id="tablist"><area onMouseover="expandcontent('sc1', this)" onMouseOut="expandcontent('scNet',this)" shape="poly" coords="184,428,182,440,186,457,198,477,217,490,239,499,262,488,278,475,291,457,294,441,293,428,285,417,274,414,263,413,253,416,244,421,238,428,232,421,220,416,211,413,201,413,190,418" href="1.html"></span>
<span id="tablist"><area onMouseover="expandcontent('sc2', this)" onMouseOut="expandcontent('scNet',this)" shape="poly" coords="85,347,76,354,70,368,75,389,84,401,100,415,122,424,141,416,159,402,170,385,173,371,170,358,160,348,150,346,139,347,130,351,122,358,115,352,107,348,96,345" href="2.html"></span>
<span id="tablist"><area onMouseover="expandcontent('sc3', this)" onMouseOut="expandcontent('scNet',this)" shape="poly" coords="52,219,42,224,36,238,36,256,47,276,65,291,90,303,116,290,134,273,143,251,143,236,137,224,127,218,114,217,104,220,91,230,88,231,89,231,81,226,74,220,64,218" href="3.html"></span>
<span id="tablist"><area onMouseover="expandcontent('sc4', this)" onMouseOut="expandcontent('scNet',this)" shape="poly" coords="73,98,66,106,62,119,64,133,74,151,94,167,117,176,141,165,157,148,167,132,169,118,165,105,158,98,149,93,137,93,129,97,122,102,116,108,110,103,99,96,85,94" href="4.html"></span>
<span id="tablist"><area onMouseover="expandcontent('sc5', this)" onMouseOut="expandcontent('scNet',this)" shape="poly" coords="193,35,185,45,183,58,187,75,198,92,214,105,240,116,264,104,280,90,290,74,293,58,290,45,281,34,270,30,258,32,247,36,239,44,226,36,215,31,204,31" href="5.html"></span>
<span id="tablist"><area onMouseover="expandcontent('sc6', this)" onMouseOut="expandcontent('scNet',this)" shape="poly" coords="343,43,335,50,330,60,331,75,336,91,354,110,383,124,411,110,428,92,436,75,435,59,431,49,423,42,410,40,394,45,383,54,369,44,357,41" href="6.html"></span>
<span id="tablist"><area onMouseover="expandcontent('sc7', this)" onMouseOut="expandcontent('scNet',this)" shape="poly" coords="478,117,468,118,457,123,451,134,451,153,456,168,475,186,503,200,523,191,545,173,554,158,557,141,551,127,544,119,532,117,523,118,512,123,503,132,496,126,487,120" href="7.html"></span>
<span id="tablist"><area onMouseover="expandcontent('sc8', this)" onMouseOut="expandcontent('scNet',this)" shape="poly" coords="486,229,474,233,465,248,466,266,474,285,495,303,519,315,546,303,568,282,575,261,573,246,567,233,555,229,543,229,530,234,520,241,510,233,496,229" href="8.html"></span>
<span id="tablist"><area onMouseover="expandcontent('sc9', this)" onMouseOut="expandcontent('scNet',this)" shape="poly" coords="422,326,410,333,402,347,403,365,414,385,437,405,460,416,483,405,502,386,512,366,513,346,505,331,492,325,478,327,467,332,456,340,448,335,439,328,428,326" href="9.html"></span>
<span id="tablist"><area onMouseover="expandcontent('sc0', this)" onMouseOut="expandcontent('scNet',this)" shape="poly" coords="333,404,323,410,317,424,319,444,328,461,346,479,373,493,400,479,419,463,430,446,433,425,427,411,414,403,400,403,387,408,375,417,363,408,346,402" href="0.html"></span>
<area shape="poly" coords="282,192,282,183,288,177,297,177,303,183,303,192,297,198,288,198" href="index.html">
</map>
    </div>
    <div class="putty"><img src="img/putty.png" border="0"></div>
    <DIV align="right" id="tabcontentcontainer">
        <div id="scNet" class="tabcontentB">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><img src="img/net.png"></td><td><img src="img/net.png"></td><td class="i"><img src="img/net.gif"></td></tr>
</table>
        </div>
        <div id="sc1" class="tabcontent">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><img src="img/net.png"></td><td><img src="img/net.png"></td><td class="i"><img src="img/1.gif"></td></tr>
</table>
        </div>
        <div id="sc2" class="tabcontent">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><img src="img/net.png"></td><td><img src="img/net.png"></td><td class="i"><img src="img/2.gif"></td></tr>
</table>
        </div>
        <div id="sc3" class="tabcontent">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><img src="img/net.png"></td><td><img src="img/net.png"></td><td class="i"><img src="img/3.gif"></td></tr>
</table>
        </div>
        <div id="sc4" class="tabcontent">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><img src="img/net.png"></td><td><img src="img/net.png"></td><td class="i"><img src="img/4.gif"></td></tr>
</table>
        </div>
        <div id="sc5" class="tabcontent">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><img src="img/net.png"></td><td><img src="img/net.png"></td><td class="i"><img src="img/5.gif"></td></tr>
</table>
        </div>
        <div id="sc6" class="tabcontent">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><img src="img/net.png"></td><td><img src="img/net.png"></td><td class="i"><img src="img/6.gif"></td></tr>
</table>
        </div>
        <div id="sc7" class="tabcontent">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><img src="img/net.png"></td><td><img src="img/net.png"></td><td class="i"><img src="img/7.gif"></td></tr>
</table>
        </div>
        <div id="sc8" class="tabcontent">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><img src="img/net.png"></td><td><img src="img/net.png"></td><td class="i"><img src="img/8.gif"></td></tr>
</table>
        </div>
        <div id="sc9" class="tabcontent">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><img src="img/net.png"></td><td><img src="img/net.png"></td><td class="i"><img src="img/9.gif"></td></tr>
</table>
        </div>
        <div id="sc0" class="tabcontent">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><img src="img/net.png"></td><td><img src="img/net.png"></td><td class="i"><img src="img/0.gif"></td></tr>
</table>
        </div>
    </DIV>
</div>

@Eva Rosalene · 07.08.2014, 17:30

previoustab видимо не убирается.

Добавлено через 1 минуту
Замените 4 строку на

Javascript

4	var previoustab="scNet";

@newJS · 07.08.2014, 21:57

Не понятно зачем area взят в span, и почему у всех этих span одинаковое ИД?
Зачем таблица для картинок, они и сами в ряд станут.
А поля так и не нашел, тем более двух.
Огород ещё тот нагорожен.

@Tavenger · 08.08.2014, 09:58 **[ТС]**

Сообщение от FraidZZ

previoustab видимо не убирается.
Добавлено через 1 минуту
Замените 4 строку на
Код JavaScript
4
var previoustab="scNet";

Спасибо, помогло =)

Сообщение от newJS

Не понятно зачем area взят в span, и почему у всех этих span одинаковое ИД?
Зачем таблица для картинок, они и сами в ряд станут.
А поля так и не нашел, тем более двух.
Огород ещё тот нагорожен.

Сам не пойму для чего столько много span и id для каждого одинаковый, все убрал работает нормально, только без:

HTML5

1	id="tablist"

работать не хочет, пришлось сунуть его в тег map, больше не придумал куда его... Но без него ничего не работает, для чего он нужен вообще ?
Таблицы убрал, оказывается они действительно лишние, раньше просто делал таблицы там они нужны были =)
Спасибо за советы!

При наведении мышки на поле показать циферку

Решение

Решение

@Tavenger 0 / 0 / 0 Регистрация: 07.08.2014 Сообщений: 4
		1
	При наведении мышки на поле показать циферку 07.08.2014, 16:29. Показов 1165. Ответов 5 Метки нет (Все метки) Не силен в JS. В кратце опишу то, чего делаю. Есть рисунок, на котором обозначены 10 элементов в AREA. Ниже этого рисунка поле, в котором отображается номер (от 0 до 9) одного из элементов area. При наведении мышки на area, в поле отображается соответствующая циферка. Как только мышка уходит из поле area, поле обнуляется. Все в принципе то работает, и работает правильно, за исключением маленького нюанса. При первом наведении мышки, появляется второе поле с отображением цифр (ниже первого). на второй раз работает как надо. Как сделать, чтобы при первом наведении не отображалось второе поле. Если кто-то что-то понял из того что написал =) могу скинуть свое творение, для того чтобы разобраться в данной проблеме. 0

@Eva Rosalene Модератор 5197 / 2079 / 406 Регистрация: 06.01.2013 Сообщений: 4,793
	07.08.2014, 17:14	2
	Экстрасенсы пока в отпуске, поэтому код в студию 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	07.08.2014, 21:57	5
	Сообщение было отмечено Tavenger как решение Решение Не понятно зачем area взят в span, и почему у всех этих span одинаковое ИД? Зачем таблица для картинок, они и сами в ряд станут. А поля так и не нашел, тем более двух. Огород ещё тот нагорожен. 1

	08.08.2014, 09:58

Опции темы