Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Динамическая смена картинки (https://javascript.ru/forum/events/15213-dinamicheskaya-smena-kartinki.html)

pine 17.02.2011 13:49

Динамическая смена картинки
 
Скрипт меняет картинку при клике на соответствующей ссылке - Image1, Image2, Image3. Задача иметь в распоряжении информацию об имене текущей (установленной) картинки - currentfile. Что-то у меня не получается вернуть ее из функции change(file):

<html>
<head>
<title>onclick.html</title>
<SCRIPT LANGUAGE="JavaScript">
function change(file) {
document.name1.src=file;
currentfile=file;
return currentfile;
}
</SCRIPT>
</head>
<body>
<img name="name1" src="image1.jpg" border="0">
<br>
<script>
var currentfile="";
document.write('<a href="#" onclick="change(\'image1.jpg\');">Image1</a><br>');
document.write('<a href="#" onclick="change(\'image2.jpg\');">Image2</a><br>');
document.write('<a href="#" onclick="change(\'image3.jpg\');">Image3</a><br>');
document.write('Currentfile='+ currentfile);
</script>
</body>
</html>

walik 17.02.2011 14:38

Цитата:

var currentfile="";
document.write('<a href="#" onclick="change(\'image1.jpg\');">Image1</a><br>');
document.write('<a href="#" onclick="change(\'image2.jpg\');">Image2</a><br>');
document.write('<a href="#" onclick="change(\'image3.jpg\');">Image3</a><br>');
document.write('Currentfile='+ currentfile);
В первой строчке, вы же очищаете эту переменную и больше ей ничего не присваиваете.

Skipp 17.02.2011 15:03

<img id="image" onload="alert(this.src)" />

<a href="javascript:void(0)" onclick="document.getElementById('image').src = 'http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' ">javascript</a>
<a href="javascript:void(0)" onclick="document.getElementById('image').src = 'http://img.yandex.net/i/www/logo.png' ">yandex</a>
<a href="javascript:void(0)" onclick="document.getElementById('image').src = 'http://www.google.ru/images/logos/ps_logo2.png' ">google</a>

dmitriymar 17.02.2011 16:38

pine,
код рабочий .
достаточно заменить в
function change(file) {
document.name1.src=file;
currentfile=file;
return currentfile;
}

return currentfile; на allert(currentfile);
ну а то что этой строкой не вернётся document.write('Currentfile='+ currentfile);-это однозначно
причина одна-она выполняется один раз в момент загрузки страницы и больше никогда и изменения currentfile на ней никак не отразятся.и выполниться тем что в переменной а в ней пустота

pine 17.02.2011 20:45

dmitriymar!
Alert мне не годится, потому что мне нужна именно переменная currentfile для того чтобы в зависимости от включенной картинки производить далее определенные действия в скрипте. Например, в какое-то время пользователь может изменить цвет фона вокруг картинки.
Я перепробовал много разных вариантов прежде чем обратиться в форум. Может можно путем вставки кода в

document.write('<a href="#" onclick="change(\'image1.jpg\');___________;">Imag e1</a><br>');
получить нужную мне переменную, а?

dmitriymar 17.02.2011 21:46

pine,
не совсем понимаю тебя но
метод document.write работает один раз всего-при загрузке страницы. когда документ загружен его вызывать нельзя используется innerHTML.для того чтобы отображались изменения переменой нужен обработчик для вывода именений на экран.

область видимости переменных знаешь что такое?не знаю где ты её ещё в коде используешь -но лучше вынеси в хеадер страницы её
<head>
<title>onclick.html</title>
<SCRIPT LANGUAGE="JavaScript">
var currentfile="";
function change(file) {
document.name1.src=file;
currentfile=file;
document.getElementById('bl').innerHTML=currentfile;// эта строка отвечает за вывод значения пер. на экран в 
                                                                           //элементе с id='bl'

}
</SCRIPT>
</head>
<body>
<img name="name1" src="image1.jpg" border="0">
<br>
<script>

document.write('<a href="#" onclick="change(\'image1.jpg\');">Image1</a><br>');
document.write('<a href="#" onclick="change(\'image2.jpg\');">Image2</a><br>');
document.write('<a href="#" onclick="change(\'image3.jpg\');">Image3</a><br>');

</script>
<div id='bl'>Значение </div>

</body>

pine 17.02.2011 23:53

Спасибо, dmitriymar!
Так действительно работает. Теперь ломаю голову - как b1 встроить в скрипт...
Приятно иметь дело с грамотными людьми!
Успехов.


Часовой пояс GMT +3, время: 02:59.