Good afternoon, this is my first post.
I am studying javascript and I thought to use the same effect found in the iPad iBooks.
It is a shelf (static object, even just an image), but when you buy a book you can put this shelf. You can also drag it, change the shelf and everything else just like a real bookshelf in the house of people.
Thank you.
Carlos Paiva
muazzez
December 18, 2011, 11:34pm
2
<html>
<html>
<head>
<meta charset="utf-8">
<title>hat sanatı örnekleri</title>
<style type="text/css">
#duvar {position: absolute;top:0px; left: 0px;}
#duvar td { width: 161px; height: 100px;border: 5px solid gold; text-align: center; vertical-align: top;}
/*http://www.w3schools.com/css/css_table.asp*/
#pano {position: absolute;top:350px; left: 0px; }
img { width: 161px; height: 100px; }
</style>
</head>
<body>
<table id="duvar">
<tr>
<td> o </td>
<td> o </td>
<td> o </td>
<td> o </td>
<td> o </td>
</tr>
</table>
<div id="pano"> <h3>click images</h3>
<span>
<img src="http://wowturkey.com/tr84/k_ugursurmeli_Zs36.jpg" alt="Eleysallahü bi kafin abdeh-Kuluna Allah yetmez mi?-Zümer Suresi 36. Ayet">
</span>
<span>
<img src="http://wowturkey.com/tr86/k_Necmettin_K_Muhammed_Ali8thbeginning_19th.jpg" alt="19. Yüzyıldan Figüratif bir Osmanlı Hat Sanatı Örneği">
</span>
<span>
<img src="http://wowturkey.com/tr88/k_korgun_pic78.jpg" alt="gemi">
</span>
<span>
<img src="http://wowturkey.com/tr137/k_Ridvan_DINC_Ridvan_DINC_1.jpg" alt="Yıldız : Bismillahirrahmanirrahim_ Hilal : La ilehe illallah muhammedür rasullah">
</span>
<span>
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcQt47W1_aYnNfBfYqOLiaotnc8PHXXDPduNk76F6uxPqetP8K9BpQ" alt="besmele">
</span>
<span>
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcSA5k-EGh_WH-v-qyOaBfYHRaKwK9WGENkzOh_-8Ip-g0VJWNgwCwg" alt="simetrik besmele">
</span>
<span>
<img src="http://www.kalemguzeli.org/images/upload/DavutBektas_012.jpg" alt="hat ile Allah yazısı">
</span>
<span>
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcTdW2IUtlwY2ebN87Pv74cYukIwLwx9MQ6b97-ybKKErtI8zO_6" alt="besmele armut">
</span>
<span>
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRPDR-1C3O0kPbbuSBFGWCdc2yMTtVKUipPH6bqnTOvAiDodhkE" alt="besmele tuğrası">
</span>
<span>
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcQtGzNfHNqHNPaJE8ei5U_QnexxeV2bUKlxmK6GL6Ai1n7zcOgIbw" alt="">
</span>
</div>
<script type="text/javascript">
// http://www.sitepoint.com/forums/showthread.php?809776-Create-an-effect-in-javascript&
var A = [0,1,2,3,4];
var B = [], r;
var L = A.length;
for(var i=0; i< L; i++) {
r = Math.floor(Math.random() * A.length );
B[B.length]= A[r];
A.splice(r,1); // http://www.w3schools.com/jsref/jsref_splice.asp
}
// alert(B);
var n=0;
// resimleri duvara as
function duvaraAs(resim) {
var el= document.getElementById('duvar');
var td = el.getElementsByTagName('td');
//td[B[n]].innerHTML += resim.parentNode.innerHTML;
td[B[n]].innerHTML = resim.parentNode.innerHTML;
//resim.parentNode.innerHTML="";
n++;
if(n== B.length) {n=0; }
}
function imageClick() {
duvaraAs(this);
}
var images = document.getElementsByTagName('img'),
i;
for (i = 0; i < images.length; i += 1) {
images[i].onclick = imageClick;
}
</script>
</body>
</html>
search google
drag and drop javascript
I’m sorry because I was on vacation and came back today. His response is brilliant. Will look into the best implementations that I can give.
Again, thanks a lot.