Mar 4, 2011

Kod Untuk Gambar Dalam Scrolling Window

Ada kawan tanya boleh ke masukkan gambar dalam scrolling window? kita dah cuba buat jawabnya boleh.

Contoh:


Kod dia macam ni:


<div style="overflow: auto; width: 270px; height: 383px;">
<table border="1" cellpadding="0" cellspacing="0" style="margin-left: 10px; width: 220px;"><tbody>

<tr>
<td style="padding: 10px;"><img border="0" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQu9M_AITtFPUjka_67SGid-EIvRVyRxMomiU4w_pqFRtUS-aBYu20wYVAICX5aeMgk1kRpxXyNW69UGLyUmYZKjmoTbposdhCw8WV9jnk57msDNMymtJJw0NMXQJ3LMaEBEy8uFhA2X4/s320/red+rose.jpg" width="200" /></td>
</tr>

<tr>
<td style="padding: 10px;"><img border="0" height="154" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0UNlnoViGgxjjylq96D60iFOW-PTYE4Uo1v5zQ6k823zXxns7VWpMo59h0SIpmiB2X-sKGIcRLWyQxJHEomJOV96dVX-1nygMJwiFbsKxKqlPPlYMXnhRo09piBLLc04NU2YZt2fVH9A/s320/500hrspaintusingmspaint.jpg" width="200" /></td>
</tr>

<tr>
<td style="padding: 10px;"><img border="0" height="134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPXsH6rmPAVg3sRb5gp6R7tXvJVHTZ5UNDp99lNM1W3zr4E80k6mF27AZM3XSQoFs5KG3rxaKpvEjSJ2BdsVAajzfcKANFH9v8DkVvgKfMRWCi9MPlGPZXMdtqwvS5e4D8E_DRGWPqzkE/s320/afghandashtelaili.jpg" width="200" /></td>
</tr>

<tr>
<td style="padding: 10px;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkV6DQrvM92lyaG9vh3G8CIiiNOebkbF2Z5Cy4tfOfSCAuCoEEswJB8PjcPKMRIk9fs7Walk_i32cIL6TCczyKYpDDoR76bSxWIVscr-MFEsu5s96WF1apd_glTPIsVUjuryTRrKwqIbk/s200/afghanbandeamirbamiyan.jpg" width="200" /></td>
</tr>

</tbody></table>
</div>

Dalam kod di atas:

ukuran width untuk scrolling window adalah 270px dan ukuran height adalah 383px.

Table dalam scrolling window - ukuran width table adalah 220px dengan margin kirinya berukuran 10px.

Empat (4) keping gambar di dalamnya, warna biru adalah kod untuk gambar tanpa hyperlink. Ukuran width gambar adalah 200px

Boleh pinda ukuran width dan height yang sesuai dengan pos blog sendiri.

Kalau tak pakai kod table pun boleh juga terus masukkan kod gambar dalam kod scrolling window:







kod dia macam ni:


<div style="overflow: auto; width: 270px; height: 383px;">

<img border="0" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQu9M_AITtFPUjka_67SGid-EIvRVyRxMomiU4w_pqFRtUS-aBYu20wYVAICX5aeMgk1kRpxXyNW69UGLyUmYZKjmoTbposdhCw8WV9jnk57msDNMymtJJw0NMXQJ3LMaEBEy8uFhA2X4/s320/red+rose.jpg" width="200" />
<img border="0" height="154" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0UNlnoViGgxjjylq96D60iFOW-PTYE4Uo1v5zQ6k823zXxns7VWpMo59h0SIpmiB2X-sKGIcRLWyQxJHEomJOV96dVX-1nygMJwiFbsKxKqlPPlYMXnhRo09piBLLc04NU2YZt2fVH9A/s320/500hrspaintusingmspaint.jpg" width="200" />
<img border="0" height="134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPXsH6rmPAVg3sRb5gp6R7tXvJVHTZ5UNDp99lNM1W3zr4E80k6mF27AZM3XSQoFs5KG3rxaKpvEjSJ2BdsVAajzfcKANFH9v8DkVvgKfMRWCi9MPlGPZXMdtqwvS5e4D8E_DRGWPqzkE/s320/afghandashtelaili.jpg" width="200" />
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkV6DQrvM92lyaG9vh3G8CIiiNOebkbF2Z5Cy4tfOfSCAuCoEEswJB8PjcPKMRIk9fs7Walk_i32cIL6TCczyKYpDDoR76bSxWIVscr-MFEsu5s96WF1apd_glTPIsVUjuryTRrKwqIbk/s200/afghanbandeamirbamiyan.jpg" width="200" />

</div>


Sekian, selamat mencuba dan selamat berjaya.

Sebarang pautan balik dari blog anda adalah sangat-sangat dihargai. URL http://calipso-tutorialblogger.blogspot.com/.

Salam hormat dari

3 comments:

Unknown said... [Balas komen ini]

Best Bro....

Unknown said... [Balas komen ini]

makasih atas informasinya yang sangat berharga, saya ada disini http://www.s-surya62.blogspot.com

eyda !nukilanku! said... [Balas komen ini]

thank for the information
http://eydanurfaraheyda.blogspot.com/

Post a Comment