# Navigation

Cara Membuat Galeri Foto Sederhana Menggunakan HTML, CSS Dan Javascript
  • By Admin
  • 17 Aug 2017
    • Share

Cara 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.

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.


YANG LAIN:
Terbaru
Serupa
Terpopuler