Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / (HTML+CSS) Подгружать картинку когда это нужно. / 14 сообщений из 14, страница 1 из 1
19.03.2009, 11:44
    #35878710
Alex721
Alex721
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
(HTML+CSS) Подгружать картинку когда это нужно.
Привет! Делаю следующую вещь - при наведении на ссылку показывается изображение для этой ссылки.
Вот такой код:
 
=Код
Код: 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, 12:03
    #35878795
Ex_Soft
Ex_Soft
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
(HTML+CSS) Подгружать картинку когда это нужно.
Код: 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:40
    #35878922
Alex721
Alex721
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
(HTML+CSS) Подгружать картинку когда это нужно.
Ex_Soft, спасибо за ответ, но не могу оживить эти варианты...
Особенно интересен второй :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.03.2009, 13:18
    #35879066
Ex_Soft
Ex_Soft
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
(HTML+CSS) Подгружать картинку когда это нужно.
БлЫн... А про мальчика-то мы и забыли
Ессесно, там - вызов функции
Код: 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:19
    #35879070
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
(HTML+CSS) Подгружать картинку когда это нужно.
Как вариант...

Код: 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:22
    #35879080
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
(HTML+CSS) Подгружать картинку когда это нужно.
Чудно однако... Одни ноют де если подгружается в процессе - долго ждать, задержки... Другим не нравится большей объем сразу загруженых картинок...

Ну вот куда хрестьянину податься? (с) к/ф Чапаев
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.03.2009, 13:25
    #35879087
Ex_Soft
Ex_Soft
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
(HTML+CSS) Подгружать картинку когда это нужно.
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:29
    #35879103
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
(HTML+CSS) Подгружать картинку когда это нужно.
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:30
    #35879111
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
(HTML+CSS) Подгружать картинку когда это нужно.
Правда тестил только на Опере и ИЕ...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.03.2009, 15:04
    #35879448
Ex_Soft
Ex_Soft
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
(HTML+CSS) Подгружать картинку когда это нужно.
krvsa
Я работающий пример выложил

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

Ты еще в ИЕ 5 посмотри... Зачем вяжешься на такое старьё?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / (HTML+CSS) Подгружать картинку когда это нужно. / 14 сообщений из 14, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 485ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1455050]:
 0ms
get settings:
 9ms
get forum list:
 19ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 164ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 55ms
get tp. blocked users:
 1ms
others: 218ms
total:  485ms
x
x
Закрыть


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