SIMPLE切換圖像查詢

我有8個縮略圖，當用戶將鼠標懸停在其中任何一個上時，名爲「target」的單獨div顯示圖像。默認情況下，「目標」是一個空的div，直到其中一個縮略圖被徘徊。SIMPLE切換圖像查詢

問題： 如何將'target'設置爲具有默認圖像，而不會混淆懸停的當前功能？我想爲默認的圖像是「圖表」

<style> 
#target { width: 1220px; height: 400px; } 

.chart { background: url("theme/images/timeline.png") no-repeat 0 0; } 

.html { background: url("theme/images/html_graph.png") no-repeat 0 0; } 
.oracle { background: url("theme/images/oracle_graph.png") no-repeat 0 0; } 
.linux { background: url("theme/images/linux_graph.png") no-repeat 0 0; } 
.php { background: url("theme/images/php_graph.png") no-repeat 0 0; } 
.java { background: url("theme/images/java_graph.png") no-repeat 0 0; } 
.prod { background: url("theme/images/prod_graph.png") no-repeat 0 0; } 
.design { background: url("theme/images/design_graph.png") no-repeat 0 0; } 
.pm { background: url("theme/images/pm_graph.png") no-repeat 0 0; } 
</style> 

<script type="text/javascript" language="Javascript/1.2"> 
function change(v) { 
    var target = document.getElementById("target"); 
    if (v == "imgA") { 
     target.className = "html"; 
    } else if (v == "imgB") { 
     target.className = "oracle"; 
    } else if (v == "imgC") { 
     target.className = "linux"; 
    } else if (v == "imgD") { 
     target.className = "php"; 
    } else if (v == "imgE") { 
     target.className = "java"; 
    } else if (v == "imgF") { 
     target.className = "prod"; 
    } else if (v == "imgG") { 
     target.className = "pm"; 
    } else if (v == "imgH") { 
     target.className = "design"; 
    } else { 
     target.className = "chart"; 
    } 
} 
function changeReset() { 
    var target = document.getElementById("target"); 
    target.className = ""; 
} 
</script> 

</head> 

<body> 
    <div> 
     <a id="imgA" onmouseover="change('imgA');" onmouseout="changeReset();" href="#"><img src="theme/images/Albania.png" alt="" /></a> 
     <a id="imgB" onmouseover="change('imgB');" onmouseout="changeReset();" href="#"><img src="theme/images/Algeria.png" alt="" /></a> 
     <a id="imgC" onmouseover="change('imgC');" onmouseout="changeReset();" href="#"><img src="theme/images/Brazil.png" alt="" /></a> 
     <a id="imgD" onmouseover="change('imgD');" onmouseout="changeReset();" href="#"><img src="theme/images/Brunei.png" alt="" /></a> 
     <a id="imgE" onmouseover="change('imgE');" onmouseout="changeReset();" href="#"><img src="theme/images/Chad.png" alt="" /></a> 
     <a id="imgF" onmouseover="change('imgF');" onmouseout="changeReset();" href="#"><img src="theme/images/Chad.png" alt="" /></a> 
     <a id="imgG" onmouseover="change('imgG');" onmouseout="changeReset();" href="#"><img src="theme/images/Chad.png" alt="" /></a> 
     <a id="imgH" onmouseover="change('imgH');" onmouseout="changeReset();" href="#"><img src="theme/images/Chad.png" alt="" /></a> 
    </div> 
    <div id="target"></div></body>

來源

2011-11-15 need2nobasis

你要處理的代碼相當噁心。如果此頁面需要持續維護，或者如果您只是想在晚上睡得更好，請考慮使用不引人注意的JavaScript和像JQuery這樣的好操作庫來清理此問題like so。如果我理解你的問題，我相信所有你需要做的是改變：

<div id="target"></div>

默認有圖表類就可以了：

<div id="target" class="chart"></div>

來源

2011-11-15 18:59:57 RSG

感謝RSG，這partically解決的問題。當頁面加載時，圖表現在顯示，但是一旦我將鼠標懸停在縮略圖上，然後從縮略圖中刪除該光標，默認圖像就不會返回。你知道如何解決這個問題嗎？我同意當我有更多時間時，我需要切換到jquery。 – need2nobasis

我明白了，但你帶領我走向正確的方向，謝謝你的一切。 – need2nobasis

很高興幫助:) – RSG

SIMPLE切換圖像查詢

回答

相關問題