<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>
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...background: #FFFFEE;
border: 3px solid #555555;
-moz-border-radius: 10px;
padding: 5px;
text-align: center;
font-weight: bold;
color: #FF0000;
}
<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 :PKetika praktek menggunakan javascript bawaan yg buat, Beben si bloglang menambahkan menjadi...<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>...
<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
//<![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>
Tidak ada komentar:
Posting Komentar