Javascript 简单切换图像查询
我有8个缩略图,当用户将鼠标悬停在其中任何一个缩略图上时,一个名为“target”的单独div将显示一个图像。默认情况下,“target”是一个空div,直到其中一个缩略图悬停 问题: 如何将“target”设置为具有默认图像,而不破坏悬停的当前功能?我希望该默认图像为“图表”Javascript 简单切换图像查询,javascript,css,html,Javascript,Css,Html,我有8个缩略图,当用户将鼠标悬停在其中任何一个缩略图上时,一个名为“target”的单独div将显示一个图像。默认情况下,“target”是一个空div,直到其中一个缩略图悬停 问题: 如何将“target”设置为具有默认图像,而不破坏悬停的当前功能?我希望该默认图像为“图表” <style> #target { width: 1220px; height: 400px; } .chart { background: url("theme/images/timeline.png")
<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>
#目标{宽度:1220px;高度:400px;}
.chart{background:url(“theme/images/timeline.png”)不重复0;}
.html{background:url(“theme/images/html_graph.png”)不重复0;}
.oracle{background:url(“theme/images/oracle_graph.png”)不重复0;}
.linux{background:url(“theme/images/linux_graph.png”)不重复0;}
.php{background:url(“theme/images/php_-graph.png”)不重复0;}
.java{background:url(“theme/images/java_-graph.png”)不重复0;}
.prod{background:url(“theme/images/prod_graph.png”)不重复0;}
.design{background:url(“theme/images/design_graph.png”)不重复0;}
.pm{background:url(“theme/images/pm_graph.png”)不重复0;}
功能改变(五){
var target=document.getElementById(“目标”);
如果(v==“imgA”){
target.className=“html”;
}否则如果(v==“imgB”){
target.className=“oracle”;
}否则如果(v==“imgC”){
target.className=“linux”;
}否则如果(v==“imgD”){
target.className=“php”;
}否则,如果(v==“imgE”){
target.className=“java”;
}否则如果(v==“imgF”){
target.className=“prod”;
}否则如果(v==“imgG”){
target.className=“pm”;
}否则,如果(v==“imgH”){
target.className=“设计”;
}否则{
target.className=“图表”;
}
}
函数changeReset(){
var target=document.getElementById(“目标”);
target.className=“”;
}
您必须处理的代码非常糟糕。如果这个页面需要持续的维护,或者如果你只想在晚上睡得更好,可以考虑使用不显眼的JavaScript和像JQuery这样的DOM操作库来清理这个问题。如果我理解你的问题,我相信你所需要做的就是改变:
<div id="target"></div>
要在默认情况下将图表类放在其上,请执行以下操作:
<div id="target" class="chart"></div>
谢谢RSG,这特别解决了这个问题。当页面加载时,图表现在显示出来,但一旦我将鼠标悬停在缩略图上,然后从缩略图中删除光标,默认图像将永远不会返回。你知道如何解决这个问题吗?我同意当我有更多的时间时,我需要切换到jquery。我知道了,但是你指引了我正确的方向,谢谢你所做的一切。