CSS ile Fare İle Üzerine Gelince Değişen Resim Yapma

[Ciri]

Merhabalar..

Sizlere img etiketi kullanmadan üzerine gelince değişen resim elde etmeyi göstereceğiz.

İlk önce bir div sınıfı atayalım. Örneğin ben resmi codexresim adlı bir css sınıfına atayacağım.

Kod: Tümünü Seç Tümünü Kopyala

<div class="codexresim">

</div>

Div kodlarımız hazır. Şimdi css kodlarımızı ayarlamamız gerekiyor. Css sınıfımızı (class) aşağıdaki şekilde tanımlıyoruz. Resim olarak codex logomuzu kullanacağız.

Kod: Tümünü Seç Tümünü Kopyala

.codexresim {
width: 140px;
height: 50px;
background: url(http://codex.muratdinc.com/img/site-ici/codex-logo-yesil.png);
}

Yukarıdaki kodda css sınıfımızı div’e tanıttık ve resmin genişlik ve yükseklik değerlerini verdik. Genişlik ve yüksek değerleri resim ile aynı olmalı. Şimdi üzerine gelince hangi resmin değişmesi için gereken css kodlarını verelim.

Kod: Tümünü Seç Tümünü Kopyala

.codexresim:hover {
width: 200px;
height: 63px;
background: url(http://www.muratdinc.com/img-siteici/logo.png);
}

Yukarıdaki kodda resmin üzerine gelince hangi resmin gözükeceğini ayarladık ve resmin kendi genişlik ve yükseklik değerini girdik. Şimdi kodlarımızın çalışabilirliğini test etmek için bir araya toplayalım. Css kodlarımızı <style> etiketi arasına koyacağız.

Kod: Tümünü Seç Tümünü Kopyala

<style>
.codexresim {
width: 140px;
height: 50px;
background: url(http://codex.muratdinc.com/img/site-ici/codex-logo-yesil.png);
}
.codexresim:hover {
width: 200px;
height: 63px;
background: url(http://www.muratdinc.com/img-siteici/logo.png);
}
</style>

<div class="codexresim">

</div>

Önizle:

PHP Kod: Tümünü Seç Tümünü Kopyala

http://onizle.koddostu.com/ 


[Point1234]

ya yazıları neden seçemiyoz adminim kaldırın engeli lütfen linki kopyalayamıyoz ya merak etmeyin herkezi hırsız bellediniz sizde ha.

[Ciri]

ya yazıları neden seçemiyoz adminim kaldırın engeli lütfen linki kopyalayamıyoz ya merak etmeyin herkezi hırsız bellediniz sizde ha.

bunun sizle, benle yada falanca kişiyle alakası yok. Bu eski yani 10tl.net zamanında da vardı hala var. Hırsızlıkla alakası yok.

[Point1234]

ya yazıları neden seçemiyoz adminim kaldırın engeli lütfen linki kopyalayamıyoz ya merak etmeyin herkezi hırsız bellediniz sizde ha.

bunun sizle, benle yada falanca kişiyle alakası yok. Bu eski yani 10tl.net zamanında da vardı hala var. Hırsızlıkla alakası yok.

adminim bu engel yani tıklama, kopyalama, öğeyi denetlemeyi açmama gibi kodları emek hırsızları için yapmışlardır.
lütfen düzeltin kullanıcı üzerinde - negatif etki yaratıyosunuz.

[Ciri]

ya yazıları neden seçemiyoz adminim kaldırın engeli lütfen linki kopyalayamıyoz ya merak etmeyin herkezi hırsız bellediniz sizde ha.

bunun sizle, benle yada falanca kişiyle alakası yok. Bu eski yani 10tl.net zamanında da vardı hala var. Hırsızlıkla alakası yok.

adminim bu engel yani tıklama, kopyalama, öğeyi denetlemeyi açmama gibi kodları emek hırsızları için yapmışlardır.
lütfen düzeltin kullanıcı üzerinde - negatif etki yaratıyosunuz.

Eğer biri sitemden kod almak isterse zaten f12 ile açar. Bu engellenemez, tarayıcıdan tarayıcıya değişim gösterir. Benimkisi yani metni seçememe eskiden beri varolan bir şey ancak sizin buna verdiğiniz tepkiyi anlamadım. Emek hırsızlığına gelince; Ben kimseye böyle bir şey demedim, kimseyi bu şekilde suçlamadım.

Kısaca; Bir müddet daha kalacak. İllaki üstteki kodları almak isterseniz:::> İlk Mesajı cevapla deyin, fareyle hepsini seçin ve CTRL+C yapın. sonra not defterine atın ve düzeltin