Отображение картинки при наведении на ссылку

_Ирина_ · April 4, 2008

есть такой вариант

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Идентификаторы</title>
<style type="text/css">
#descr {
 position: relative; /* Относительное позиционирование */
 visibility: hidden /* Прячем содержимое слоя */
}
</style> 

<script type="text/javascript">
function hiddenLayer() {
document.getElementById("descr").style.visibility = "hidden";
} 

function showLayer() {
document.getElementById("descr").style.visibility = "visible";
}
</script>
</head> 
<body>

<table width="90%" border="0" cellspacing="0" cellpadding="4" align="center">
<tr>
<td width="20%" align="center"><a href="#" onMouseOver="showLayer()" onMouseOut="hiddenLayer()"><img src="button.gif" width="98" height="33" border="0" alt="Кнопка"></a></td>
<td>
<div id="descr">Данная эксклюзия является подмножеством астрациональных супремативных монотенных федоний кадонарного экстрафазория.</div>
</td>
</tr>
</table>

</body>
</html>

но это не совсем то...тут при наведении на картинку появляется текст...мне нужно наоборот...что и как надо изменить? помогите разобраться....

есть ещ? альтернативный javascript

<!-- <script type="text/javascript">
var img1 = new Image();
var img2 = new Image();
var img3= new Image();
var img4= new Image();

img1.src = "001.jpg";
img2.src = "002.jpg";
img3.src = "003.jpg";
img4.src = "004.jpg";


function doButtons(picimage) {
eval("document['picture'].src = " + picimage + ".src");
}
</script>

<table><tr><td><img name=picture src="000.jpg" width=314 height=224 border=0></td>
<td><ul type="square" >
<li><a href = "#" onmouseover = "doButtons('img1')">ТЕКСТ</a></li>
<li><a href = "#" onmouseover = "doButtons('img2')">ТЕКСТ</a></li>
<li><a href = "#" onmouseover = "doButtons('img3)">ТЕКСТ</a></li>
<li><a href = "#" onmouseover = "doButtons('img4)">ТЕКСТ</a></li>
</ul></td></tr></table>

проблема в том, что с тремя картинками работало, а при добавлении новых не они не отображаются...прич?м вс? правильно дописывала и в код и пути к картинкам, по примеру исходника....может этот код больше чем с тремя картинками не работает вообще? помогите найти решение, пожалуйста... не важно будет это CSS или javascript или что-то третье или четв?ртое...главное чтобы работало, чтобы при наведении на ссылку в нужном месте менялись картинки..не отправляйте по имеющимся уже темам..уже вс? перепробовала...и на изучение тонны литературы тоже...мне нужна конкретная помощь в конкретном отдельно взятом случае...спасибо заранее

AKS · April 4, 2008

...проблема в том, что с тремя картинками работало...

Что там работало? Вы имеете изображения в формате jpg, а сценарий указывает путь к изображениям в формате src:

eval("document['picture'].src = " + picimage + ".src");

Storm · April 4, 2008

Вот простой скрипт

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#div_img {width:100px;height:100px;border:1px solid red;}
/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function showImg(imgName)
{
 document.getElementById('img').src = imgName;
}
/*]]>*/
</script>
</head>

<body>
<div id="div_img"><img id="img" src="#" alt="" /></div>



<a href="#" onmouseover="showImg('image1.jpg')">link1</a>



<a href="#" onmouseover="showImg('image2.gif')">link2</a>



<a href="#" onmouseover="showImg('image3.jpg')">link3</a>
</body>
</html>

_Ирина_ · April 4, 2008

Storm, спасибо буду пробовать

_Ирина_ · April 4, 2008

Storm! Большущее спасибо!!!! получилось...код действительно простой..спасибочки))))

Sign In

Отображение картинки при наведении на ссылку

Question

_Ирина_

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

AKS

Link to comment

Share on other sites

Storm

Link to comment

Share on other sites

_Ирина_

Link to comment

Share on other sites

_Ирина_

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information