Эффекты с картинками

06-09-2007, 04:23 AM

осветление картинки при наведении мышки

Можно осветлять просто картинку, а можно это проделать с картинкой-ссылкой.

Вставляем в body:

Code:

<img src="picture.jpg" style="filter:alpha(opacity=100)" onmouseover="nereidFade(this,40,60,10)" onmouseout="nereidFade(this,100,60,30)" border="0">
<script>
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
    if (object != "[object]"){          setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
        return;//osw
    }
   clearTimeout(nereidFadeTimers[object.sourceIndex]);
    
    diff = destOp-object.filters.alpha.opacity;
    direction = 1;
    if (object.filters.alpha.opacity > destOp){
        direction = -1;
    }
    delta=Math.min(direction*diff,delta);
    object.filters.alpha.opacity+=direction*delta;

    if (object.filters.alpha.opacity != destOp){
        nereidFadeObjects[object.sourceIndex]=object;//fantasyflash.ru
        nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
}</script>

06-09-2007, 04:25 AM

Очень красивый эффект... Он расспространяется на все ссылки-картинки и просто текстовые ссылки.

Вставляем в body:

Code:

<style type="text/css">
a:hover{
FILTER: Alpha(Opacity=70, FinishOpacity=6, Style=2);  COLOR: red; HEIGHT: 10px; TEXT-DECORATION: none;}
a{color:#FF00CC; text-decoration:none; }
</style>

06-09-2007, 04:27 AM

То же самое можно проделать с картинкой-ссылкой.

Вставляем в body:

Code:

<img src="picture.jpg" style="filter:alpha(opacity=35)" onmouseover="nereidFade(this,100,60,15)" onmouseout="nereidFade(this,35,60,10)" border="0">
<script>
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
    if (object != "[object]"){          setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
        return;//osw
    }
   clearTimeout(nereidFadeTimers[object.sourceIndex]);
    
    diff = destOp-object.filters.alpha.opacity;
    direction = 1;
    if (object.filters.alpha.opacity > destOp){
        direction = -1;
    }
    delta=Math.min(direction*diff,delta);
    object.filters.alpha.opacity+=direction*delta;

    if (object.filters.alpha.opacity != destOp){
        nereidFadeObjects[object.sourceIndex]=object;//
        nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
}</script>

06-09-2007, 04:28 AM

Картинка может быть ссылкой, а можно использовать этот эффект и для простых картинок.

Вставляем в head:

Code:

<style>
<!--
#images{ filter:light}
-->
</style>

Остальное — в body:

Code:

<a href="http://"><img id="images" src="picture.jpg" border=0></a>
<script language="JavaScript1.2">
s = 60; 
vp = 10; 
startx = 0; 
starty = 0; 
var IE = document.all?true:false
function moveL()
{
xv = tempX;
yv = tempY;
images.filters.light.MoveLight(1,xv,yv,s,true);
}

if (IE&&images.filters)
document.all.images.onmousemove = getMouseXY;
var tempX = 0
var tempY = 0

function getMouseXY(e) {
tempX = event.offsetX
tempY = event.offsetY

  if (tempX < 0){tempX = 0}
  if (tempY < 0){tempY = 0}
  if (t)
  {  
   moveL();//
  }

  return true
}

var xv = startx;
var yv = starty;
var t= true;//osw
if (IE&&images.filters){
images.style.cursor="hand";
images.filters.light.addAmbient(255,255,255,vp)
images.filters.light.addPoint(startx,starty,s,255,255,255,255)
}</script>

06-09-2007, 04:31 AM

Обычная цветная картинка-ссылка или просто картинка отображается черно-белой, а при наведении мышки «раскрашивается».

Вставляем в body:

Code:

<a href="http://"><img src="picture.jpg"  border=0 style="filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)" onmouseout="this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)'" onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)'"></a>

06-09-2007, 04:32 AM

Картинка-ссылка переворачивается при наведении мышки. Это не скрипт, а маленький секрет html

Вставляем в body:

Code:

<style>
A:hover IMG {
	FILTER: flipV
}</style>

06-09-2007, 04:33 AM

трясущаяся картинка

При наведении мышки на картинку-ссылку (или просто картинку), картинка «шевелится».

Не забывайте посмотреть пример!

Вставляем в head:

Code:

<style>
.myimage{
position:relative
}</style>

Остальное — в body:

Code:

<script language="JavaScript1.2">
var rector=2
var stopit=0 
var a=1
function init(which){
stopit=0//osw 
shake=which
shake.style.left=2
shake.style.top=2
}

function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return//fantasyflash.ru
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector
}
else{
shake.style.left=parseInt(shake.style.left)-rector
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",65)
}

function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}
</script>
<a href="http://"><img src="picture.jpg" class="myimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()" border=0></a>

Не забудьте поменять пути к своим картинкам

06-09-2007, 04:35 AM

Картинки проявляются друг за другом. А если загрузить только одну картинку (pic[0]), то она проявится 1 раз только при загрузке странички.

Вставляем в body:

Code:

