HTML ile resmin üzerine gelince renk değiştirme

Web_Monster · 15 Ağustos 2015

Öncelikle önceki konuma hala cevap bekliyorum. HTML'yi herkes bıraktı sanki. Neyse benim sorum şu;
HTML ile resmin üzerine gelince renk değiştirsin istiyorum. Bunu nasıl yapabilirim?

S.T.R.A.N.G.R. · 19 Ağustos 2015

Sadece HTML ile yeterli olmaz, CSS ile yapabilirsin ancak. Resmin rengini nasıl değiştirmek istiyorsun? Bir örnek verir misin?

Bulut Uzer · 19 Ağustos 2015

Aslında her gün bu başlıkları kontrol ediyorum. Ama kendi tarafımda cevap vermememin sebebi bu tip konularda kişinin cevabı daha çabuk bulabileceği Google'a sormamasından kaynaklanıyor.

Sorunun cevabı ise : CSS :hover Selector

alptekin1caner · 19 Ağustos 2015

Bunu Javascript ile yapabilirsin, örnek kodu incelersen anlarsın.

HTML:

<html>
<head>
<meta charset="utf8">


<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">

$(function(){

    $("img#hover").mouseenter(function(){

          $("div#background-change").css("background-color", "red");

      }).mouseleave(function() {
   
        $("div#background-change").css("background-color", "white");
      });
});

</script>

</head>
<body>

<img id="hover" width="300px" height="300px" src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" alt="Değiştir!"></img>
<div style="width: 300px; height: 300px;" id="background-change">Buranın rengi değişecek!</div>

</body>
</html>

Bulut Uzer · 19 Ağustos 2015

alptekin1caner dedi:
Bunu Javascript ile yapabilirsin, örnek kodu incelersen anlarsın.

Abi ciddi misin? Javascript sevmediğimden değil tam tersi hayranı olduğum bir dil ama bu kadar kısa bir iş için o kadar satır heba etmeye gerek var mı sence?

alptekin1caner · 19 Ağustos 2015

Bulut Uzer dedi:
Abi ciddi misin? Javascript sevmediğimden değil tam tersi hayranı olduğum bir dil ama bu kadar kısa bir iş için o kadar satır heba etmeye gerek var mı sence?

image' nin üzerine gelince div' in rengini değiştirebiliyorsanız CSS ile öğrenmek isterim...

Not: Arkadaşın açıkladığını bu şekilde yorumladım...

Bulut Uzer · 19 Ağustos 2015

Problem değil ne için yazdığını biliyorum. Sadece daha iyi yollar varken bu yolun gereksiz olduğunu söylemek istiyorum. Uyumluluk sorunları olmadan kullanabileceği yöntemi ise jsfiddle üzerinde gösterdim. Eğer img elementi için ":before" kullanarak yaparsa daha kısa şekilde de sorununu çözebilir. Böylelikle hem Jquery kütüphanesinin hamallığını çekmiyor hem de az bir satırla problemine çözüm bulmuş oluyor. Tabi bu örnek için daha güzel sonuçlar çıkarılabilir istenildiği taktirde.

Edit fiddle - JSFiddle

alptekin1caner · 19 Ağustos 2015

Bulut Uzer dedi:
Problem değil ne için yazdığını biliyorum. Sadece daha iyi yollar varken bu yolun gereksiz olduğunu söylemek istiyorum. Uyumluluk sorunları olmadan kullanabileceği yöntemi ise jsfiddle üzerinde gösterdim. Eğer img elementi için ":before" kullanarak yaparsa daha kısa şekilde de sorununu çözebilir. Böylelikle hem Jquery kütüphanesinin hamallığını çekmiyor hem de az bir satırla problemine çözüm bulmuş oluyor. Tabi bu örnek için daha güzel sonuçlar çıkarılabilir istenildiği taktirde.

Edit fiddle - JSFiddle

Anlatamadığım ya da anlamadığım şey şu;

Kişi açıklamasında resimin üzerine gelince bir efekt mi istemiş yoksa biryerin renginin mi değişmesini istemiş? Benim yazdığım javascript kodu resimin üzerine gelince başka bir div' in rengini değiştiren bir kod. Notta da belirttiğim gibi yanlış anlayıp başka birşey yazmış olabilirim.

Bulut Uzer · 19 Ağustos 2015

alptekin1caner dedi:
Anlatamadığım ya da anlamadığım şey şu;

Kişi açıklamasında resimin üzerine gelince bir efekt mi istemiş yoksa biryerin renginin mi değişmesini istemiş? Benim yazdığım javascript kodu resimin üzerine gelince başka bir div' in rengini değiştiren bir kod. Notta da belirttiğim gibi yanlış anlayıp başka birşey yazmış olabilirim.

Arkadaş resim üzerine gelince var olan resimin üzerinde bir değişiklik olsun demek istemiş. Yani ben öyle düşündüm direk. Yoksa tabi ayrı bir elementin kontrolü için senin yolun mantıklı olmuş oluyor.

Cr4T1v3 · 19 Ağustos 2015

İlk önce resmi bir tag içine al bu tagın adı muz olsun sonra css olarak bunun birde muz : hover halini yap ve renk kodunu gir, afiyet olsun.

HTML ile resmin üzerine gelince renk değiştirme

Ayrıntılı düzenleme

Web_Monster

Hectopat

S.T.R.A.N.G.R.

Kilopat

Bulut Uzer

Kilopat

alptekin1caner

Hectopat

Bulut Uzer

Kilopat

alptekin1caner

Hectopat

Bulut Uzer

Kilopat

alptekin1caner

Hectopat

Bulut Uzer

Kilopat

Cr4T1v3

Kilopat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz