Membuat gambar link

Gambar link kali ini adalah gimana membuat website yang berupa gambar dan text. Ketika gambar dilewati mouse (hover) maka ditempat yang berbeda, text akan menunjukkan keterangan dari gambar tersebut. Atau bisa sebaliknya.

View Demo

Cara Membuatnya

siapkan dulu folder images untuk menaruh gambar-gambarnya

buat file html dan simpan dengan nama index.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Inkubis | Gambar Link</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="page-wrap">
<h1>Gambar Link</h1>
<div class="people">
<a href="#tian" id="tian">
<span class="name">Putri Titian Asih</span><br />
Putri Titian Asih, biasa dipanggil Tian atau Putri Titian lahir di Palembang, 7 April 1991.
<span class="photo">
<img src="images/putri-titian.jpg" alt="Putri Titian Asih" />
</span> </a>

<a href="#gutawa" id="gutawa">
<span class="name">Gita Gutawa</span><br />
Aluna Sagita Gutawa atau lebih dikenal dengan Gita Gutawa lahir di Jakarta, 11 Agustus 1993.
<span class="photo">
<img src="images/gita-gutawa.jpg" alt="Gita Gutawa" />
</span>
</a>
</div>
</div>

</body>
</html>

buat lagi untuk css nya dan simpan dengan nama style.css


*                    { margin: 0; padding: 0; }
body                { font: 12px Helvetica, Sans-Serif; }
#page-wrap            { width: 600px; margin: 50px auto; }
h1                    { font-size: 30px; letter-spacing: -1px; margin: 0 0 20px 0; }
.people                { position: relative; }
a                    { text-decoration: none; color: #222; display: block;
margin: 0 0 0 270px; outline: none; padding: 5px; }
a img                { border: 1px solid #FA00EB; }
a:hover                { background: #ffefcd; }
a .name                { font: 18px Georgia, Serif; }
a:hover .name        { color: #9601FF; font-weight: bold; }
a:hover img            { border: 3px solid #BD00FB; margin: -4px; }
a .photo            { display: block; position: absolute; width: 125px; height: 125px; }
#tian .photo        { top: 0; left: 0; }
#gutawa .photo        { top: 0; left: 134px; }
#gail .photo        { top: 134px; left: 0; }
#padma .photo        { top: 134px; left: 134px; }

lihat didalam browser, Mudah Bukan

- Selamat Mencoba -

3 Responses to “Membuat gambar link”

  1. SURABAYA KREATIF  on March 3rd, 2009

    sangat kreatif!

  2. Budi Setiawan  on September 10th, 2009

    trims informasinya salam sukses


Leave a Reply