Remote Images !<small>AJAX</small>

Bagi sobat yang suka menampilkan gambar pada postingannya, dan image tersebut beresolusi besar! Bisa jadi akan memakan waktu loading dalam browsing ;) Sekarang bisa diakali dengan menggunakan sentuhan cerdik JavaScript :x Setelah melakukan praktek, dan menambahkan beberapa image berbagai resolusi, hasilnya cukup memukau layaw b-) Jika kita memiliki 10 atau lebih image dalam satu halaman single postingan, nanti yang tampak akan berupa links yg jika diklik links tersebut akan berubah menjadi gambar dalam satu area. Nah...pusing kan keterangannya ;)) :"> Letakan javascript diatas tag </head>

<script type="text/javascript">
function getImage(pImageURL) {
var img=new Image();
img.src=pImageURL;
document.getElementById('placeImage').innerHTML='<img border="0" src="'+pImageURL+'">';
return false;
}
</script>

Kode CSS

#placeImage {
background: #FFFFEE;
border: 3px solid #555555;
-moz-border-radius: 10px;
padding: 5px;
text-align: center;
font-weight: bold;
color: #FF0000;
}

Save. Ketika memosting, syntax yg mesti digunakan menjadi...<a href="#" onclick="return getImage('http://YOUR-LINK-IMAGE.jpg');">Image1</a><p><div id="placeImage">Show Image?</div></p>Ganti http://YOUR-LINK-IMAGE.jpg dengan gambar sobat. Jika ingin memasukan 10 image atau lebih, yaaa tinggal tulis ajah itu si syntaxnya menjadi 10 biji :P

<a href="#" onclick="return getImage('http://YOUR-LINK-IMAGE.jpg');">Image1</a>, <a href="#" onclick="return getImage('http://YOUR-LINK-IMAGE.jpg');">Image2</a>, <a href="#" onclick="return getImage('http://YOUR-LINK-IMAGE.jpg');">Image3</a>, <a href="#" onclick="return getImage('http://YOUR-LINK-IMAGE.jpg');">
Image4</a>, <a href="#" onclick="return getImage('http://YOUR-LINK-IMAGE.jpg');">Image5</a>, <a href="#" onclick="return getImage('http://YOUR-LINK-IMAGE.jpg');">Image6</a>, <a href="#" onclick="return getImage('http://YOUR-LINK-IMAGE.jpg');">
Image7</a>, <a href="#" onclick="return getImage('http://YOUR-LINK-IMAGE.jpg');">Image8</a>, <a href="#" onclick="return getImage('http://YOUR-LINK-IMAGE.jpg');">Image9</a>, <a href="#" onclick="return getImage('http://YOUR-LINK-IMAGE.jpg');">
Image10</a><p><div id="placeImage">Show Image?</div></p>...

Ketika praktek menggunakan javascript bawaan yg buat, Beben si bloglang menambahkan menjadi...

<script type="text/javascript">
//<![CDATA[
function getImage(pImageURL) {
var img=new Image();
img.src=pImageURL;
document.getElementById('placeImage').innerHTML='<img border="0" width="100%" height="auto" src="'+pImageURL+'">';
return false;
}
//]]>
</script>

Maka nanti gambar kecil juga tetap akan menjadi besar ketika ditengok! Silahkan mau pakai yg mana javascriptnya \m/ For details explanation, just visit http://www.rodsdot.com/javascript/Remote-Scripting-Images-%28No-Need-For-AJAX%29.asp