Dalam berkreasi tampilan browser kita ingin mengganti-ganti tampilan di posisi div tertentu. Ini bisa dilakukan dilakukan dengan langkah-langkah sebagai berikut
Atau kalau ingin melihat secara keseluruhan:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Show Hide Div</title>
<style type="text/css">
<!--
#hemat, #exclusive, #lux {
margin: 0px;
padding: 0px;
height: 400px;
width: 900px;
position: absolute;
}
#hemat {
border: 2px solid #00CC00;
visibility: visible;
}
#exclusive{
border: 2px solid #CCCC00;
visibility:hidden;
}
#lux {
border: 2px solid #CC3366;
visibility:hidden;
}
#content {
position: absolute;
top: 410px;
}
-->
</style>
</head>
<body>
<div id="hemat">
<p><strong>Paket Hemat Lengkap: Rp 1,5 juta<br /> </strong></p>
<ul>
<li>Untuk website Company Profile, Gallery atau Product Catalog</li>
<li>Disain seperti <a href="http://www.victrans.co.id" target="_blank">www.victrans.co.id</a></li>
<li>Menu yang tersedia : Home, About Us, Product,Services, Articles,News,Gallery,Clients,Career, Gallery, Contact Us</li>
<li>Unlimited page </li>
<li>Unlimited product </li>
<li>Unlimited gallery</li>
<li>Contact Form</li>
<li>Order Form</li>
<li>CMS Proweb<br /> Teknologi yang memungkinkan pelanggan mengupdate sendiri isi websitenya</li>
<li>Nama domain .com. net, org</li>
</ul>
Info lebih lanjut
<a href="http://www.prowebpro.com/services/paket_website_hemat.php"> http://www.prowebpro.com/services/paket_website_hemat.php</a>
</div><!--end of #hemat-->
<div id="exclusive"><p><strong>Paket Exclusive Harga: 5 juta<br /> </strong></p>
<ul>
<li>Disain Exclusive</li>
<li>2 buah layout: Home dan dalam</li>
<li>Cocok untuk website Company Profile, Gallery atau Product Catalog</li>
<li>Contoh <a href="http://www.alfasolusi.com" target="_blank">www.alfasolusi.com</a></li>
<li>Menu yang tersedia : Home, About Us, Product,Services, Articles,News,Gallery,Clients,Career, Gallery, Contact Us</li>
<li>Unlimited page </li>
<li>Unlimited product </li>
<li>Unlimited gallery</li>
<li>Contact Form</li>
<li>Order Form</li>
</ul>
Info lebih lanjut
<a href="http://www.prowebpro.com/services/paket_website_exclusive.php">http://www.prowebpro.com/services/paket_website_exclusive.php</a>
</div>
<div id="lux">
<p><strong>Paket Lux Harga: 12 juta<br /> </strong></p>
<ul>
<li>Disain Exclusive</li>
<li>2 buah layout: Home dan dalam</li>
<li>Header bervariasi setiap menu</li>
<li>1 buah flash di Home</li>
<li>Cocok untuk website Company Profile, Gallery atau Product Catalog</li>
<li>Contoh <a href="http://www.demkasakti.com" target="_blank">www.demkasakti.com</a></li>
<li>Menu yang tersedia : Home, About Us, Product,Services, Articles,News,Gallery,Clients,Career, Gallery, Contact Us</li>
<li>Unlimited page </li>
<li>Unlimited product </li>
<li>Unlimited gallery</li>
<li>Contact Form</li>
<li>Order Form</li>
</ul>
<a href="http://www.prowebpro.com/services/paket_website_lux.php">http://www.prowebpro.com/services/paket_website_lux.php</a>
</div>
<div id="content">
<a href="#" onmouseover='document.getElementById("exclusive").style.visibility="hidden";document.getElementById("lux").style.visibility="hidden";document.getElementById("hemat").style.visibility="visible";'>Hemat</a>
<a href="#" onmouseover='document.getElementById("hemat").style.visibility="hidden";document.getElementById("lux").style.visibility="hidden";document.getElementById("exclusive").style.visibility="visible";'>Exclusive</a>
<a href="#" onmouseover='document.getElementById("hemat").style.visibility="hidden";document.getElementById("exclusive").style.visibility="hidden";document.getElementById("lux").style.visibility="visible";'>Lux</a>
</div>
</body>
</html>
Atau bisa juga silahkan melihat: pic/330-hide_div.html
Kunjungi www.prowebpro.com untuk menambah wawasan anda.