ПРОСТОЙ переключить запрос изображения - PullRequest
Новая
       1

ПРОСТОЙ переключить запрос изображения

0 голосов
/ 15 ноября 2011

У меня есть 8 миниатюр, когда пользователь наводит курсор на любой из них, отдельный div с именем 'target' отображает изображение. По умолчанию «target» - это пустой div, пока не появится одна из миниатюр.

Вопрос: Как мне установить 'target', чтобы иметь изображение по умолчанию, не мешая текущей функциональности наведения? Я хотел бы, чтобы это изображение по умолчанию было '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>

1 Ответ

0 голосов
/ 15 ноября 2011

Код, с которым вам приходится иметь дело, довольно грубый. Если эта страница требует постоянного обслуживания или вы просто хотите лучше спать по ночам, рассмотрите возможность использования ненавязчивого JavaScript и хорошей библиотеки манипуляций с DOM, такой как JQuery, для очистки , например, . Если я понимаю ваш вопрос, я считаю, что все, что вам нужно сделать, это изменить: 

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

чтобы иметь класс диаграммы по умолчанию: 

<div id="target" class="chart"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...