Ana Sayfa » , , , , , , , , , , » Onmouseover=Opacity özelliği

Onmouseover=Opacity özelliği

Yazar Murat Akgün on 17 Aralık 2011 Cumartesi | 16:05

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.

0 yorum:

Yorum Gönder