Скрипт для увеличения миниатюр при наведении. Написан на jQuery канечно же
Давайте начнемс! Пример
1. jQuery
Это сам скрипт, который выполняет основную функцию. Его тоже нужно вставить между < head> и < /head>
Code
<script type="text/javascript">
$(function(){
$('.box').hover(function(){
$(this).stop().animate({
opacity: '1.0', //прозрачность при наведении
filter: 'alpha(opacity="30")', //прозрачность при наведении для IE
width: '130px', //ширина при наведении
height: '130px' //высота при наведении
},
200 //скорость эффекта при наведении
);
}, function(){
$(this).stop().animate({
opacity: '0.3', //начальная прозрачность
filter: 'alpha(opacity="30")', //начальная прозрачность для IE
width: '100px', //начальная ширина
height: '100px' //начальная высота
},
200 //скорость сброса настроек при наведдени. Т. е. какая скорость будет при убирании с объекта курсора (че написал...)
);
});
});
</script>
2. CSS
Ето пихаем в CSS:
Code
.box {
width: 100px; /* ширина по умолчанию */
height: 100px; /* высота по умолчанию */
opacity:0.3; /* прозрачность по умолчанию */
filter: 'alpha(opacity="30")', /* прозрачность по умолчанию для IE */
position: relative; /* позиция */
margin: 5px; /* отступы */
}
.cellS td {
width:140px; /* ширина ячейки */
}
3. HTML
Суляем эту белиберду туда, где хотим видеть свои тумбнеилы.
Code
<table class="cellS" height="140" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><a onfocus="this.blur()" href="ССЫЛКА1"><img border="0" src="КАРТИНКА1" class="box"></a></td>
<td align="center"><a onfocus="this.blur()" href="ССЫЛКА2"><img border="0" src="КАРТИНКА2" class="box"></a></td>
<td align="center"><a onfocus="this.blur()" href="ССЫЛКА3"><img border="0" src="КАРТИНКА3" class="box"></a></td>
<td align="center"><a onfocus="this.blur()" href="ССЫЛКА4"><img border="0" src="КАРТИНКА4" class="box"></a></td>
<td align="center"><a onfocus="this.blur()" href="ССЫЛКА5"><img border="0" src="КАРТИНКА5" class="box"></a></td>
</tr>
</table>
4. Remember
Ну и последний этап. Копируем себе в тело, а желательно в head:
Code
<!-- Все, что делает Life - все красиво -->
