CSS ile
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.kutu
{
width:309px;height:163px;float:left; background-image: url(https://www.r10.net/images/logom7.png);
background-repeat: no-repeat;
}
.kutu:hover
{
background-image: url(https://i.hizliresim.com/Wr3WRm.jpg);
}
</style>
</head>
<body>
<div class="kutu">
</div>
</body>
</html>jQuery ile
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.kutu
{
width:309px;height:163px;float:left; background-image: url(https://www.r10.net/images/logom7.png);
background-repeat: no-repeat;
}
</style>
<script type="text/javascript" src = "http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(function() {
$(".kutu img").not(".kutu img:first").hide();
var yol1 = $(".kutu img:eq(1)").attr("src");
var yol2 = $(".kutu img:eq(0)").attr("src");
$(".kutu img").hover(function() {
$(this).attr("src",yol1)
},function() {
$(this).attr("src",yol2)
});
});
</script>
</head>
<body>
<div class="kutu">
<img src="https://www.r10.net/images/logom7.png" alt="" />
<img src="https://i.hizliresim.com/Wr3WRm.jpg" alt="" />
</div>
</body>
</html>
Hocam teşekkür ederim url yerine değişken ile değişim yapmak istersek nasıl yapacağız örnek olarak değişkenimiz {vitrin_resim_1}-{vitrin_resim_2} olsun bunu url yerine nasıl getirebiliriz