Cara Membuat Galeri Foto Sederhana Menggunakan HTML, CSS Dan Javascript
Muh. Ashhar Bustan

Cara Membuat Galeri Foto Sederhana Menggunakan HTML, CSS Dan Javascript

Galeri foto digunakan untuk menata sekumpulan foto atau gambar sehingga bisa ditampilkan dengan lebih menarik dan atraktif yang tentunya akan membuat orang lain tertarik untuk melihatnya. Kali ini kita akan membuat galeri foto sederhana menggunakan HTML, CSS dan Javascript. 

Pertama-tama buat sebuah folder untuk menyimpan foto atau gambar, misalnya folder images. Letakkan semua foto atau gambar di dalam folder tersebut.

Baca Juga: Karakteristik Bahasa Pemrograman JAVA


Selanjutnya ketikkan source code berikut dan simpan dengan nama index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Galeri Foto Sederhana Menggunakan HTML, CSS dan Javascript</title>

<style type="text/css">
body {
	background: #222;
	color: #eee;
	margin-top: 20px;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
a {
	color: #FFF;
}
a:hover {
	color: yellow;
	text-decoration: underline;
}
.thumbnails img {
	height: 80px;
	border: 4px solid #555;
	padding: 1px;
	margin: 0 10px 10px 0;
}

.thumbnails img:hover {
	border: 4px solid #00ccff;
	cursor:pointer;
}

.preview img {
	border: 4px solid #444;
	padding: 1px;
	width: 800px;
}
</style>

</head>
<body>

<div class="gallery" align="center">
	<h2>Galeri Foto</h2>
	<p>Contoh Galeri Foto Menggunakan HTML, CSS dan Javascript</p>

	<br />

	<div class="thumbnails">
	<img onmouseover="preview.src=img1.src" name="img1" src="images/img1.jpg" alt=""/>
	<img onmouseover="preview.src=img2.src" name="img2" src="images/img2.jpg" alt=""/>
	<img onmouseover="preview.src=img3.src" name="img3" src="images/img3.jpg" alt=""/>
	<img onmouseover="preview.src=img4.src" name="img4" src="images/img4.jpg" alt=""/>
	<img onmouseover="preview.src=img5.src" name="img5" src="images/img5.jpg" alt=""/>
	</div><br/>

	<div class="preview" align="center">
		<img name="preview" src="images/img1.jpg" alt=""/>
	</div>

</div>


</body>
</html>

Pada baris <img onmouseover="preview.src=img1.src" name="img1" src="images/img1.jpg" alt=""/> sesuaikan dengan nama folder dan nama foto atau gambar Anda.

Baca Juga: Source Code Bridging SIMRS GOS Dan SEP BPJS Untuk Insert SEP Versi Terbaru Dengan PHP


Baca Juga: Cara Membuat dan Memasang Favicon di Blog atau Website


YANG LAIN:

Komentar

Cari Artikel Lainnya Disini