Onmouseover=Opacity özelliği

Uzun zamandır aradığım bir html kodunu paylaşıcam.Bu kod ile resmin üstüne geldiğinizde şeffaf oluyor ve hoş bir görüntü katıyor.


Örnek Resim:

Soldaki görüntü mouse üstüne gelmediğinde görünen,sağdaki ise resmin üstüne gelince şeffaflaşan.


Kod:

<a href="Buraya gidilecek adres" target="_blank" title="Buraya title">

<img src="Buraya resmin adresi" width="80" height="15" border="0" style="FILTER: alpha(opacity=100);-moz-opacity: 1.0; opacity: 1.0;" onmouseover=BeginOpacity(this,100,40) onmouseout=EndOpacity(this,100)></a></div>

Kalın yazılan yerleri kendinize göre düzeltebilirsiniz.Genişlik,yükseklik,border gibi özellikler de size kalmış.


En son olarak altına aşağıdaki script'i tanımlayınız.

<script language=JavaScript>

<!--

var itv = 50;

var step = 10;

var start = 0;

var end = 0;

var currentOpac;

//change the opacity for different browsers

function changeOpac(obj, opacity) {

var object = obj.style; 

object.opacity = (opacity / 100);

object.MozOpacity = (opacity / 100);

object.KhtmlOpacity = (opacity / 100);

object.filter = "alpha(opacity=" + opacity + ")";

}

function BeginOpacity(obj, s, e)

{

start = s;

end = e;

currentOpac = s;

theobject=obj;

changing=setInterval("opacityit(theobject)",itv);

}

function EndOpacity(obj, end){

clearInterval(changing);

changeOpac(obj, end);

}

function opacityit(obj){

if(start > end) {

if (currentOpac>end){

currentOpac = currentOpac - step;

changeOpac(obj,currentOpac);

}

else if (window.highlighting)

clearInterval(highlighting);

} else if(start < end) {

if (currentOpac<end){

currentOpac = currentOpac + step;

changeOpac(obj,currentOpac);

}

else if (window.changing)

clearInterval(changing);

}

}

//-->

Not:Yukarıdaki kodu 1 kere tanımlamanız yeterlidir.