Поменять картинку в 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) Если юзаешь минификаторы, возникнут проблемы с областями видимости |
| Часовой пояс GMT +3, время: 10:50. |