Banner

Html onmouseover ve onmouseout kullanmak

Bloguma baktım biraz canlandırmam gerektiğini düşündüm. Şu anda bilgisayarımda yardımcı araç olmadığı için basit html kodlarıyla uğraştım. İnşallah ileride daha detaylı ve siteyi canlandıran aktiviteler yapıp anlatacağım. Sağ tarafa dost sayfalar bölümü açtım. Wordpress ve Joomla logolarını kullanarak fare ile resmin üzerine gelindiğinde arka planı renklenen resim, fare resmin üzerinden çekildiğinde normal haline dönen resim olarak html kod kullandım. Ayrıca dış link bağlantısı vererek eklenti geliştirdiğim içerik yönetim sistemlerine destek vermiş oldum.

Peki abi nasıl yaptın bunu?

Şimdi dostum aslında zor bir şey değil sadece html kodu. Elimde bulunan joomla ve wordpress logolarını paint yardımı ile arka planını renklendirdim. Daha sonra İmagaHack sitesine orijinal ve renkli logoları ekledim. 
Aşağıdaki kodları kullanarak fare ile resmin üzerine gelindiğinde, renklendirdiğim resmin çıkmasını sağlamış oldum.
1.    <a href="http://mtanriverdi.blogspot.com" target="_blank">
2.    <img src="http://siteadresi.com/orjinalresim.png" width="100" height="100"
3.    onmouseover="src=’ http://siteadresi.com/renkliresim.png’ ”
4.    onmouseout=" src=’ http://siteadresi.com/orjinalresim.png’ " />


Konuyu biraz daha açalım…
1.    Bu bölümde dış bağlantı linki verdim. Tıklandığında gitmesini isteğimiz sayfa.
2.    Bu bölümde ilk açılıştı görünmesini isteğim resmin adresini verdim.
3.    Bu bölümde fare resmin üzerine geldiğinde görünmesini istediğim resmin adresini verdim.
4.    Bu bölümde fare resmin üzerinde olmadığında görünmesini isteğim resmin adresini verdim.

*** width ve height bölümlerinde ise resmi boyutlandırabilirsiniz. İsterseniz onmouseover yani fare resmin üzerine geldiğinde resmin boyutunu isteğiniz boyutta gösterebilirsiniz.  Dış bağlantının ayrı sayfada açılmasını istemiyorsanız target="_blank" bölümünü olduğu gibi kaldırabilirsiniz.

<a href="http://mtanriverdi.blogspot.com" target="_blank" > <img src="http://siteadresi.com/orjinalresim.png" width="100" height="100" onmouseover="src=’ http://siteadresi.com/renkliresim.png width="100" height="100"’ ” onmouseout=" src=’ http://siteadresi.com/orjinalresim.png width="100" height="100"’ " / >

Yorum Gönder

0 Yorumlar