Отображение одного и того же изображения несколько раз в разных местах на веб-странице с использованием JavaScript - PullRequest
0 голосов
/ 09 июня 2009

У меня есть простая веб-страница с простой загадкой. Есть некоторые изображения, которые пользователь должен перетащить в назначенные им зоны перетаскивания. Я использую решение в JavaScript, сгенерированное DreamWeaver.

Я хочу добавить функцию JavaScript, которая будет показывать correct.png или неправильный. Простой способ сделать это - просто иметь правильных и неправильных div элементов для каждого из перетаскиваемых изображений. Но есть ли более элегантный способ?

Другой способ выразиться так:
Напишите функции JavaScript Show(commonImageId, nextToImageId) и Hide(commonImageId, nextToImageId), которые будут использоваться, например, Show('correct', 'draggable1');.

1 Ответ

2 голосов
/ 09 июня 2009

Вместо того, чтобы показывать и скрывать несколько делений, вы также можете попробовать это решение.

Создайте два стиля, каждый с различным набором фонового изображения. Всякий раз, когда вы отлавливаете событие, в котором данное изображение должно быть помечено как правильное или неправильное, просто поменяйте местами стиль div, который будет иметь эффект переключения фонового изображения.

Очень быстрый (и нуждающийся в некоторой очистке) пример кода ниже, у вас есть правильная идея с установкой типа с помощью функции ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Image Swap</title>
<script language="javascript">
function setImage(id, value){
document.getElementById(id).className=value;
}
</script>
<style>
.blank{
    width:80px;
    height:80px;
    float:left;
}
.correct{
    background-image:url('correct.gif');
    background-repeat:no-repeat;
    width:80px;
    height:80px;
    float:left;
}
.wrong{
    background-image:url('wrong.gif');
    background-repeat:no-repeat;
    width:80px;
    height:80px;
    float:left;
}
.item{
    float:left;
    height:80px;
}
.clear{
    clear:both;
}
</style>
</head>
<body>
<div id="correct1" class"blank"></div><div id="item1" class="item">Item 1</div><div class="clear"></div>
<div id="correct2" class="blank"></div><div id="item2" class="item">Item 2</div><div class="clear"></div>
<script language="javascript">
setImage('correct1','correct');
</script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...