Yapmak istediğim şu;
Bir tane yuvarlak daire olacak o daire'nin etrafında yuvarlak bir şekilde resimler olacak.
Imagemap ile, sittin taneye bölünmüş tabloyla veya div ile kasıp position vererek yapmak şu anda aklıma geliyor ama image map dışında olanlar çok uzun iş bunun dışında aklına fikir gelen var mı acaba ?
1.bp.blogspot.com
şu resimdeki gibi düşünün dış çerçevedeki pembe yerlerde normal resimler olacak mevzu aynı bu.
tek bir resim şeklinde yapsanız, sonra koordinat belirterek linkleseniz?
z-index ile en öndekini en önde tutup, köşeleri tamamen yuvarlanmış diğer divleri arka arkaya koysan olabilir bleki bilemedim
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org">
<html xmlns="www.w3.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Falan</title>
<style>
#on{z-index:600;position:absolute;left:200px;top:100px;background-color:#0F0;width:200px;height:200px;-moz-border-radius: 100px;border-radius: 100px;}
#arka{z-index:0;position:absolute;left:180px;top:100px;background-color:#999;width:100px;height:100px;-moz-border-radius: 50px;border-radius: 50px;transition: 1s;-moz-transition: 1s;-webkit-transition: 1s;-o-transition: 1s;}
#arka:hover{background-color:#C00;}
</style>
</head>
<body>
<div id="arka"></div>
<div id="on"></div>
</body>
</html>
şu şekilde deneyin. koordinatla tek tek yer vermek zor olur yalnız, hepsini tek bir divin içine koyarsanız daha rahat edersiniz.
@yuto, teşekkürler fakat yaklaşık 15 - 20 resim olduğu için bu sefer hepsine ayrı ayrı pozisyon belirlemek zorunda kalıcam.
Sanırım image-map ile yapmak en kolay olacak.
soyle bir sey olabilir: cemberin merkezine (x,y) pikseli diyelim. dairenin yaricapina da r diyelim. r = bir resmin merkezden uzakligi. sonra pisagordan resmin koordinatlari bulunur(cemberin merkezi ile, aradaki uzaklik biliniyor zaten). daha sonra resim bu koordinatlara konulup css3 ile birlikte gelen transform-rotate ozellikleri ((git: davidwalsh.name)) kullanilarak istediginiz derecede bir dondurme uygulanir ve gosterdiginiz linkteki gibi bir goruntu elde edilir.
@sterimar, problem aslında dönmesi değil yani resimlerin taban kısmı alt'a doğru baksa da olur fakat şöyle bir sıkıntı çıkıyor;
20 resim için bunu nasıl konumlandırıcaz ? her biri için padding-margin vs.. vermemiz gerekiyor gibi geldi bana.
Yani olayı henüz tam kafamda canlandıramadım dediğin şekilde
<div id="arka">
<img 1>
<img 2>
<img 3>
....
</div>
<div id="on"></div>
kıvamına getirebileceğimizi sanmıyorum.
hepsini tek bir konteyner divin içine koyduğunda hepsine sağdan/soldan ve üstten/alttan koordinat vermek yeterli. evet biraz daha zahmetli fakat bu şekilde çok daha iyi hover efektleri verebilirsin (azcık dışa çıkmalı falan.
gerçi matematik ister orası ayrı
@yuto, hepsine bi kalemde nası alttan, üstten soldan sağdan ayarlıcam ki ?
sallıyorum bi kerede dedim ki soldan 10px, üstten 5px dedim.
bu durumda tüm resimler aşağı yukarı
|
...|
.....|
şeklinde gider
her birine sağlı sollu vermen lazım ayrı ayrı tabi başka kaçarı yok yani
anladım fikir fırtınası için teşekkür ederim.
Sanırım image-map çakıp f/p oranı en yüksek olan o gibi gözüküyor :)(git: )
imagemap' e gercekten gerek yok ve dedigin gibi her resmin koordinatlarini ayri ayri belirlemek cok uzun surer. surada yazdigim koda bakarsan tam istedigin seyi yapiyor: (git: pastebin.com) lorempixel' den ((git: lorempixel.com)) 30x30 bir resim yaratarak kodu deneyebilrsin. baska boyutta resim kullanmak istiyorsan goze guzel gorunmesi icin diger degiskenleri degistirmen gerekir.
edit: bir onceki mesajimda verdigim cember uzerindeki bir noktanin koordinatini bulma olayi yanlis. dogrusu verdigim linkte bulunan kod icerisinde yaziyor.
@sterimar, teşekkürler kod tam olarak istediğim şeyi yapıyor. tam kodları incelemedim ama sanırım img'yi array'a atarak hepsini farklı resim haline getirebilirim.