ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / (HTML+CSS) Подгружать картинку когда это нужно.
14 сообщений из 14, страница 1 из 1
(HTML+CSS) Подгружать картинку когда это нужно.
    #35878710
Фотография Alex721
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex721
Участник
Привет! Делаю следующую вещь - при наведении на ссылку показывается изображение для этой ссылки.
Вот такой код:
 
=Код
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title>Hint</title>
  <style>
  a.tt {  }
a.tt span{ 
		color: # 578867 ;
		border-bottom: 1px solid #0080c0; 
		display:none;/*собственно прячем тултип - пока мышь не наведена*/

}
a.tt:hover{ position:relative;/*Ставим точку отсчета для тултипа внутрь данной ссылки*/
		z-index: 23 ;/*это нужно что бы тултип показывался поверх этой и других ссылок*/
		 size: 10px;}
a.tt:hover span{ 
    text-decoration: none;
		display:block;/*показываем тултип при наведении*/
		position:absolute; 
		top:-10px; 
		left:40px;/*три строки для позиции тултипа относительно левого верхнего угла ссылки*/
		z-index: 22 ;/*мне 22 + см. выше*/
		background:#fafafa; 
		border: solid 1px #bbb;/*фон, что бы было видно тултип*/
}
  </style>
  </head>
  <body>
    <a href="#" class="tt">ссылка<span><img src="http://sql.ru/forum/images/exclamation.gif" /> Картинко, плюс описание</span></a><br />
  </body>
</html>

Но в связи с тем, что изображений несколько + каждое это несколько Кб, то хочу чтобы загрузка этих спрятанных картинок производилась только при наведении на ссылку.
Сейчас это работает так, что грузятся все скрытые картинки сразу --> а это время + лишний трафик.
Спасибо за ответы.
...
Рейтинг: 0 / 0
19.03.2009, 11:44
| Ответить | Цитировать | Написать  
(HTML+CSS) Подгружать картинку когда это нужно.
    #35878795
Фотография Ex_Soft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ex_Soft
Участник
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
....
function ImgLoad(img, url)
{
	if(img.src!=url)
		img.src=url;
}
....
<span onmouseover="document.getElementById('img1'),'http://sql.ru/forum/images/exclamation.gif'"><img id="img1" />Картинко, плюс описание</span>
???

P.S. Под NNTP [ spoiler ] не фунциклирует. Не заворачивайте значащее в него, pls...
_________________
"Helo, word!" - 17 errors 56 warnings
Posted via ActualForum NNTP Server 1.4
...
Рейтинг: 0 / 0
19.03.2009, 12:03
| Ответить | Цитировать | Написать  
(HTML+CSS) Подгружать картинку когда это нужно.
    #35878922
Фотография Alex721
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex721
Участник
Ex_Soft, спасибо за ответ, но не могу оживить эти варианты...
Особенно интересен второй :)
...
Рейтинг: 0 / 0
19.03.2009, 12:40
| Ответить | Цитировать | Написать  
(HTML+CSS) Подгружать картинку когда это нужно.
    #35879066
Фотография Ex_Soft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ex_Soft
Участник
БлЫн... А про мальчика-то мы и забыли
Ессесно, там - вызов функции
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
....
function ImgLoad(img, url)
{
	if(img.src!=url)
		img.src=url;
}
....
<span onmouseover="ImgLoad(document.getElementById('img1'),'http://sql.ru/forum/images/exclamation.gif')"><img id="img1" /> Картинко, плюс описание</span></a><br />
А насчет оживления... Тут нуна уже смотреть кто кому Рабинович. В свое время тоже продолбался
_________________
"Helo, word!" - 17 errors 56 warnings
Posted via ActualForum NNTP Server 1.4
...
Рейтинг: 0 / 0
19.03.2009, 13:18
| Ответить | Цитировать | Написать  
(HTML+CSS) Подгружать картинку когда это нужно.
    #35879070
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Как вариант...

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
<a href="#" class="tt" onmouseover='document.getElementById("img1").src="http://sql.ru/forum/images/exclamation.gif"'>
	ссылка
	<span>
		<img id='img1' src='' /> 
		Картинко, плюс описание
	</span>
</a>
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
19.03.2009, 13:19
| Ответить | Цитировать | Написать  
(HTML+CSS) Подгружать картинку когда это нужно.
    #35879080
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Чудно однако... Одни ноют де если подгружается в процессе - долго ждать, задержки... Другим не нравится большей объем сразу загруженых картинок...

Ну вот куда хрестьянину податься? (с) к/ф Чапаев
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
19.03.2009, 13:22
| Ответить | Цитировать | Написать  
(HTML+CSS) Подгружать картинку когда это нужно.
    #35879087
