2011-05-31 150 views
0

我創建了此JavaScript,因此當您將鼠標懸停在某個div上時,它會顯示在圖像下方的框中。它適用於所有的瀏覽器,但Internet Explorer,不知道爲什麼?IE7 Javascript無法正常工作

這裏的代碼的網站:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><script src="http://1.2.3.8/bmi-int-js/bmi.js" language="javascript"></script><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><script language="javascript"><!-- 
bmi_SafeAddOnload(bmi_load,"bmi_orig_img",1);//--> 
</script> 

任何幫助是巨大的。謝謝

+0

它爲什麼不起作用?怎麼了? – SLaks 2011-05-31 12:35:01

+0

什麼都沒有,在Internet Explorer 7中我測試了它,當你將鼠標懸停在div上時,底部的文本不會改變。 – cameronmarklewis 2011-05-31 12:35:50

回答

3

刪除對象字面上的尾隨彗形。 IE瀏覽器扼殺那些。

myInfo={ 
    "s1":"Flaunchin", 
    ... 
    ... 
    "s42b":"Underpinning", 
    "s43":"Interceptor Trap", 
    "s44":"Water Main", 
-------------------^^^^ 
} 
+0

感謝你的支持,這很好,雖然現在我遇到了另一個問題,當我將鼠標懸停在div上時,他們會不會只有頭幾個似乎把文本放在div中? – cameronmarklewis 2011-05-31 12:48:18

+0

會做謝謝,等待20分鐘 – cameronmarklewis 2011-05-31 12:53:21

4

你的巨型對象字面上有一個尾隨的,

+2

是的,IE對於尾隨逗號是挑剔的。而[jslint](http://jslint.com/)會爲你找到它們。 :) – awm 2011-05-31 12:37:13

+1

是的,JSLint會爲您節省各種各樣的痛苦,當做Javascript。這個工具是你不應該沒有的工具 – 2011-05-31 12:38:53

+0

@awm:@ZacharyK:我個人比較喜歡JSHint – qwertymk 2011-05-31 12:55:15