Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.05.2012, 16:35
Аватар для java's
Новичок на форуме
Отправить личное сообщение для java's Посмотреть профиль Найти все сообщения от java's
 
Регистрация: 12.05.2012
Сообщений: 1

Поменять картинку в 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>

не работает.
Если кто-нибудь знает в чём дело подскажите пожалуйста!!!
Ответить с цитированием
  #2 (permalink)  
Старый 12.05.2012, 16:52
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Вы неправильно обращаетесь к элементу с id = "elem".
Ответить с цитированием
  #3 (permalink)  
Старый 12.05.2012, 17:27
Аватар для 9xakep
сегодня в 12:34|Комментир
Отправить личное сообщение для 9xakep Посмотреть профиль Найти все сообщения от 9xakep
 
Регистрация: 12.04.2011
Сообщений: 1,180

Отлавливайте событие, как здесь. После клика определяйте id того куда кликнули, это гораздо упростит ва жизнь
__________________
оляля, ололо
Ответить с цитированием
  #4 (permalink)  
Старый 12.05.2012, 17:45
Аватар для 9xakep
сегодня в 12:34|Комментир
Отправить личное сообщение для 9xakep Посмотреть профиль Найти все сообщения от 9xakep
 
Регистрация: 12.04.2011
Сообщений: 1,180

<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>
__________________
оляля, ололо
Ответить с цитированием
  #5 (permalink)  
Старый 12.05.2012, 17:47
Аватар для 9xakep
сегодня в 12:34|Комментир
Отправить личное сообщение для 9xakep Посмотреть профиль Найти все сообщения от 9xakep
 
Регистрация: 12.04.2011
Сообщений: 1,180

Хотя этот вариант работает походу только в опере, тогда можно через 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>
__________________
оляля, ололо
Ответить с цитированием
  #6 (permalink)  
Старый 12.05.2012, 18:58
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

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>
Ответить с цитированием
  #7 (permalink)  
Старый 12.05.2012, 21:55
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

В моём примере div, кстати, надо заменить на span, так как иначе щелчок по пустому (без картинок) пространству занимаемому div приведёт к вызову обработчика щелчка.
Ответить с цитированием
  #8 (permalink)  
Старый 12.05.2012, 22:25
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

9xakep,
Да, в лисе тоже не работает. И кто тебя только научил в JS обработчики текстом вешать?
Ответить с цитированием
  #9 (permalink)  
Старый 12.05.2012, 22:49
Аватар для 9xakep
сегодня в 12:34|Комментир
Отправить личное сообщение для 9xakep Посмотреть профиль Найти все сообщения от 9xakep
 
Регистрация: 12.04.2011
Сообщений: 1,180

Раед,
странно как-то...вроде в пример с this ничего такого нету, а работают оба скрипта только в опере...
Сообщение от Раед
И кто тебя только научил в JS обработчики текстом вешать?
Если назовешь минусы, то писать разумеется не буду
__________________
оляля, ололо
Ответить с цитированием
  #10 (permalink)  
Старый 12.05.2012, 23:02
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

Сообщение от 9xakep
Если назовешь минусы
1(и главное)) Как ты сам только что убедился, не кроссбраузерно
2) Нормальные браузеры могут не принять объект-событие
3) Если юзаешь минификаторы, возникнут проблемы с областями видимости
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Фоновую картинку поменять. Jurasmi Элементы интерфейса 11 08.10.2012 15:25
Переместить картинку из одного div элемента в другой KamalovRadik jQuery 1 11.02.2012 20:14
Не получается поменять высоту div revvo jQuery 4 06.08.2011 13:12
Как поменять картинку при нажатии на нее syegorius Events/DOM/Window 1 28.08.2010 23:14
как поменять цвет элементов div с помощью ajax? uspehovna AJAX и COMET 12 20.08.2010 17:21