Soru | Css sprite

Merhaba,

Css sprite tekniği ile dışardan yüklenilen (değişken fakat aynı ölçülerde) resim üzerinde yapmaya çalışıyorum fakat olmuyor.

Yardım edebilir misiniz, Teşekkürler.

Resmin Kaynağı

		<div class="leftpart">
			<?php if ($product['thumb']) { ?>
			   <img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>"  /></a>
		    <?php } ?>

Css

.leftpart img {
margin-top:20px;
background-position: 0px 0px;
width: 350px;
height: 350px;
background-repeat:no-repeat;}
.leftpart img:hover {
margin-top:20px;
background-position: -230px 0px;
width: 350px;
height: 350px;
background-repeat:no-repeat;}

Ne yapmak istediğinizi daha açık anlatır mısınız?

resmin üzerine geldiğinde değişmesini istiyorum. fakat bunu css sprite tekniği ile yapmak istiyorum çünkü; panelden yalnızca 1 adet resim yükleyebiliyorum.

CSS sprite tekniğini kullanabilmek için IMG veya diğer html taglarını kullanabilirsiniz ama css background özelliğini kullanmak şartıyla.

style="background-image:url(images/sprite.png);"

<a href="" style="background-image:url(images/sprite.png);"></a>
<span style="background-image:url(images/sprite.png);"></span>
<div style="background-image:url(images/sprite.png);"></div>

Yani benim istediğimin olması mümkün değil doğru mudur ?

Mümkün gibi duruyor ancak eklenilen resim tek bir kayıt olarak saklanıyordur. Sizin istediğiniz eklenen bu resim üzerindeki diğer resimleri sprite ile ayrıştırarak birden fazla img tagi oluşturmak doğru anladıysam eğer. Eğer sprite üzerindeki diğer imajların x,y positionlarını veritabanında tutup bunu eklenen görselin kaydı ile ilişkilendirirseniz sanırım olabilir.

position_table [id,img_id,x,y]
img_table [id,img_url]

şeklinde bir veritabanı yapısı ile çözersiniz. Tabi bu dediklerimi kodlara müdahale edebiliyorsanız yaparsınız mantık aşağı yukarı böyle olmalı.