gpt4 book ai didi

javascript - SIMPLE 切换图片查询

转载 作者:行者123 更新时间:2023-11-28 14:24:32 31 4
gpt4 key购买 nike

我有 8 个缩略图,当用户将鼠标悬停在其中任何一个上时,一个名为“target”的单独 div 会显示一个图像。默认情况下,“目标”是一个空的 div,直到悬停其中一个缩略图。

问题:如何将“目标”设置为具有默认图像,而不会弄乱悬停的当前功能?我希望该默认图像为“图表”

<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>

最佳答案

您必须处理的代码非常粗糙。如果此页面需要持续维护,或者如果您只是想在晚上睡得更好,请考虑使用不显眼的 javascript 和一个不错的 DOM 操作库(如 JQuery)来清理它 like so .如果我理解你的问题,我相信你需要做的就是改变:

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

默认有图表类:

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

关于javascript - SIMPLE 切换图片查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8141506/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com