IE7 Javascript Hover не работает правильно - PullRequest
Новая
       5

IE7 Javascript Hover не работает правильно

1 голос
/ 31 мая 2011

Я сделал простой Javascript для эффекта наведения мыши, поэтому при наведении курсора на div текст затем отображается в div ниже, но в IE7 будет работать только случайное число, например 1,2,3,4,27,28 а несколько других остальные просто не работают?

Вот мой код: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 

<head> 
<script> 
function menu (whichMenu,whatState){
if (document.getElementById)
{document.getElementById(whichMenu).style.visibility = whatState;}

else {document[whichMenu].visibility = whatState;}

}
function details(what){
myInfo={
"s1":"Flaunchin",
"s2":"Chimney stack",
"s3":"Ridge",
"s4":"Flashing",
"s5":"Barge board",
"s6":"Dormer",
"s7":"Water tabling",
"s8":"Purlin",
"s9":"Wall Plate",
"s10":"Rafters",
"s11":"Soffit",
"s12":"Insulation",
"s13":"Cold Water Storage Tank",
"s14":"Central Heating Header Tank",
"s15":"Felt and Battens",
"s16":"Slating or Tiling",
"s17":"Hip",
"s18":"Fascia or Eaves",
"s19":"Timber Stud Wall",
"s20":"Floor Joists",
"s21":"Hot Water Cylinder",
"s22":"Overflow Pipe",
"s23":"Cavity Brick or Block Wall",
"s24":"Wall Ties",
"s25":"Quoin Stone",
"s26":"Gutter and Rain Water Pipe",
"s27":"Felt with Stone Chippings on Decking",
"s28":"Fair Faced Brickwork",
"s29":"Damp Proof Course",
"s30":"Hardcore",
"s31":"Reveal",
"s32":"Timber, Concrete or Steel Lintel",
"s33":"Air Brick",
"s34":"Concrete Slab",
"s35":"Gulley with Granting",
"s36":"Soil and Vent Pipe",
"s37":"Manhole",
"s38":"Electricity Main",
"s39":"Solid Wall",
"s40":"Wall Plates on Sleeper Wall",
"s41":"Foul Drain",
"s42a":"Underpinning",
"s42b":"Underpinning",
"s43":"Interceptor Trap",
"s44":"Water Main"
}
detailsBox.innerHTML=myInfo[what]
}
</script> 
<style> 
body{width:980px;height:100%;margin:auto;margin-top:20px}
#imagebg{background:url(house.png);height:640px;width:715px;margin:auto}
.s1{width:20px;height:10px;margin-left:383px;margin-top:-615px}
.s2{width:20px;height:10px;margin-left:365px;margin-top:21px}
.s3{width:20px;height:10px;margin-left:430px;margin-top:-4px}
.s4{width:20px;height:10px;margin-left:380px;margin-top:12px}
.s5{width:20px;height:10px;margin-left:561px;margin-top:-5px}
.s6{width:20px;height:10px;margin-left:445px;margin-top:27px}
.s7{width:20px;height:10px;margin-left:320px;margin-top:-27px}
.s8{width:20px;height:10px;margin-left:380px;margin-top:30px}
.s9{width:20px;height:10px;margin-left:297px;margin-top:42px}
.s10{width:20px;height:10px;margin-left:355px;margin-top:-44px}
.s11{width:20px;height:10px;margin-left:339px;margin-top:31px}
.s12{width:20px;height:10px;margin-left:410px;margin-top:-37px}
.s13{width:20px;height:10px;margin-left:410px;margin-top:17px}
.s14{width:20px;height:10px;margin-left:452px;margin-top:15px}
.s15{width:20px;height:10px;margin-left:536px;margin-top:-74px}
.s16{width:20px;height:10px;margin-left:585px;margin-top:-29px}
.s17{width:20px;height:10px;margin-left:590px;margin-top:-35px}
.s18{width:20px;height:10px;margin-left:693px;margin-top:70px}
.s19{width:20px;height:10px;margin-left:636px;margin-top:41px}
.s20{width:20px;height:10px;margin-left:655px;margin-top:70px}
.s21{width:20px;height:10px;margin-left:475px;margin-top:-36px}
.s22{width:20px;height:10px;margin-left:448px;margin-top:22px}
.s23{width:20px;height:10px;margin-left:328px;margin-top:-105px}
.s24{width:20px;height:10px;margin-left:311px;margin-top:31px}
.s25{width:20px;height:10px;margin-left:278px;margin-top:-56px}
.s26{width:20px;height:10px;margin-left:267px;margin-top:26px}
.s27{width:20px;height:10px;margin-left:234px;margin-top:-23px}
.s28{width:20px;height:10px;margin-left:214px;margin-top:38px}
.s29{width:20px;height:10px;margin-left:204px;margin-top:43px}
.s30{width:20px;height:10px;margin-left:197px;margin-top:82px}
.s31{width:20px;height:10px;margin-left:300px;margin-top:-99px}
.s32{width:20px;height:10px;margin-left:328px;margin-top:-19px}
.s33{width:20px;height:10px;margin-left:327px;margin-top:60px}
.s34{width:20px;height:10px;margin-left:395px;margin-top:32px}
.s35{width:20px;height:10px;margin-left:423px;margin-top:33px}
.s36{width:20px;height:10px;margin-left:462px;margin-top:-90px}
.s37{width:20px;height:10px;margin-left:539px;margin-top:141px}
.s38{width:20px;height:10px;margin-left:585px;margin-top:-102px}
.s39{width:20px;height:10px;margin-left:589px;margin-top:-64px}
.s40{width:20px;height:10px;margin-left:610px;margin-top:22px}
.s41{width:20px;height:10px;margin-left:634px;margin-top:50px}
.s42a{width:20px;height:10px;margin-left:685px;margin-top:-2px}
.s42b{width:20px;height:10px;margin-left:742px;margin-top:-52px}
.s43{width:20px;height:10px;margin-left:780px;margin-top:-71px}
.s44{width:20px;height:10px;margin-left:723px;margin-top:-59px}
#detailsBox{font-size:25px;margin-top:230px;margin-left:155px;font-weight:bold}
</style> 
</head> 
<body> 
<div id="imagebg"></div> 
<div onMouseOver="details('s1')" class="s1"></div> 
<div onMouseOver="details('s2')" class="s2"></div> 
<div onMouseOver="details('s3')" class="s3"></div> 
<div onMouseOver="details('s4')" class="s4"></div> 
<div onMouseOver="details('s5')" class="s5"></div> 
<div onMouseOver="details('s6')" class="s6"></div> 
<div onMouseOver="details('s7')" class="s7"></div> 
<div onMouseOver="details('s8')" class="s8"></div> 
<div onMouseOver="details('s9')" class="s9"></div> 
<div onMouseOver="details('s10')" class="s10"></div> 
<div onMouseOver="details('s11')" class="s11"></div> 
<div onMouseOver="details('s12')" class="s12"></div> 
<div onMouseOver="details('s13')" class="s13"></div> 
<div onMouseOver="details('s14')" class="s14"></div> 
<div onMouseOver="details('s15')" class="s15"></div> 
<div onMouseOver="details('s16')" class="s16"></div> 
<div onMouseOver="details('s17')" class="s17"></div> 
<div onMouseOver="details('s18')" class="s18"></div> 
<div onMouseOver="details('s19')" class="s19"></div> 
<div onMouseOver="details('s20')" class="s20"></div> 
<div onMouseOver="details('s21')" class="s21"></div> 
<div onMouseOver="details('s22')" class="s22"></div> 
<div onMouseOver="details('s23')" class="s23"></div> 
<div onMouseOver="details('s24')" class="s24"></div> 
<div onMouseOver="details('s25')" class="s25"></div> 
<div onMouseOver="details('s26')" class="s26"></div> 
<div onMouseOver="details('s27')" class="s27"></div> 
<div onMouseOver="details('s28')" class="s28"></div> 
<div onMouseOver="details('s29')" class="s29"></div> 
<div onMouseOver="details('s30')" class="s30"></div> 
<div onMouseOver="details('s31')" class="s31"></div> 
<div onMouseOver="details('s32')" class="s32"></div> 
<div onMouseOver="details('s33')" class="s33"></div> 
<div onMouseOver="details('s34')" class="s34"></div> 
<div onMouseOver="details('s35')" class="s35"></div> 
<div onMouseOver="details('s36')" class="s36"></div> 
<div onMouseOver="details('s37')" class="s37"></div> 
<div onMouseOver="details('s38')" class="s38"></div> 
<div onMouseOver="details('s39')" class="s39"></div> 
<div onMouseOver="details('s40')" class="s40"></div> 
<div onMouseOver="details('s41')" class="s41"></div> 
<div onMouseOver="details('s42a')" class="s42a"></div> 
<div onMouseOver="details('s42b')" class="s42b"></div> 
<div onMouseOver="details('s43')" class="s43"></div> 
<div onMouseOver="details('s44')" class="s44"></div> 

