Это MWEB.RU

**AtskiySOTONA** Пн мар 12, 2007 16:19

Задача такая:
надо сделать так что бы картинки подгружались не при загрузке страницы, а когда человек допустим наводит мышку на определенный текст и у него подгружается div с картинкой (картинка будет одна)

причем их может быть несколько:
текст (при наведении картинка 1)
текст2 (при наведении картинка 2)
текст3 (при наведении картинка 3)

Заранее спасибо!)

**Muerto** Пн мар 12, 2007 16:48

В топике viewtopic.php?t=5385 была такая ссылка
http://www.dynamicdrive.com/style/cssli ... ge-viewer/ - тебе по ней.

**AtskiySOTONA** Пн мар 12, 2007 17:03

Muerto писал(а):В топике viewtopic.php?t=5385 была такая ссылка
http://www.dynamicdrive.com/style/cssli ... ge-viewer/ - тебе по ней.

В итоге мне что то подобное и надо, но нужно чтобы картинки подгружались не заранее (при загрузке страницы), а при наведении на маленькую картинку начинали подгружаться большие

**Muerto** Пн мар 12, 2007 17:25

Код: Выделить всё: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Untitled Document</title> <style type="text/css"> /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ .thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 0; left: 60px; /*position where enlarged image should offset horizontally */ } </style> </head> <body> <a class="thumbnail" href="#thumb" onMouseOver="document.getElementById('loadnow').src='images/picture.jpg'">картинка подгрузится только при наведении мышкой сюда<span><img src="images/dot.gif" id="loadnow" /></span></a> </body> </html>

**AtskiySOTONA** Пн мар 12, 2007 18:01

а onmouseout и чтоб она исчезла его можно сделать

**AtskiySOTONA** Пн мар 12, 2007 18:53

2Muerto: Огромное спасибо за помощь вот что у меня получилось в итоге:

<style>
.thumbnail div {
position:absolute;
visibility:hidden;
}
.thumbnail:hover div {
visibility:visible;
}
.pop {
visibility: hidden;
}
.go {
visibility: visible;
border:1px dashed black;
}
</style>
<script>
function showObject(which) {
which.className = 'go';
}
function hideObject(which) {
which.className = 'pop';
}
</script>

<a class="thumbnail" href="#thumb" onMouseOver="document.getElementById('bmw_116i_e87').src='big.jpg'; showObject(a);" onmouseout="hideObject(a)" >Bmw 316i <div id="a"><img src="images/dot.gif" id="bmw_116i_e87" align="left"></div></a>
<br>
<a class="thumbnail" href="#thumb" onMouseOver="document.getElementById('bmw_120i_e87').src='big2.jpg'; showObject(b);" onmouseout="hideObject(b)" >Bmw 320i <div id="b"><img src="images/dot.gif" id="bmw_120i_e87" align="left"></div></a>

**Muerto** Вт мар 13, 2007 0:29

Нехорошо, конечно, через глобальную область объекты указывать, но работать должно. Но вот чего понять не могу - почему нет желания прелоуда картинок.

**AtskiySOTONA** Вт мар 13, 2007 10:39

Просто в данном случае на странице может быть более 50 таких картинок (допустим модификации Audi a8), я это сделал для того чтобы посетитель лишний трафик себе не накручивал, да и грузится быстрее будет

**AtskiySOTONA** Вт мар 13, 2007 11:30

Можно ли как нибудь вот эту строку :
onMouseOver="document.getElementById('bmw_120i_e87').src='/bmw_120i_e87_small.jpg';"

перенести в функцию showobject()?

но надо учесть что id и подгружаемая картинка будут меняться...

**Muerto** Вт мар 13, 2007 14:43

Код: Выделить всё: function showObject(which) { which.className = 'go'; document.getElementById(wich).src='/'+wich+'_small.jpg'; }

Попробуй так...

**AtskiySOTONA** Вт мар 13, 2007 16:58

Теперь другая загвоздка я ставлю settimeout, на эту функцию, а он все равно начинает грузить картинку сразу же после того как навести мышку, а надо чтоб ждал 1 сек и потом начинал подгружать картинку...

