13:50 | 25.06.2021
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Ucoz » Скрипты » Скрипты для Ucoz "Увеличение картинки при наведении"
Скрипты для Ucoz "Увеличение картинки при наведении"
GRAFF™ · Offline · Дата: Среда, 14.11.2012, 21:10 | Сообщение # 1

  • Admin
  • Сообщений: 20
 
2
 


Я хочу предложить вашему вниманию 3 интересных скрипта, которые увеличиваю картинку при наведение на них курсором.

1. Начнем с самого эффектного:

Эффективность его заключается в том, что картинка во время увеличения еще и крутится.

Пример этого скрипта

Code

<script src="http://testttt.3dn.ru/222.js" type="text/javascript"></script>  
<script src="http://testttt.3dn.ru/111.js" type="text/javascript"></script>  

<div class="gallery">  
  <ul class="reset">  
<li><img src="ВАША КАРТИНКА" alt=""></li>  

  </ul>  
</div>  

<style>  
  ul.reset,  
  ul.reset li {  
  display:block;  
  list-style:none;  
  padding:0;  
  margin:0;  
}  
   
   
  .gallery ul li {  
  width:200px; /* a half of image width */  
  height:200px; /* a half of image height */  
  margin:0 10px 10px 0;  
  float:left;  
  position:relative;  
}  
   
  .holder {  
  position:absolute;  
  top:0;  
  left:0;  
  margin:-100px 0 0 -100px; /* margin-left: a half of 'li' width and margin-top: a half of 'li' height */  
}  
</style>  


Не забудьте вместо слов ВАША КАРТИНКА вставить свою ссылку.
Данный код можно вставлять в любое место, то есть туда куда вам нужно.
При помощи атрибутов width height можно менять размер начальной и увеличинной картинки.

2. Далее, вот такой скрипт, он как бы раздвигает картинку, из-за чего сдвигается и сам сайт, поэтому в зависимости от сайта и места, он может быть не удобен.
Пример этого скрипта

Code

<div align="center"><script type="text/javascript" src="http://testttt.3dn.ru/333.js"></script>
<a href="ВАША КАРТИНКА"><img style="width: 100px; height: 100px;" title="" class="expando cat" src="ВАША КАРТИНКА" border="1"></a>
</div>  


Устанавливаем в то место, где хотим видеть картинку.

Так же, при помощи атрибутов width height можно менять начальный размер (конечный размер, это размер вашей картинки).

3. А при помощи этого скрипта, картинка как бы цепляется за курсор и двигается вместе с ним.
Пример этого скрипта

Code

<script type="text/javascript" src="http://testttt.3dn.ru/444.js"></script>
<font onmouseover="Tip('<img border=0 src=ВАША КАРТИНКА>', BGCOLOR, '#ffffff', FONTCOLOR, '#333333', BORDERCOLOR, 'Silver', WIDTH, '100%', FADEIN, 500, FADEOUT, 500)">  
<a href="ВАША КАРТИНКА" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})">  
<img src="ВАША КАРТИНКА" style="border: medium none ;" title="" align="center" border="0" width="150"></a></font>  


Устанавливаем в то место, где хотим видеть картинку.

Если у вас что-то не работает пишите смело в этой теме.

Форум » Ucoz » Скрипты » Скрипты для Ucoz "Увеличение картинки при наведении"
  • Страница 1 из 1
  • 1
Поиск: