Поменять картинку в div
Ситуация такая: у меня есть див, а под ним три картинки. при нажатии на любую картинку она должна появляться в диве.
пробовал делать так:
<html>
<head>
<style type="text/css">
#elem {
width:100px;
height:100px;
background-image:url(n1.png);
}
</style>
<script type="text/javascript">
function bag(m) {
var el="elem";
el.style.background-image='url('+m+')';
}
</script>
<body>
<div id="elem"></div>
<br>
<img src="2.png" onClick="bag(2.png);">
<img src="3.png" onClick="bag(3.png);">
<img src="4.png" onClick="bag(4.png);">
</body>
</html>
не работает. Если кто-нибудь знает в чём дело подскажите пожалуйста!!! |
Вы неправильно обращаетесь к элементу с id = "elem".
|
Отлавливайте событие, как здесь. После клика определяйте id того куда кликнули, это гораздо упростит ва жизнь
|
<div id='main'></div>
<div id='pic'>
<img src='http://javascript.ru/forum/image.php?u=12890&dateline=1303149256'>
<img src='http://javascript.ru/forum/image.php?u=19820&dateline=1334914235'>
</div>
<script>
var pic = document.getElementById('pic').getElementsByTagName('img')
for(i=0;i<pic.length;i++) {
pic[i].onclick='change()'
}
function change(event) {
event = event || window.event
var elem = event.target || event.srcElement
document.getElementById('main').innerHTML = '<img src='+elem.src+'>'
}
</script>
|
Хотя этот вариант работает походу только в опере, тогда можно через this:
<div id='main'></div>
<div id='pic'>
<img src='http://javascript.ru/forum/image.php?u=12890&dateline=1303149256'>
<img src='http://javascript.ru/forum/image.php?u=19820&dateline=1334914235'>
</div>
<script>
var pic = document.getElementById('pic').getElementsByTagName('img')
for(i=0;i<pic.length;i++) {
pic[i].onclick='change(this)'
}
function change(elem) {
document.getElementById('main').innerHTML = '<img src='+elem.src+'>'
}
</script>
|
9xakep, у меня в хроме ваши примеры не работают.
Пример для хромоподобных. <div onclick = " main.innerHTML = '<img src='+event.target.src+'>' "> <img src='http://javascript.ru/forum/image.php?u=12890&dateline=1303149256'> <img src='http://javascript.ru/forum/image.php?u=19820&dateline=1334914235'> </div> <div id="main"> </div> |
В моём примере div, кстати, надо заменить на span, так как иначе щелчок по пустому (без картинок) пространству занимаемому div приведёт к вызову обработчика щелчка.
|
9xakep,
Да, в лисе тоже не работает. И кто тебя только научил в JS обработчики текстом вешать? |
Раед,
странно как-то...вроде в пример с this ничего такого нету, а работают оба скрипта только в опере... Цитата:
|
Цитата:
2) Нормальные браузеры могут не принять объект-событие 3) Если юзаешь минификаторы, возникнут проблемы с областями видимости |
Цитата:
|
а так?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>ttt</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<script type="text/javascript">
onload=function(){
var allPic, k;
allPic=document.getElementById("cont").getElementsByTagName("img");
k=allPic.length;
while(k--){allPic[k].onclick=myClick;};
};
function myClick(){
document.getElementById("elem").innerHTML='<img src="'+this.src+'" alt="">';
};
</script>
</head>
<body>
<div id="elem"></div>
<br>
<div id="cont">
<img src="1.gif" alt="">
<img src="pict1.jpg" alt="">
<img src="pict2.jpg" alt="">
</div>
</body>
</html>
|
Раед,
ок, что тогда, писать без скобок, и без кавычек, или addEventListener? person, вы неправильно работаете с this, в вашей ф-ии, this - это не картинка |
Цитата:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
</head><body>
<div id='main'></div>
<div id='pic'>
<img src='http://javascript.ru/forum/image.php?u=12890&dateline=1303149256'>
<img src='http://javascript.ru/forum/image.php?u=19820&dateline=1334914235'>
</div>
<script>
var pic = document.getElementById('pic').getElementsByTagName('img');
for(i=0;i<pic.length;i++) {
*!*
pic[i].onclick=function() {
change(this.src);
}
*/!*
}
function change(s) {
document.getElementById('main').innerHTML = '<img src='+s+'>';
}
</script>
</body></html>
|
Цитата:
Что подразумевалось под "неправильно"? Кстати у Раед тот же код. И написаны оба кода не зависимо. |
person,
у вас коды, не одинаковы это раз. И да, я тупанул, немного другое увидел |
Цитата:
Мне просто лень построчный расклад делать. |
| Часовой пояс GMT +3, время: 16:51. |