Блог

У меня есть 2 изображения, одно большое и одно маленькое. Большой размер составляет 77 X 15, а маленький — 15 X 15.

Теперь эти 2 изображения располагаются поверх другого изображения (размер которого может различаться). Предполагается, что это произойдет; когда пользователь наводит курсор на маленькое изображение, оно скрывается, а затем отображается большое изображение. Оба изображения заключены в DIV. Я знаю, что могу сделать это в функции (и у меня это работает), но мне нужно попытаться сохранить его встроенным (преступник, я знаю). Вот код, который у меня есть на данный момент. Имейте в виду, что мне передали этот код.

 <div id="small" style="position:absolute;top:0px;right:15px; z-index:5000;" onmouseover="this.style.visibility='hidden';" onmouseout="this.style.visibility='visible';">

<img src="small.gif" style="FILTER:Alpha(Opacity=50, FinishOpacity=50, style=0); position:absolute; width: 15px; height: 15px;" border="0" alt="text">

</div>

<div id="large" style="position:absolute;top:0px;right:77px; z-index:5000;" onmouseover="this.style.visibility='visible';" onmouseout="this.style.visibility='hidden';"><img src="large.gif" style="position:absolute" border="0" alt="text">

</div>
  

Кажется, происходит то, что при наведении курсора мыши на изображение большего размера оно исчезает, а затем маленькое просто продолжает мигать при наведении на него. Есть идеи?

РЕДАКТИРОВАТЬ: Забыл упомянуть, что оба изображения разные, поэтому я не могу просто изменить размер одного изображения.

Возможно, я подхожу к этому совершенно неправильно, поэтому, пожалуйста, дайте мне знать.

Спасибо

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