# Navigation
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
-
2020-02-16 23:30:07
Contoh Soal CPNS Lengkap Dengan Jawabannya (TIU, TWK, TKP)
-
2020-02-15 04:11:51
Tips Lulus Tes CPNS Menggunakan CAT
-
2020-02-15 03:58:24
5 Tanda Browser Terjangkit Malware Dan Cara Mengatasinya
-
2020-02-20 20:26:10
Materi Soal Seleksi Kompetensi Bidang (SKB) CPNS Penjaga Tahanan
-
2020-02-15 04:12:44
Pengumuman Jadwal Pelaksanaan Seleksi Kompetensi Bidang (SKB) CPNS Kemenkumham
Serupa
-
2017-08-02 08:55:20
Cara Membuat dan Memasang Favicon di Blog atau Website
-
2017-08-22 08:23:05
Cara Membuat Sitemap News Google Menggunakan PHP
-
2017-07-27 03:42:42
Mengenal Bahasa Pemrograman Java
-
2017-08-17 20:57:18
Cara Membuat Galeri Foto Menggunakan Codeigniter
Terpopuler
-
1
Contoh Soal Tes Wawasan Kebangsaan (TWK) CPNS Dan Jawabannya
Dibaca: 529100 -
2
-
3
Contoh Soal Tes Intelegensi Umum CPNS Dan Pembahasannya
Dibaca: 380021 -
4
-
5