Вот пример может я не туда settimeout вставил?

<a href="/catalog/audi/100/100_23_44/" class="thumbnail" onMouseOver=showObject(as100_23_44);setTimeout("document.getElementById('100_23_44').src='http://carsguru.ru/web/exterior/audi_100_23_44_small.jpg'",1000); onmouseout="hideObject(as100_23_44);">Audi 100 2.3<div onmouseover="showObject(as100_23_44);" id="as100_23_44"><img src="http://web.carsguru.ru/web/loading.gif" height="150" width="200" id="100_23_44"></div></a>

**Muerto** Вт мар 13, 2007 17:25

А ты из функции showObject код document.getElementById(wich).src='/'+wich+'_small.jpg'; убрал?

**AtskiySOTONA** Вт мар 13, 2007 17:39

Muerto писал(а):А ты из функции showObject код document.getElementById(wich).src='/'+wich+'_small.jpg'; убрал?

Да, он не срабатывал - выкидывал ишибку типа null или объект не поддреживается - что то вроде этого,

не могу понять почему settimeout не работает для
setTimeout("document.getElementById('3').src='http://www.sonyericsson.com/downloads/Z710_man_walking.jpg'",1000); - картинку сразу же загружает не ждет

**Muerto** Вт мар 13, 2007 18:52

2AtskiySOTONA: Тайна сие огромна есть.
Попробуй как-нибудь так:

Код: Выделить всё: <html> <head> </head> <body> <style> .thumbnail div { position:absolute; visibility:hidden; } .thumbnail:hover div { visibility:visible; } .pop { visibility: hidden; } .go { visibility: visible; border:1px dashed black; } </style> <script> function showObject(which) { document.getElementById(which).className = 'go'; name=which.substr(2); setTimeout("document.getElementById('"+name+"').src='http://carsguru.ru/web/exterior/audi_"+which+"_small.jpg'", 1000); } function hideObject(which) { document.getElementById(which).className = 'pop'; } </script> <a href="/catalog/audi/100/100_23_44/" class="thumbnail" onMouseOver="showObject('as100_23_44')" onmouseout="hideObject('as100_23_44');">Audi 100 2.3<div id="as100_23_44"><img src="http://web.carsguru.ru/web/loading.gif" height="150" width="200" id="100_23_44"></div></a> </body> </html>

У меня работает (с локальными картинками).

**Padonak** Вт мар 13, 2007 20:02

2Muerto: чо тут за колдовство? -06-

**Muerto** Вт мар 13, 2007 21:55

2Padonak: Да начали с малого - дива с картинкой показывающегося по онМаусОверу над ссылкой. А теперь вот помалу все это корячим. Если бы AtskiySOTONA сразу бы написал, что ему надо в конечном итоге - было бы проще.

**AtskiySOTONA** Ср мар 14, 2007 10:55

Просто у начальства идеи появляются по ходу того как что то делается -06-

2Muerto: Спасиб, у меня вроде тоже все сработало, кроме settimeout - все равно сразу при наведении грузит -20-

**Muerto** Ср мар 14, 2007 11:50

2AtskiySOTONA: Вот, блин, засада. У меня всё нормально срабатывает. Может побольше выставить интервал? 5000 например.

**Padonak** Ср мар 14, 2007 11:53

блин а чо вы вот тут setTimeout не указали-то :

onMouseOver="showObject('as100_23_44')"

**AtskiySOTONA** Ср мар 14, 2007 12:18

Padonak писал(а):onMouseOver="showObject('as100_23_44')"

Пробовал и так все равно загружает при наведении
ставил задержку 10000 - тоже не помогает - странно как то.

**Padonak** Ср мар 14, 2007 12:26

да не может этого быть. покажи код. только свой а не то что Муерто тебе написал

**AtskiySOTONA** Ср мар 14, 2007 12:35

Вот

