Home/ Questions/Q 6814455
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T20:41:28+00:00

I have 8 thumbnails, when the user hovers over any one of them, a

  • 0

I have 8 thumbnails, when the user hovers over any one of them, a separate div named ‘target’ displays an image. By default ‘target’ is an empty div, until one of the thumbnails are hovered.

Question:
How do I set ‘target’ to have a default image, without messing up the currently functionality of the hover? I would like for that default image to be ‘chart’

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The code you have to deal with is pretty gross. If this page is going to require ongoing maintenance or if you just want to sleep better at night consider using unobtrusive javascript and a nice DOM manipulation library like JQuery to clean this up like so. If I understand your question I believe all you need to do is change:

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

    to have the chart class on it by default:

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