bir kac yazar once
Gece'den beri kahve sanırım kafa yaptı aklıma fikir gelmiyor fikir önerisi olan olursa süper olur.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
Gece'den beri kahve sanırım kafa yaptı aklıma fikir gelmiyor fikir önerisi olan olursa süper olur.
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.
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.
0
z-index ile en öndekini en önde tutup, köşeleri tamamen yuvarlanmış diğer divleri arka arkaya koysan olabilir bleki bilemedim
0
<!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.
<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.
0
@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.
Sanırım image-map ile yapmak en kolay olacak.
0
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.
0
@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.
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.
0
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ı
gerçi matematik ister orası ayrı
0
@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
sallıyorum bi kerede dedim ki soldan 10px, üstten 5px dedim.
bu durumda tüm resimler aşağı yukarı
|
...|
.....|
şeklinde gider
0
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.
edit: bir onceki mesajimda verdigim cember uzerindeki bir noktanin koordinatini bulma olayi yanlis. dogrusu verdigim linkte bulunan kod icerisinde yaziyor.
0