Фотография Ex_Soft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ex_Soft
Участник
krvsa
Код: plaintext
1.
<a href="#" class="tt" onmouseover=>

Да - span же не виден... Соответственно на нем onmouseover не отработает...
_________________
"Helo, word!" - 17 errors 56 warnings
Posted via ActualForum NNTP Server 1.4
...
Рейтинг: 0 / 0
19.03.2009, 13:25
| Ответить | Цитировать | Написать  
(HTML+CSS) Подгружать картинку когда это нужно.
    #35879103
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Ex_SoftДа - span же не виден... Соответственно на нем onmouseover не отработает...
Спан - да... А ссылка-то видна! Я работающий пример выложил, сам тестил.

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title>Hint</title>
  <style>
  a.tt {  }
a.tt span{ 
		color: # 578867 ;
		border-bottom: 1px solid #0080c0; 
		display:none;/*собственно прячем тултип - пока мышь не наведена*/

}
a.tt:hover{ position:relative;/*Ставим точку отсчета для тултипа внутрь данной ссылки*/
		z-index: 23 ;/*это нужно что бы тултип показывался поверх этой и других ссылок*/
		 size: 10px;}
a.tt:hover span{ 
    text-decoration: none;
		display:block;/*показываем тултип при наведении*/
		position:absolute; 
		top:-10px; 
		left:40px;/*три строки для позиции тултипа относительно левого верхнего угла ссылки*/
		z-index: 22 ;/*мне 22 + см. выше*/
		background:#fafafa; 
		border: solid 1px #bbb;/*фон, что бы было видно тултип*/
}
  </style>
  </head>
  <body>
<a href="#" class="tt" onmouseover='document.getElementById("img1").src="http://sql.ru/forum/images/exclamation.gif"'>
	ссылка
	<span>
		<img id='img1' src='' /> 
		Картинко, плюс описание
	</span>
</a>
<br />
</body>
</html>
...
Рейтинг: 0 / 0
19.03.2009, 13:29
| Ответить | Цитировать | Написать  
(HTML+CSS) Подгружать картинку когда это нужно.
    #35879111
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Правда тестил только на Опере и ИЕ...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
19.03.2009, 13:30
| Ответить | Цитировать | Написать  
(HTML+CSS) Подгружать картинку когда это нужно.
    #35879448
Фотография Ex_Soft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ex_Soft
Участник
krvsa
Я работающий пример выложил

Дык, кто ж спорит-то?..
Это я - навскидку написал...
_________________
"Helo, word!" - 17 errors 56 warnings
Posted via ActualForum NNTP Server 1.4
...
Рейтинг: 0 / 0
19.03.2009, 15:04
| Ответить | Цитировать | Написать  
(HTML+CSS) Подгружать картинку когда это нужно.
    #35879768
Фотография Alex721
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex721
Участник
Спасибо за помощь, в IE отлично летает, а опера почему то стили коцает...
Подскажите, как кроссбраузерности добиться?
...
Рейтинг: 0 / 0
19.03.2009, 16:30
| Ответить | Цитировать | Написать  
(HTML+CSS) Подгружать картинку когда это нужно.
    #35879812
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Alex721а опера почему то стили коцает...
Так что коцает-то?
...
Рейтинг: 0 / 0
19.03.2009, 16:45
| Ответить | Цитировать | Написать  
(HTML+CSS) Подгружать картинку когда это нужно.
    #35880305
Фотография Alex721
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex721
Участник
krvsaAlex721а опера почему то стили коцает...
Так что коцает-то?вот сейчас проверил в опере 9.5 - все отлично, а в опере 9.25:
1. position берется не от ссылки, а гораздо выше
2. остаются следы уже показанных картинок, область будто не обновляется/не очищается.
судя по гуглу опера неадекватна к span 'у...
...
Рейтинг: 0 / 0
19.03.2009, 19:38
| Ответить | Цитировать | Написать  
(HTML+CSS) Подгружать картинку когда это нужно.
    #35880787
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Alex721а в опере 9.25:
[me] Немного удивился и проверил свою версию Оперы - 9.6.

Ты еще в ИЕ 5 посмотри... Зачем вяжешься на такое старьё?
...
Рейтинг: 0 / 0
20.03.2009, 08:42
| Ответить | Цитировать | Написать  
14 сообщений из 14, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / (HTML+CSS) Подгружать картинку когда это нужно.
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=35879066&tid=1455050]:
 0ms
get settings:
 7ms
get forum list:
 10ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 157ms
get topic data:
 6ms
get forum data:
 2ms
get page messages:
 31ms
get tp. blocked users:
 1ms
others: 228ms
total:  446ms
созд. / загр.: 446ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]