| |
|
|
| | Здравствуйте.
На странице есть несколько маленьких фото и одно большое (увеличенная копия)
Как сделать чтобы при клике на маленьком фото, его увеличенная копия подставлялась на место большого?
Если учесть, что имена файлов маленьких и больших фоток одинаковые, а
пути следующие:
мал. - "foto/small/......"
бол. - "foto/......" | |
| |
|
|
| |
|
|
| |
для: AlexK_
(19.07.2007 в 10:12)
| | |
<img src="foto/pic1.gif" onclick="this.src = 'foto/small/pic1.gif';">
|
| |
| |
|
|
| |
|
|
| |
для: CNT
(19.07.2007 в 10:25)
| | | Хочется сделать через ф-цию
как здесь
function func(small)
{
//По параметру small определяете адрес большого фото
var big_src=...
document.getElementById('big').innerHTML="";
document.getElementById('big').innerHTML="<img src='"+big_src+"'>";
|
вывод картинки
<img style=cursor:pointer onclick=func(this.src) src="<?echo $img1_small;?>" />
Подскажите, как реализовать? | |
| |
|
|
| |
|
|
| |
для: AlexK_
(19.07.2007 в 14:51)
| | | А зачем менять html, когда можно поменять url? Я бы делал что-то такое:
var d = document;
var big_img = d.getElementById('big');
function ch_image(img)
{
var small_src = img.src;
//здесь парсишь урл большого изображения из урла маленького. Я бы делал регэкспом.
big_img.src = big_url;
}
<img src='../image/small.jpg' onclick='ch_image(this);' alt='Маленькая картинка'/>
|
Я это не тестил, написал на ходу, прям в форуме. | |
| |
|
|
| |
|
|
| |
для: SHAman
(19.07.2007 в 14:59)
| | | >А зачем менять html, когда можно поменять url?
Честно говоря не ясен ваш вариант.
----
Подскажите если я передаю в ф-цию параметр
вида:
'foto/small/foto_1.jpg'
Как его преобразовать в вид:
'foto/foto_1.jpg'
средствами JS? | |
| |
|
|
| |
|
|
| |
для: AlexK_
(19.07.2007 в 17:48)
| | | либо функции обработки строк, либо регэксп. Я бы выбрал второе. А в функцию передавать параметр такого вида - накладно. Траффик увеличится. Согласитесь, писать для каждой картинки 'foto/small/foto_1.jpg' или короткое 'this' - что лучше? А JS будет чуть более громоздким, зато будет экономия какая-никакая.
А что с моим примером не ясно? Есть элемент DOM <img>. У него есть атрибут src. Этому элементу соответствует объект в JavaScript-модели документа. И у этого объекта есть свойство src. Если это свойство поменять, то поменяется атрибут у объекта DOM, что приведет к его повторной интерпретации браузером. А браузер интерпретирует атрибут src только одним образом: загружает то, что указано в нем.
Вывод: делаем пустой элемент <img src='' id='big_image' alt=''/>
А потом JS присваиваем ему src:
document.getElementById('big_image').src = 'адрес нужной нам картинки';
Попробуйте провести этот небольшой эксперимент - поймете:) | |
| |
|
|
| |
|
|
| |
для: SHAman
(19.07.2007 в 18:31)
| | |
<a href="javascript:void(window.open('foto/foto_1.jpg','','width=размер_картинки(окна),height=размер_картинки(окна)'))">Картинка</a>
|
Не тестировал! | |
| |
|
|
| |
|
|
| |
для: alex55
(20.07.2007 в 15:35)
| | | В задании было ИЗМЕНИТЬ изображение на ТОЙ ЖЕ странице, а не открывать новое окно. Открыть окно можно и без JS, просто сослаться на картинку большую и все. | |
| |
|
|
| |
|
|
| |
для: SHAman
(19.07.2007 в 18:31)
| | | >либо функции обработки строк, либо регэксп. Я бы выбрал второе. А в функцию передавать параметр такого вида - накладно. Траффик увеличится. Согласитесь, писать для каждой картинки 'foto/small/foto_1.jpg' или короткое 'this' - что лучше? А JS будет чуть более громоздким, зато будет экономия какая-никакая.
Да именно this.src я и хочу передавать в ф-цию
т.е. код получается такой
<img src="foto/small/46a1d1cd3821b.jpg" onClick="ch_img(this.src)"; style=cursor:pointer>
ф-ция такая
function ch_img(img)
{
big_img = ???????
document.getElementById('big').src = big_img;
}
Подскажите плиз как получить big_img в ф-ции??
если учесть что пути для хранения маленьких фото
FOTO/SMALL/*.JPG
для больших
FOTO/*.JPG | |
| |
|
|
| |
|
|
| |
для: AlexK_
(21.07.2007 в 13:56)
| | | Вот что у меня получилось.
<html>
<head>
<title>Тест фотоглереи</title>
<script rel="javascript" type="text/javascript" language="javascript">
var d = document;
function to_big_pic(small_img)
{
var small_src = small_img.src;
var reg = /small\//;
var big_src = small_src.replace(reg,"");
big_img.src = big_src;
}
</script>
</head>
<body>
<img src="" id="big_img" alt=""/>
<script rel="javascript" type="text/javascript" language="javascript">
var big_img = d.getElementById('big_img');
</script>
<hr/>
<img src="./foto/small/picture.jpg" alt="" onclick="to_big_pic(this);"/>
</body>
</html>
|
| |
| |
|
|