<SCRIPT language=JavaScript1.2>
pic= new Array()
pic[0] = "<img src=pic1.jpg>"
pic[1] = "<img src=pic2.jpg>"
var i_pic= 0
var timer
function ols() {
    if (document.all) {
        contentt.filters[0].apply()
        contentt.innerHTML = pic[i_pic]
        contentt.filters[0].play()//osw
        if (i_pic>= pic.length-1) {
            i_pic= 0
        }
        else {
            i_pic++
        }
    } 
    
    if (document.layers) {
       document.nn.document.write("<table  border=0><tr><td align=center>"+pic[i_pic]+"</td></tr></table>")
  document.close()
        if (i_pic>= pic.length-1) {
            i_pic= 0
        }
        else {
            i_pic++
        }
    } 
    timer = setTimeout("ols()",5020)   
}
</SCRIPT>
<DIV id=contentt  
style="FILTER: revealTrans(Transition=12, Duration=3);  POSITION: absolute;  LEFT: 350px;"></DIV>

Не забывайте загрузить функцию ols внутрь тега body: <BODY onload=ols()>

06-09-2007, 04:36 AM

Из названия все понятно

Вставляем в body:

Code:

<script language="JavaScript">
if (document.images) {       
img1on = new Image();		
img1on.src ="picture.jpg"; 
img1off = new Image();		  	
img1off.src = "picture.jpg"; 
}
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src"); }}//osw
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "off.src"); }}
</script>
<a href="http://" onmouseover="imgOn('img1')"; onmouseout="imgOff('img1')" >
<img src="picture.jpg" border="0" name=img1></a>
</center>

Не забудьте поменять пути к своим картинкам

06-09-2007, 04:43 AM

коллекция лент прокрутки баннеров/каринок

Лента-1
Картинки прокручиваются друг за другом без остановок.
Это могут быть баннеры ваших друзей или просто ваши картинки.

Вставляем в body:

Code:

<MARQUEE onmouseover='this.scroll
            onmouseout='this.scrollAmount="3''' Amount="3"' scrollAmount=3 width=180 height=35>

<a href="http://ссылка" target=_blank>
<img src="banner.gif" border=0 width=88 height=31></a>

<a href="http://ссылка" target=_blank>
<img src="banner2.gif" border=0 width=88 height=31></a>

<a href="http://ссылка" target=_blank><img src="banner3.gif" border=0 width=88 height=31></a></MARQUEE></center><BR>

Лента-2
Картинки прокручиваются друг за другом (право-лево) с остановками, при наведении мыши. Удобно использовать для показа баннеров на главной странице вашего сайта.

Вставляем в body:

Quote:

Лента-3
Картинки прокручиваются друг за другом (лево-право) с остановками, при наведении мыши. То же самое, но направление наоборот. Удобно использовать для показа баннеров на главной странице вашего сайта.

Вставляем в body:

Code:

<marquee  scrollAmount=3 onmouseover=this.scrollAmount=0 onmouseout=this.scrollAmount=3 direction="right" width=300 height=100><!--osw--> 
	<a href="http://ссылка" target=_blank><img src="banner.gif" width=88 border=0 height=31></a>
<a href="http://ссылка" target=_blank><img src="banner2.gif" width=88 border=0 height=31></a>
<a href="http://ссылка" target=_blank><img src="banner3.gif" width=88 border=0 height=31></a>
<a href="http://ссылка" target=_blank><img src="banner4.gif" width=88 border=0 height=31></a>	
  </marquee></center>

Лента-4
Картинки прокручиваются в вертикальной ленточке Вверх с остановками. Удобно использовать для показа баннеров на главной странице вашего сайта.

Вставляем в body:

Code:

<center>
<marquee direction="up" scrollAmount=2 onmouseover=this.scrollAmount=0 onmouseout=this.scrollAmount=2 width=100 height=100><!--osw-->
<a href="http://ссылка" target=_blank>
<img src="banner.gif" border=0 width=88 height=31></a>
<a href="http://ссылка" target=_blank>
<img src="banner2.gif" border=0 width=88 height=31></a>
<a href="http://ссылка" target=_blank><img src="banner3.gif" border=0 width=88 height=31></a>
<a href="http://ссылка" target=_blank><img src="banner4.gif" border=0 width=88 height=31></a></MARQUEE></center>

Лента-5
Картинки прокручиваются в вертикальной ленточке Вниз с остановками. Удобно использовать для показа баннеров на главной странице вашего сайта.

Вставляем в body:

<center>

<marquee direction="down" scrollAmount=2 onmouseover=this.scrollAmount=0 onmouseout=this.scrollAmount=2 width=100 height=100>
<a href="http://ссылка" target=_blank>
<img src="banner.gif" border=0 width=88 height=31></a>
<a href="http://ссылка" target=_blank>
<img src="banner2.gif" border=0 width=88 height=31></a>
<a href="http://ссылка" target=_blank><img src="banner3.gif" border=0 width=88 height=31></a>
<a href="http://ссылка" target=_blank><img src="banner4.gif" border=0 width=88 height=31></a></MARQUEE></center>