Код: Выделить всё: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <html> <head> </head> <body> <style> .thumbnail div { position:absolute; visibility:hidden; } .thumbnail:hover div { visibility:visible; } .pop { visibility: hidden; } .go { visibility: visible; border:1px dashed black; } </style> <script> function showObject(which) { document.getElementById(which).className = 'go'; name=which.substr(2); setTimeout("document.getElementById('"+name+"').src='http://www.sonyericsson.com/downloads/Z710_man_walking.jpg'", 1000); } function hideObject(which) { document.getElementById(which).className = 'pop'; } </script> <a href="/catalog/audi/100/100_23_44/" class="thumbnail" onMouseOver=setTimeout("showObject('as100_23_44')",5000); onmouseout="hideObject('as100_23_44');">Audi 100 2.3<div id="as100_23_44"><img src="http://web.carsguru.ru/web/loading.gif" id="100_23_44"></div></a> </body> </html>

картинку загружал большую чтобы проверить догружается она или нет

Попробуй навести быстро мышку и убрать ее, через 5 сек картинка все равно догрузиться

**Muerto** Ср мар 14, 2007 13:55

Код: Выделить всё: <script> var expiryTimer; function showObject(which) { document.getElementById(which).className = 'go'; name=which.substr(2); expiryTimer=setTimeout("document.getElementById('"+name+"').src='http://www.sonyericsson.com/downloads/Z710_man_walking.jpg'", 1000); } function hideObject(which) { clearTimeout(expiryTimer); document.getElementById(which).className = 'pop'; } </script>

А если так?

**AtskiySOTONA** Ср мар 14, 2007 15:37

Все равно сразу грузит - очень странный глюк...

**Muerto** Ср мар 14, 2007 16:21

А setInterval?

Код: Выделить всё: <script> var expiryTimer; function showObject(which) { document.getElementById(which).className = 'go'; name=which.substr(2); expiryTimer=setInterval("document.getElementById('"+name+"').src='http://www.sonyericsson.com/downloads/Z710_man_walking.jpg'", 1000); } function hideObject(which) { clearInterval(expiryTimer); document.getElementById(which).className = 'pop'; } </script>

**AtskiySOTONA** Ср мар 14, 2007 16:35

Попробовал, тоже сразу грузит

**Muerto** Ср мар 14, 2007 16:53

2AtskiySOTONA: Выложи страницу с твоим кодом где-нибудь в сети и кинь ссылку. Только чистым ХТМЛом, без РНР...

**AtskiySOTONA** Ср мар 14, 2007 17:12

вот:
http://www.onauto.ru/show.html

**Muerto** Ср мар 14, 2007 17:54

Хорошо, ночью посмотрю.

**Muerto** Ср мар 14, 2007 22:51

Код: Выделить всё: function hideObject(which) { clearInterval(expiryTimer); document.getElementById(which).className = 'pop'; name=which.substr(2); document.getElementById(name).src='http://web.carsguru.ru/web/loading.gif'; }

**AtskiySOTONA** Чт мар 15, 2007 11:47

Все равно не работает..

**Muerto** Чт мар 15, 2007 13:27

2AtskiySOTONA: Каким броузером смотришь?

**Muerto** Чт мар 15, 2007 13:33

Посмотри http://muerto.ru/as.htm - грузит?

**AtskiySOTONA** Чт мар 15, 2007 17:29

Muerto писал(а):Посмотри http://muerto.ru/as.htm - грузит?

Да, тоже сразу загружает..

**Muerto** Чт мар 15, 2007 17:58

У меня - нет. Каким броузером смотришь?

**AtskiySOTONA** Чт мар 15, 2007 18:10

Maxthon - он анологичен IE
Opera - тоже догружает
Mozilla не догружает) но ведет себя очень странно когда мышь наводишь и уводишь, в статусной строке постоянно подсоединяется и отсоединяется от sonyericcson

**Muerto** Чт мар 15, 2007 18:54

Я смотрел шестым и седьмым ИЕ - загрузка обрывается на любом этапе по уходу мышки.

Это MWEB.RU

Java Script подгружаемые картинки

Java Script подгружаемые картинки

Кто сейчас на конференции