как по клику задать атрибут
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ Без Имени</title>
<script type="text/javascript">
</script>
<style type="text/css">
#gallery { width:570px;height:375px; background:#CCCCCC; border-radius:15px;}
#lpic{ width:370px;height:365px; background:#666666; border-radius:12px; margin:5px;float:left; position:relative;}
#spic{width:185px; height:365px; background:#666666; border-radius:12px;top:5px; margin-left:380px;position:relative; }
div#spic img {width:85px; height:85px; position:relative;left:5px; margin-top:5px; border-radius:8px;}
div#lpic img { width:360px; height:355px; position:relative;left:5px; margin-top:5px; border-radius:8px; background:#FFFFFF}
</style>
<script src="file:///D|/Documents and Settings/Admin/Мои документы/Мои скрипты/jquery-1.7.2.min.js">
</script>
<script type="text/javascript">
window.onload=function(){
var sPicImg=document.querySelectorAll('div#spic img');
}
</script>
</head>
<body>
<div id='gallery'>
<div id='lpic'>
<img id='largepic'/>
</div>
<div id='spic'>
<img src="http://im4-tub-ua.yandex.net/i?id=225745906-46-72"/>
<img src="http://im4-tub-ua.yandex.net/i?id=225745906-46-72&n=17"/>
<img src="http://im8-tub-ua.yandex.net/i?id=5648272-06-72"/>
<img src="http://im6-tub-ua.yandex.net/i?id=367196349-12-72"/>
<img src="http://im5-tub-ua.yandex.net/i?id=107622380-10-72"/>
<img src="http://im5-tub-ua.yandex.net/i?id=321975975-33-72"/>
<img src="http://im6-tub-ua.yandex.net/i?id=367196349-12-72"/>
<img src="http://im8-tub-ua.yandex.net/i?id=465839557-47-72"/>
</div>
</div>
</body>
</html>
так ради практики решил сделать галерею. смысл по нажатию на маленькую картинку , она появляется в большом формате слева. тоесть клик по маленькой картинке присваюет атриабут src и его значения кликнутой картинке , другому тегу <a> c id largepic можно было бы присвоить каждой картинке свой id ,но подумал что это не удобно (а в друг когдато сделаю так что маленькие картинки будут подгружатся). трудность в том что маленькие картинки я собрал в масив sPicImg , а вот как дальше клик привязать к sPicImg[] незнаю..... |
http://javascript.ru/forum/events/28...tml#post178503
Вешайте обработчик на родительский контейнер. |
блииинн а я уже кучу тем перерыл , помню где-то было ) а оказуется в моейже) ща попробую)
|
frant32,
можно подключить jquery и писать так
$('селектор').click(function(){
$('селектор').attr()//собственно .attr() и забирает атрибут или меняет смотря что надо
});
|
Цитата:
|
и всё таки не могу понять как передать значеине артибута src элемента на котрый кликнули другому тегу.
|
ну да на jq пробовал но тоже где-то чёт не знаю
$(document).ready(function(){ $('div#spic img').click(function(){('#largepic').attr( 'src' , а вот сюда нужно поставить атрибут src элемента на который кликнули $('div#spic img').attr('src'));}); });
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ Без Имени</title>
<script type="text/javascript">
</script>
<style type="text/css">
#gallery { width:570px;height:375px; background:#CCCCCC; border-radius:15px;}
#lpic{ width:370px;height:365px; background:#666666; border-radius:12px; margin:5px;float:left; position:relative;}
#spic{width:185px; height:365px; background:#666666; border-radius:12px;top:5px; margin-left:380px;position:relative; }
div#spic img {width:85px; height:85px; position:relative;left:5px; margin-top:5px; border-radius:8px;cursor:crosshair}
div#lpic img { width:360px; height:355px; position:relative;left:5px; margin-top:5px; border-radius:8px; background:#FFFFFF}
</style>
<script src="file:///D|/Documents and Settings/Admin/Мои документы/Мои скрипты/jquery-1.7.2.min.js">
</script>
<script type="text/javascript">
window.onload=function(){
var main = document.getElementById('largepic');//большая картинка
var smallContainer = document.getElementById('spic');//див, в котором маленькие картинки
smallContainer.onclick = function(e) {//вешаем событие на ВЕСЬ контейнер
var trg = window.event ? window.event.srcElement : e.target;//получаем картинку, по которой кликнули
*!*main.src = trg.src;*/!*//меняем src большой картинки
}
}
</script>
</head>
<body>
<div id='gallery'>
<div id='lpic'>
<img id='largepic'/>
</div>
<div id='spic'>
<img src="http://im4-tub-ua.yandex.net/i?id=225745906-46-72"/>
<img src="http://im4-tub-ua.yandex.net/i?id=225745906-46-72&n=17"/>
<img src="http://im8-tub-ua.yandex.net/i?id=5648272-06-72"/>
<img src="http://im6-tub-ua.yandex.net/i?id=367196349-12-72"/>
<img src="http://im5-tub-ua.yandex.net/i?id=107622380-10-72"/>
<img src="http://im5-tub-ua.yandex.net/i?id=321975975-33-72"/>
<img src="http://im6-tub-ua.yandex.net/i?id=367196349-12-72"/>
<img src="http://im8-tub-ua.yandex.net/i?id=465839557-47-72"/>
</div>
</div>
</body>
</html>
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ Без Имени</title>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
#gallery { width:570px;height:375px; background:#CCCCCC; border-radius:15px;}
#lpic{ width:370px;height:365px; background:#666666; border-radius:12px; margin:5px;float:left; position:relative;}
#spic{width:185px; height:365px; background:#666666; border-radius:12px;top:5px; margin-left:380px;position:relative; }
div#spic img {width:85px; height:85px; position:relative;left:5px; margin-top:5px; border-radius:8px;}
div#lpic img { width:360px; height:355px; position:relative;left:5px; margin-top:5px; border-radius:8px; background:#FFFFFF}
</style>
</head>
<body>
<div id='gallery'>
<div id='lpic'>
<img id='largepic'/>
</div>
<div id='spic'>
<img src="http://im4-tub-ua.yandex.net/i?id=225745906-46-72"/>
<img src="http://im4-tub-ua.yandex.net/i?id=225745906-46-72&n=17"/>
<img src="http://im8-tub-ua.yandex.net/i?id=5648272-06-72"/>
<img src="http://im6-tub-ua.yandex.net/i?id=367196349-12-72"/>
<img src="http://im5-tub-ua.yandex.net/i?id=107622380-10-72"/>
<img src="http://im5-tub-ua.yandex.net/i?id=321975975-33-72"/>
<img src="http://im6-tub-ua.yandex.net/i?id=367196349-12-72"/>
<img src="http://im8-tub-ua.yandex.net/i?id=465839557-47-72"/>
</div>
</div>
</script>
<script type="text/javascript">
$("#spic img").click(function() {
$("#largepic").attr("src",$(this).attr("src"));
});
</script>
</body>
</html>
|
Цитата:
тоесть this = "#spic img" нет ) проверил ) почему-то если вместо this прописать "#spic img" срабатывет только для первого елемента |
Опоздал, но пусть будет).
<style>
#myImg {width: 0px; height: 0px}
#myDiv img {width: 10%; height: 10%}
</style>
<div id="myDiv">
<img src="http://javascript.ru/forum/image.php?u=17648&dateline=1338577823">
<img src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
</div>
<img id="myImg" src="">
<script>
window.onload = function () {
var myDiv = document.getElementById('myDiv');
var myImg = document.getElementById('myImg');
myDiv.onclick = function (e) {
e = e || window.event;
var target = e.target || e.srcElement;
if (target.parentNode == myDiv) {
myImg.style['width'] = '200px';
myImg.style['height'] = '200px';
myImg.src = target.src;
}
}
}
</script>
|
спасибо всем , разобрался со способом как на js так и на jq))
|
<img id="layout1" src="" alt="" />
<img class="imgsrc" src="/images/1.jpg" alt="" />
<img class="imgsrc" src="/images/2.jpg" alt="" />
<img class="imgsrc" src="/images/3.jpg" alt="" />
<img class="imgsrc" src="/images/4.jpg" alt="" />
[JS]
<script>
$('.imgsrc').click(function(){ //вешаем обработчик события клик на каждую картинку с классом .imgsrc
x=$(this).attr('src'); //получаем ресурс текущей картинки (на которую нажмем)
$('#layout1').attr('src',x); //меняем ресурс у элемента с id="layout1"
});
</script>
[/JS]
|
| Часовой пояс GMT +3, время: 05:13. |