Üzerine gelince diğer resim gelmesi

31-10-2014, 19:49:07

#1

Misafir

...

31-10-2014, 21:00:04

#2

~~Armageddon~~

Üyeliği durduruldu

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>

01-11-2014, 00:32:08

#3

Misafir

Armageddon adlı üyeden alıntı: mesajı görüntüle

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

01-11-2014, 10:46:03

#4

~~Armageddon~~

Üyeliği durduruldu

Misafir adlı üyeden alıntı: mesajı görüntüle

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

<img src="<?php $vitrin_resim_1; ?>" alt="" />

gibi.

02-11-2014, 23:14:29

#5

Blackhatx86

Güncel ise pm alabilir miyim ?

08-11-2014, 17:50:15

#6

Misafir

Arkadaşlar kendi uğraşlarım sonucu bir noktaya geldim aşşağıda bulunan kodlar ürün üzerinde gelince showhim adlı class ile farklı bir tasarım getiriyor bunun içerisine resim değiştirme eklemek istiyorum.

Değişecek resim değişkeni {vitrin_resim_2}

<a href="{urun_link}"><div class="showme">[indirimli_buton]<div class="indirim_orani2"><strong>% {indirim_yuzdesi}</strong><br>İNDİRİM</div>[/indirimli_buton]  <div class="inclee"> Detaylı İncele</div></div></a>

.showme{
	display: none;
	position: absolute;
	margin-top: -20px;
	height: 518px;
	width: 318px;

.showhim:hover .showme{
	display : block;
	height: 488px;
	width: 318px;
	border: 1px solid #F60;
	position: relative;
	margin-top: -375px;  /* resimler 240 olunca -375 yap */
	margin-left: -1px;

.bg-homet-img:hover {
	height: 300px; 
	width: 300px;
	margin-top: 18px;
	margin-right: 5px;
	margin-left: 5px;
	text-align: center;

}

10-11-2014, 02:53:11

#7

Misafir

geri kalan sistemide showme adlı bulunan class üzerinde hover uygulanmış onuda bg-homet-img ile birleştirip çözüme ulaştım. Daha detaylı anlatamam imkansız zaten deneye deneye çözdüm benden iyi bilen ve yardımcı olan arkadaşlara da ayrıca teşekkür ederim.
<a href="{urun_link}"><div class="showme"><div class="bg-homet-img">{vitrin_resim_2}</div></div></a>