Вывод дополнительной картинки, помогите плиз @ DeForum.ru

Здравствуйте!
Возник вопрос - мне нужно сделать, что бы при наведении на картинку, которая является гиперссылкой, в определенном месте появлялась еще одна заданная картинка (у меня html-галерея с превьюшками, нужно что бы при наведении на картинку-превьюшку внизу галереии появлось определенное изображение с информацией о работе, на которую мы навели мышку).
Как это можно сделать? :confused:

Может с помощью какого-нибудь Java Script-a?
Если кто знает, подскажите, плиз!
Заранее большое спасибо! :lady:

0 Сообщения: 19 Зарегистрирован: 16.03.05

А зачем выводить картинку с информацией? Может лучше текст?
Если для текста:

Код:

<a href="#" onmouseover="document.container.innerHTML="текст описания" ;">link</a>
<!-- дальше место для описания-->
<div id="container">
</div>

А если уже нужно вывести картинку, тогда размещаем для начала на месте появления прозрачный гиф того же размера, потом подменяем

Код:

<a href="#" onmouseover="description.src=1.jpg;">link</a>
<!-- дальше место для описания-->
<div>
<img id="description" src="spacer.gif" style="width:100px; height:100px;">
</div>

за последний вариант не уверен, в мозилле кажется не работает, но идея вобщем такая

Уважаемые COLT и kometa_triatlon, спасибо вам большое за советы.

kometa_triatlon писал(а):

А зачем выводить картинку с информацией? Может лучше текст?

Нет, мне нужны именно картинки, т.е. нужно использовать нестандартные шрифты (требование заказчика).

Я вообщем сама нашла JavaScript который мне нужен, который работает под ИЕ, мозилой и оперой.
Но проблема в том, что тот скрипт показан на примере одной картинки, а у меня картинок будет более 50-ти (т.е. мне нужно будет его применить не к одной, а ко всем картинкам).
Пример скприта который мне нужен я залила сюда - http://67.18.205.82/~dewave/script_image/changeimage.htm
(я там настроила скрипт на перую картинку).
Вот код этой странички:

Код:

[size=9]<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<SCRIPT language="Javascript"> 
<!-- // 

browser_name = navigator.appName; 
browser_version = parseFloat(navigator.appVersion); 

if (browser_name == "Netscape" && browser_version >= 3.0) { roll = 'true'; } 
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 3.0) { roll = 'true'; } 
else { roll = 'false'; } 

function load(location){ 
return image; 
} 

if (roll == 'true'){ 
tr=new Image(); 
tr.src="on1.gif"; 
} 

function show(where){ 
if (roll == 'true'){ 
stored=where; 
storedLocation=document.images[where].src; 
document.images[where].src="on1.gif"; 
} 

} 

function hide(){ 
if (roll == 'true') document.images[stored].src=storedLocation; 
} 

// --> 
</SCRIPT>

</HEAD>
<body bgcolor="#F9F9F9">
<p align="center"><a href="http://#" onMouseOver="show('im1')" onMouseOut="hide()" ><font color="#FFFFFF"><img src="1.jpg" width="68" height="68" border="0"></font></a> 
  <font color="#FFFFFF"> _<img src="2.jpg" width="68" height="68">_ <img src="3.jpg" width="68" height="68">_ 
  <img src="4.jpg" width="68" height="68"> </font></p>
<p align="center"><img align="middle" src="0.gif" name="im1" border=0 > </p>
</BODY>
</HTML>[/size]

Может кто-то подскажет как подредактировать скрипт, что бы можно было его применить не к одной картинке, а к требуемому кол-ву картинок (нужно, что бы при наведении мышкой на "картинку №2" "изначальная невидимая картинка" - "0.gif" заменялась на картинку "информация к картинке №2" - "on2.gif" и т.д..
Заранее большое спасибо всем за советы.

0 Сообщения: 19 Зарегистрирован: 16.03.05

В этом скрипте жестко задана картинка, на которую заменяется невидимая. Значит...
Нужно модифицировать функцию show() - добавить кроме аргумента where еще и what.
Вторым параметром будет картинка, которая выводится.
Кстати, зачем заключать картинку в теги <font>?
И еще: если картинка, выводится каждый раз в том же месте, первый аргумент не нужен, можно его просто убрать, и задать в самой функции. А вообще скрипт замученный... Слишком большой по крайней мере.

Код:

…..
…..

function show(where, what){ 
if (roll == 'true'){ 
stored=where; 
storedLocation=document.images[where].src; 
document.images[where].src=what; 
}
……
……

<body bgcolor="#F9F9F9"> 
<p align="center">

<a href="http://#" onMouseOver="show('im1', 'thumbnail#1.jpg')" onMouseOut="hide()" >
<img src="1.jpg" width="68" height="68" border="0">
</a> 

<a href="http://#" onMouseOver="show('im1',  'thumbnail#2.jpg')" onMouseOut="hide()" >
<img src="2.jpg" width="68" height="68">
</a> 

<a href="http://#" onMouseOver="show('im1',  'thumbnail#3.jpg')" onMouseOut="hide()" >
<img src="3.jpg" width="68" height="68">
</a> 

<a href="http://#" onMouseOver="show('im1',  'thumbnail#4.jpg')" onMouseOut="hide()" >
<img src="4.jpg" width="68" height="68">
</a>  

</p> 
<p align="center">
 <img align="middle" src="0.gif" name="im1" border=0 > 
</p> 
</BODY>

kometa_triatlon, cпасибо огромаднейшее, этот скрипт работает отлично! :love:

P.S./извиняюсь что раньше не поблагодарила, у меня несколько дней инет не работал :insane:

0 Сообщения: 19 Зарегистрирован: 16.03.05

Да пожалуйста

оффтопик:

как мило

DeДверь
Логин:
Пароль:
	Автологин