<div id="detailsBox">Hover Over the Numbers to Find the Answer</div> 
</body> 
</html>

Любая помощь будет великолепна: D

(Вы также можете просмотреть его http://cameronmlewis.com/house/)

1 Ответ

0 голосов
/ 31 мая 2011

Извините, но потребовалось некоторое время, чтобы выяснить, что не так в IE7, но я думаю, что нашел вашу проблему. Вы использовали margin-left и margin-top для изменения положения автоматически выровненных изображений. Для большинства браузеров это работает нормально, но IE до IE7 включительно в лучшем случае глючит. В результате элемент body рисуется поверх некоторых из парящих DIV.

Если у вас IE8 +, вы можете увидеть это с помощью Developer Tool. Вы можете сделать это, нажав клавишу F12 после полной загрузки страницы, установите режим браузера на IF7 и затем используйте инструмент «Выбор элемента по клику» (CTRL + B), чтобы попытаться выбрать созданные вами DIV. Вы заметите, что можете выбирать только элементы сверху элемента body (они также изменят текст при наведении курсора).

Лучшим вариантом является использование 'position: absolute;' и 'z-index', если вы хотите изменить положение DIV, как это. Также, чтобы очистить ваш CSS, я бы посоветовал вам сделать следующее: 

<style>
.hoverDiv {
  height: 10px;
  position: absolute;
  width: 20px;
  z-index: 9999;
}

.s1 {
  left: 300px;
  top: 10px;
}

.s2 {
  left: 350px;
  top: 130px;
}
</style>

После чего вы можете сделать свои DIV такими: 

<div class="hoverDiv s1">&nbsp;</div>

Это использует наследование CSS для очистки вашего кода (меньше повторений) и значительно упрощает небольшие изменения. Кроме того, я хотел бы взглянуть на использование некоторых параметров DIVs для хранения вашего текста, а не помещать их в JavaScript - но это ваше дело.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...