Simple tutorial how to : marque image (gambar bergerak dengan marque) dan simple galery photo

Untuk membuat gambar bergerak dengan marque (marque image) cukup copas kode berikut pada tempat dimana image bergerak tersebut akan dimunculkan.

---

<marquee onmouseout="this.start()" direction="left" align="center" scrollamount="2" onmouseover="this.stop()" width="100%" height="100"><img src="filegambar" alt=""/> </marquee>

---

align bisa diganti dengan left atau right, sebagai posisi awal gambar akan bergerak, dan direction bisa diganti dengan up, down, right sebagai arah gambar akan bergerak.



Untuk membuat galery photo sederhana mode tambahkan kode css berikut:

---

.hoverbox
{
float:center;
width: 725px;
height: 510px;
cursor: default;
list-style: none;
}

.hoverbox a
{
cursor: default;
}

.hoverbox a .preview
{
display: none;
}

.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -30px;
left: -30px;
z-index: 1;
}

.hoverbox img
{
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 100px;
height: 75px;
}

.hoverbox li
{
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline-table;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}

.hoverbox .preview
{
border-color: #000;
width: 400px;
height: 300px;
}

---

lalu pada html masukan kode berikut

---

<ul class="hoverbox">

<li>

<a href="#"><img src="img/fo/2.jpg" alt="description" /><img src="img/fo/2.jpg" alt="description" class="preview" /></a></li>

<li>

<a href="#"><img src="img/fo/3.jpg" alt="description" /><img src="img/fo/3.jpg" alt="description" class="preview" /></a></li>

<li>

<a href="#"><img src="img/fo/4.jpg" alt="description" /><img src="img/fo/4.jpg" alt="description" class="preview" /></a></li>

<li>

<a href="#"><img src="img/fo/5.jpg" alt="description" /><img src="img/fo/5.jpg" alt="description" class="preview" /></a></li>

<li>

<a href="#"><img src="img/fo/6.jpg" alt="description" /><img src="img/fo/6.jpg" alt="description" class="preview" /></a></li>

<li>

<a href="#"><img src="img/fo/7.jpg" alt="description" /><img src="img/fo/7.jpg" alt="description" class="preview" /></a></li>

<li>

<a href="#"><img src="img/fo/8.jpg" alt="description" /><img src="img/fo/8.jpg" alt="description" class="preview" /></a></li>

<li>

<a href="#"><img src="img/fo/9.jpg" alt="description" /><img src="img/fo/9.jpg" alt="description" class="preview" /></a></li>

<li>

<a href="#"><img src="img/fo/10.jpg" alt="description" /><img src="img/fo/10.jpg" alt="description" class="preview" /></a></li>

</ul>

---

Image bisa ditambah atau dikurangi sesuai kebutuhan pada web.

No Offence No Hearth Feelings

Semoga Bermanfaat