Работа с onClick на JavaScript
Всем привет.
Есть такая задача.
На странице есть три картинки(кнопки), при нажатии на картинку она должна сменится на другую (событие onClick), страница не должна перегружатся. Сменить картинку я могу с помощью:
но, мне необходимо что бы при нажатии на другую картинку, первая менялась бы на исходную и так далее.
Может кто-то реализовывал такую штуку, поделитесь исходником, пожалуйста.
Есть такая задача.
На странице есть три картинки(кнопки), при нажатии на картинку она должна сменится на другую (событие onClick), страница не должна перегружатся. Сменить картинку я могу с помощью:
Код:
onclick="this.src='img/pic.png'
но, мне необходимо что бы при нажатии на другую картинку, первая менялась бы на исходную и так далее.
Может кто-то реализовывал такую штуку, поделитесь исходником, пожалуйста.
Как-то так?
Код:
<html>
<head>
<title>Page</test>
<script type="text/javascript">
var gImageIds = ["img1", "img2", "img3"];
function changeImage(obj, src)
{
// save the initial attribute
if(!obj.getAttribute("_bogus"))
obj.setAttribute("_bogus", obj.src);
// change attribute
obj.src = src;
// restore old images for others elements
var i;
for(i in gImageIds)
{
var el = document.getElementById(gImageIds);
if(el && (el != obj))
{
var oldVal = el.getAttribute("_bogus");
if(oldVal)
el.src = oldVal;
}
}
}
</script>
</head>
<body>
<img id="img1" src="img1_1.png" alt="" onclick="changeImage(this, 'img1_2.png')" />
<br />
<img id="img2" src="img2_1.png" alt="" onclick="changeImage(this, 'img2_2.png')" />
<br />
<img id="img3" src="img3_1.png" alt="" onclick="changeImage(this, 'img2_2.png')" />
</body>
</html>
<head>
<title>Page</test>
<script type="text/javascript">
var gImageIds = ["img1", "img2", "img3"];
function changeImage(obj, src)
{
// save the initial attribute
if(!obj.getAttribute("_bogus"))
obj.setAttribute("_bogus", obj.src);
// change attribute
obj.src = src;
// restore old images for others elements
var i;
for(i in gImageIds)
{
var el = document.getElementById(gImageIds);
if(el && (el != obj))
{
var oldVal = el.getAttribute("_bogus");
if(oldVal)
el.src = oldVal;
}
}
}
</script>
</head>
<body>
<img id="img1" src="img1_1.png" alt="" onclick="changeImage(this, 'img1_2.png')" />
<br />
<img id="img2" src="img2_1.png" alt="" onclick="changeImage(this, 'img2_2.png')" />
<br />
<img id="img3" src="img3_1.png" alt="" onclick="changeImage(this, 'img2_2.png')" />
</body>
</html>
Хотя лучше наверно так:
И цикл не нужен, и править массив идентификаторов не нужно каждый раз при изменении списка.
Код:
<html>
<head>
<title>Page</test>
<script type="text/javascript">
var gPrevClickObj = null;
function changeImage(obj, src)
{
// save the initial attribute
if(!obj.getAttribute("_bogus"))
obj.setAttribute("_bogus", obj.src);
// change attribute
obj.src = src;
// restore old images for others elements
if(gPrevClickObj && (gPrevClickObj != obj))
gPrevClickObj.src = gPrevClickObj.getAttribute("_bogus");
// save this object
gPrevClickObj = obj;
}
</script>
</head>
<body>
<img id="img1" src="img1_1.png" alt="" onclick="changeImage(this, 'img1_2.png')" />
<br />
<img id="img2" src="img2_1.png" alt="" onclick="changeImage(this, 'img2_2.png')" />
<br />
<img id="img3" src="img3_1.png" alt="" onclick="changeImage(this, 'img3_2.png')" />
</body>
</html>
<head>
<title>Page</test>
<script type="text/javascript">
var gPrevClickObj = null;
function changeImage(obj, src)
{
// save the initial attribute
if(!obj.getAttribute("_bogus"))
obj.setAttribute("_bogus", obj.src);
// change attribute
obj.src = src;
// restore old images for others elements
if(gPrevClickObj && (gPrevClickObj != obj))
gPrevClickObj.src = gPrevClickObj.getAttribute("_bogus");
// save this object
gPrevClickObj = obj;
}
</script>
</head>
<body>
<img id="img1" src="img1_1.png" alt="" onclick="changeImage(this, 'img1_2.png')" />
<br />
<img id="img2" src="img2_1.png" alt="" onclick="changeImage(this, 'img2_2.png')" />
<br />
<img id="img3" src="img3_1.png" alt="" onclick="changeImage(this, 'img3_2.png')" />
</body>
</html>
И цикл не нужен, и править массив идентификаторов не нужно каждый раз при изменении списка.
ZeroDivision спасибо за помощь, именно это мне и нужно было, только вот есть небольшая проблемка, когда я делаю эту картинку ссылкой, то вторая картинка при нажатии на первую появляется и исчезает (меняеться мгновенно на первую). Страница не рефрешится, просто при нажатии на картинку-ссылку ниже инклудится определенная страница.
Можешь помочь? Как зделать чтобы все было как и задумывалось.
Можешь помочь? Как зделать чтобы все было как и задумывалось.
Не совсем понял что ты имеешь ввиду. Следующий код со ссылками у меня нормально работает:
Как ты инклудишь снизу другую страницу? Как вариант могу предложить что-то типа такого:
Только тут в блок на странице дописывается заранее определенный текст. Если текст заменить на ссылку и загружать ее через AJAX в нужное место, то думаю будет как раз то что тебе нужно.
Код:
<html>
<head>
<title>Page</test>
<script type="text/javascript">
var gPrevClickObj = null;
function changeImage(obj, src)
{
// save the initial attribute
if(!obj.getAttribute("_bogus"))
obj.setAttribute("_bogus", obj.src);
// change attribute
obj.src = src;
// restore old images for others elements
if(gPrevClickObj && (gPrevClickObj != obj))
gPrevClickObj.src = gPrevClickObj.getAttribute("_bogus");
// save this object
gPrevClickObj = obj;
}
</script>
</head>
<body>
<a href="#"><img id="img1" src="img1_1.png" alt="" onclick="changeImage(this, 'img1_2.png')" /></a>
<br />
<a href="#"><img id="img2" src="img2_1.png" alt="" onclick="changeImage(this, 'img2_2.png')" /></a>
<br />
<a href="#"><img id="img3" src="img3_1.png" alt="" onclick="changeImage(this, 'img3_2.png')" /></a>
<div id="footer" />
</body>
</html>
<head>
<title>Page</test>
<script type="text/javascript">
var gPrevClickObj = null;
function changeImage(obj, src)
{
// save the initial attribute
if(!obj.getAttribute("_bogus"))
obj.setAttribute("_bogus", obj.src);
// change attribute
obj.src = src;
// restore old images for others elements
if(gPrevClickObj && (gPrevClickObj != obj))
gPrevClickObj.src = gPrevClickObj.getAttribute("_bogus");
// save this object
gPrevClickObj = obj;
}
</script>
</head>
<body>
<a href="#"><img id="img1" src="img1_1.png" alt="" onclick="changeImage(this, 'img1_2.png')" /></a>
<br />
<a href="#"><img id="img2" src="img2_1.png" alt="" onclick="changeImage(this, 'img2_2.png')" /></a>
<br />
<a href="#"><img id="img3" src="img3_1.png" alt="" onclick="changeImage(this, 'img3_2.png')" /></a>
<div id="footer" />
</body>
</html>
Как ты инклудишь снизу другую страницу? Как вариант могу предложить что-то типа такого:
Код:
<html>
<head>
<title>Page</test>
<script type="text/javascript">
var gPrevClickObj = null;
function clickAction(obj, src, text)
{
// save the initial attribute
if(!obj.getAttribute("_bogus"))
obj.setAttribute("_bogus", obj.src);
// change attribute
obj.src = src;
// restore old images for others elements
if(gPrevClickObj && (gPrevClickObj != obj))
gPrevClickObj.src = gPrevClickObj.getAttribute("_bogus");
// save this object
gPrevClickObj = obj;
// set block text
document.getElementById('footer').innerHTML = text;
}
</script>
</head>
<body>
<img id="img1" src="img1_1.png" alt="" onclick="clickAction(this, 'img1_2.png', 'click1')" />
<br />
<img id="img2" src="img2_1.png" alt="" onclick="clickAction(this, 'img2_2.png', 'click2')" />
<br />
<img id="img3" src="img3_1.png" alt="" onclick="clickAction(this, 'img3_2.png', 'click3')" />
<div id="footer" />
</body>
</html>
<head>
<title>Page</test>
<script type="text/javascript">
var gPrevClickObj = null;
function clickAction(obj, src, text)
{
// save the initial attribute
if(!obj.getAttribute("_bogus"))
obj.setAttribute("_bogus", obj.src);
// change attribute
obj.src = src;
// restore old images for others elements
if(gPrevClickObj && (gPrevClickObj != obj))
gPrevClickObj.src = gPrevClickObj.getAttribute("_bogus");
// save this object
gPrevClickObj = obj;
// set block text
document.getElementById('footer').innerHTML = text;
}
</script>
</head>
<body>
<img id="img1" src="img1_1.png" alt="" onclick="clickAction(this, 'img1_2.png', 'click1')" />
<br />
<img id="img2" src="img2_1.png" alt="" onclick="clickAction(this, 'img2_2.png', 'click2')" />
<br />
<img id="img3" src="img3_1.png" alt="" onclick="clickAction(this, 'img3_2.png', 'click3')" />
<div id="footer" />
</body>
</html>
Только тут в блок на странице дописывается заранее определенный текст. Если текст заменить на ссылку и загружать ее через AJAX в нужное место, то думаю будет как раз то что тебе нужно.
Цитата: ZeroDivision
Следующий код со ссылками у меня нормально работает:
Да, этот код нормально и у меня работает, т.к. здесь нету инклуда страницы.
Цитата: ZeroDivision
Как ты инклудишь снизу другую страницу?
Код:
<php
include "$blablabla.php
?>";
include "$blablabla.php
?>";
$blablabla - это переменная, в которой содержится имя файла, и эта переменная содержится в ссылке-картинке, таким вот образом:
Код:
<a href='this_page.php?blablabla=other_page'
т.е. ссылка идет на эту же страницу, только плюс ко всему еще и передается переменная на другую страницу.
Щас разбираюсь со вторым примером кода, думаю как вместо текста впихнуть инклуд страницы.
Спасибо за помощь.
Цитата: kotelius
думаю как вместо текста впихнуть инклуд страницы.
IFrame? :D
Цитата: FrostFX
IFrame? :D
Ну, можно и IFrame, но я просто тупо написал вместо текста обычный инклуд php'эшный. Получилось вот так:
Код:
<img style="cursor:pointer;" id="img3" src="pic_1_1.png" alt=""
onclick="clickAction(this, 'pic_1_2.png', '<?php include 'second.php' ?>')" />
onclick="clickAction(this, 'pic_1_2.png', '<?php include 'second.php' ?>')" />
Вроде бы все работает :), как и задумывалось.
ZeroDivision тебе огромное спасибо.
Вот блин....
Появилась еще одна проблемка.
Можно ли, сделать так что бы при открытии страницы, одна из картинок была уже б измененная и выведен в блок текст.
Сделать что-то типа имитации клика на картинку. :confused:
Появилась еще одна проблемка.
Можно ли, сделать так что бы при открытии страницы, одна из картинок была уже б измененная и выведен в блок текст.
Сделать что-то типа имитации клика на картинку. :confused:
а если через GET передать № картинки и № текста?
Цитата: kotelius
Страница не рефрешится.
В таком случае получается что рефрешится.
Цитата:
Код:
<php
include "$blablabla.php
?>";
include "$blablabla.php
?>";
$blablabla - это переменная, в которой содержится имя файла, и эта переменная содержится в ссылке-картинке, таким вот образом:
Код:
<a href='this_page.php?blablabla=other_page'
А вот так делать потенциально опасно. А что если кто-нибудь захочет приинклудить файл со своего сервера со своим кодом? Этот код выполнится на твоем сервере.
Я думаю все таки лучше сделать через Ajax и без перезагрузки страницы. Возьми какую-нибудь библиотеку типа jQuery, там уже есть кросплатформенный Ajax и куча полезных функций.
Все решение найдено.
Добавил событие [COLOR="Red"]onload[/COLOR] в тэг [COLOR="Blue"]body[/COLOR], в котором указал какую картинку и текст грузить. Получилось вот такое:
Вроде бы работает как надо!
Добавил событие [COLOR="Red"]onload[/COLOR] в тэг [COLOR="Blue"]body[/COLOR], в котором указал какую картинку и текст грузить. Получилось вот такое:
Код:
<body onload="clickAction(img1, 'img1_2.png', 'click1')">
Вроде бы работает как надо!
Цитата: ZeroDivision
А вот так делать потенциально опасно. А что если кто-нибудь захочет приинклудить файл со своего сервера со своим кодом? Этот код выполнится на твоем сервере.
Да, на счет небезопасности этого всего я в курсе, и то что register_globals лучше отключить. Просто это все крутится в определенной среде, без выхода в инет, и никто из левых доступа к этому не имеет, поэтому я и не переживаю :D.
Цитата: ZeroDivision
Я думаю все таки лучше сделать через Ajax и без перезагрузки страницы. Возьми какую-нибудь библиотеку типа jQuery, там уже есть кросплатформенный Ajax и куча полезных функций.
Я еще с этим тесно не сталкивался, вот все собираюсь разобратся. Уже пару книжечег скачал, и библиотеку jQuery тоже еще пару недель назад, тока все руки не доходят.
Цитата: kotelius
никто из левых доступа к этому не имеет, поэтому я и не переживаю :D.
Это зря. Про безопасность нельзя не переживать. Лучше сразу время потратить и защититься, чем потом жалеть. Ну заодно и с методикой защиты познакомиться, а потом ее совершенствовать.
Цитата: kotelius
Я еще с этим тесно не сталкивался, вот все собираюсь разобратся. Уже пару книжечег скачал, и библиотеку jQuery тоже еще пару недель назад, тока все руки не доходят.
Вот пример с jQuery и с Ajax. От предыдущего отличается тем что подключается библиотека jQuery, и в директории создается 3 файла: file1, file2 и file3. Содержимое этих файлов получается с помощью Ajax GET запроса из jQuery.
Код:
<html>
<head>
<title>Page</test>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var gPrevClickObj = null;
function clickAction(obj, src, href)
{
// save the initial attribute
if(!obj.getAttribute("_bogus"))
obj.setAttribute("_bogus", obj.src);
// change attribute
obj.src = src;
// restore old image for previous clicked element
if(gPrevClickObj && (gPrevClickObj != obj))
gPrevClickObj.src = gPrevClickObj.getAttribute("_bogus");
// make AJAX GET request if previuos element not equals current
if(gPrevClickObj != obj)
{
$.get(href, function(data)
{
// and set element text to response text
document.getElementById('footer').innerHTML = data;
});
}
// save this element as previous
gPrevClickObj = obj;
}
</script>
</head>
<body>
<img id="img1" src="img1_1.png" alt="" onclick="clickAction(this, 'img1_2.png', 'file1')" />
<br />
<img id="img2" src="img2_1.png" alt="" onclick="clickAction(this, 'img2_2.png', 'file2')" />
<br />
<img id="img3" src="img3_1.png" alt="" onclick="clickAction(this, 'img3_2.png', 'file3')" />
<div id="footer" />
</body>
</html>
<head>
<title>Page</test>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var gPrevClickObj = null;
function clickAction(obj, src, href)
{
// save the initial attribute
if(!obj.getAttribute("_bogus"))
obj.setAttribute("_bogus", obj.src);
// change attribute
obj.src = src;
// restore old image for previous clicked element
if(gPrevClickObj && (gPrevClickObj != obj))
gPrevClickObj.src = gPrevClickObj.getAttribute("_bogus");
// make AJAX GET request if previuos element not equals current
if(gPrevClickObj != obj)
{
$.get(href, function(data)
{
// and set element text to response text
document.getElementById('footer').innerHTML = data;
});
}
// save this element as previous
gPrevClickObj = obj;
}
</script>
</head>
<body>
<img id="img1" src="img1_1.png" alt="" onclick="clickAction(this, 'img1_2.png', 'file1')" />
<br />
<img id="img2" src="img2_1.png" alt="" onclick="clickAction(this, 'img2_2.png', 'file2')" />
<br />
<img id="img3" src="img3_1.png" alt="" onclick="clickAction(this, 'img3_2.png', 'file3')" />
<div id="footer" />
</body>
</html>
Цитата: ZeroDivision
Вот пример с jQuery и с Ajax. От предыдущего отличается тем что подключается библиотека jQuery, и в директории создается 3 файла: file1, file2 и file3. Содержимое этих файлов получается с помощью Ajax GET запроса из jQuery.
Привет всем!
ZeroDivision, у меня к тебе еще небольшой вопросик. Я так понимаю, что последний твой скрипт, при клике на картинку подгружает файл в определенное место, но как я заметил, то он его подгружает в кэш (скорее всего) и потом оттуда грузит, или это не так???
Просто, у меня такая ситуация, я кликнул на картинке, подгрузился файл, потом я меняю содержимое этого файла, кликаю на другую картинку, а потом снова на первую, но содержимое все еще старое и оно меняется только после переоткрытия страницы.
Как с этим быть?? Можно ли сделать так, что бы он подгружал содержимое, которое есть на данный момент, а не то что было впервый раз??
kotelius, добаляй к адресам картинок "?rand()", где rand() - случайное число. Тогда не будет кэширования.
ZeroDivision, шо за изврат юзать jQuery только для ajax? Если уж его юзаете, так юзайте целиком, т.е. не юзать document.getElementById("asd").innerHTML, а уж $("#asd").html()
ZeroDivision, шо за изврат юзать jQuery только для ajax? Если уж его юзаете, так юзайте целиком, т.е. не юзать document.getElementById("asd").innerHTML, а уж $("#asd").html()
Цитата: UAS
ZeroDivision, шо за изврат юзать jQuery только для ajax? Если уж его юзаете, так юзайте целиком, т.е. не юзать document.getElementById("asd").innerHTML, а уж $("#asd").html()
Для человека jQuery незнаком. Нужно было весь код сразу перелопатить чтобы он вообще запутался?
Цитата: UAS
kotelius, добаляй к адресам картинок "?rand()", где rand() - случайное число. Тогда не будет кэширования.
UAS, а почему именно к адресам картинок? Мне же нужно, что бы не картинки не кэшировались, а содержимое файла, который подгружается.
Я добавил [COLOR="Blue"]?rand()[/COLOR] к подгружаемому файлу. Вот так:
Код:
[COLOR="#0000ff"]<img[/COLOR] [COLOR="Red"]id[/COLOR]="img3" [COLOR="#ff0000"]src[/COLOR]="img3_1.png" [COLOR="#ff0000"]alt[/COLOR]="" [COLOR="#ff0000"]onclick[/COLOR]="clickAction(this, 'img3_2.png', 'file3?[COLOR="Red"]<?[/COLOR] [COLOR="#0000ff"]echo[/COLOR] rand(); [COLOR="#ff0000"]?>[/COLOR]')" />
Так оно работает, но приходится рефрешить страницу.