Хтмл-низ:
Код:
<script type="text/javascript"> $(document).ready(function(){ $('.menuitem img').animate({width: 100}, 0); $('.menuitem').mouseover(function(){ ; gridimage = $(this).find('img'); gridimage.stop().animate({width: 200}, 150); }).mouseout(function(){ gridimage.stop().animate({width: 100}, 150); }); }); </script>
$('.menuitem img').animate({width: 100}, 0); - размер изображения до наведения;
gridimage.stop().animate({width: 200}, 150); - максимальный размер (200) при наведении;
Добавить в хтмл-верх:
Код:
<style type="text/css"> img { border: none; } #menuwrapper{ left: 20%; position: relative; height: 210px; } #menu{ position: absolute; bottom: 0px; left: 0px; } .menuitem { position: fixed relative; bottom: 0px; display: inline-block; } </style>
height: 210px; — это высота линии. Если ваши изображения (в оригинальном размере) больше 200 пикселей, измените это значение.
Вставлять изображения следующим кодом:
Код:
<div id="menuwrapper"> <div id="menu"> <a href="http://" class="menuitem"><img src="URL"></a> <a href="http://" class="menuitem"><img src="URL"></a> <a href="http://" class="menuitem"><img src="URL"></a> <a href="http://" class="menuitem"><img src="URL"></a> </div> </div>
Источник: monsterart.ru