ni satu lagi tutorial yang baru saya masukkan..lebih kurang macam slide jugak la.untuk gambr..try tgk contoh ni.
yg kod dibawah ni...masukkan kat bahagian <head> sebelum </head>
<!--
/* ubahsuai ikut suka anda. */
.slideshow {
font-family:Arial, Helvetica, sans-serif;
width:336px;
height:375px;
overflow:hidden;
background-color:#000000;
color:#FFFFFF;
border:5px solid #99CC00;
}
.slideshow > ul {
margin: 0;
padding: 0;
}
.slideshow > ul > li {
display:inline;
margin:0px;
padding:0px;
font-size:1px;
margin-right: -1px;
}
.slideshow > ul > li > div {
display: none;
text-decoration: none;
float:left;
}
.slideshow > ul > li > div > p {
font-size:11px;
text-align:center;
padding:10px 0px 0px 0px;
margin:0px;
color:#FFFFFF;
}
.slideshow > ul > li > div > a > img {
border:2px solid #FFFFFF;
width:332px;
}
.slideshow > ul > li > img {
border:2px solid #FFFFFF;
margin:0px;
padding:0px;
width:80px;
height:60px;
}
/* Shows slides when mouse pointer is over a thumbnail image */
.slideshow > ul > li:hover > div {
display: block;
}
/* Highlights the thumbnail image when mouse pointer is over it */
.slideshow > ul > li:hover > img {
border-color:#FF6600;
}
-->
</style>
yang code ni plak...masukkan dalam bahagian <body>
<div class="slideshow">
<ul>
<li>
<img src="images/calm_waters.jpg" />
<!--
The slide contents inside DIV.
Put anything you like to show.
-->
<div>
<a href="images/calm_waters.jpg" title="Click to see full image" target="_blank">
<img src="images/calm_waters.jpg" alt="Calm waters" />
</a>
<p>Relaxing calm waters back home in <a href="http://ilo.wikipedia.org/wiki/Samboan,_Cebu" target="_blank">Samboan</a>, Cebu, Philippines.</p>
</div>
</li>
<li>
<img src="images/summer_pebbles.jpg" />
<div>
<a href="images/summer_pebbles.jpg" title="Click to see full image" target="_blank">
<img src="images/summer_pebbles.jpg" alt="Summer Pebbles" />
</a>
<p>What a nice place to spend summer. Those mountains belong to Bais, Negros, Philippines</p>
</div>
</li>
<li>
<img src="images/fluvial_parade.jpg" />
<div>
<a href="images/fluvial_parade.jpg" title="Click to see full image" target="_blank">
<img src="images/fluvial_parade.jpg" alt="Fluvial Parade" />
</a>
<p>The fluvial parade commemorating the arrival of Child Jesus Christ in Cebu City and the birth of Christianity in the Philippines.</p>
</div>
</li>
<li>
<img src="images/church_cross.jpg" />
<div>
<a href="images/church_cross.jpg" title="Click to see full image" target="_blank">
<img src="images/church_cross.jpg" alt="Church Cross" />
</a>
<p>Not sure where we took this picture but it's magestic.</p>
</div>
</li>
</ul>
</div>
selamat mencuba...
Saturday, January 31, 2009
Subscribe to:
Post Comments (Atom)
-
Tiada Link
Harap maaf. Tiada update download yang terbaru. Ada sapa2 nak sumbangkan benda untuk didownload?
-
Tiada Link
Harap maaf. Tiada update download yang terbaru. Ada sapa2 nak sumbangkan benda untuk didownload?
-
Tiada Link
Harap maaf. Tiada update download yang terbaru. Ada sapa2 nak sumbangkan benda untuk didownload?
-
Tiada Link
Harap maaf. Tiada update download yang terbaru. Ada sapa2 nak sumbangkan benda untuk didownload?
0 comments:
Post a Comment
komen anda sangat dialu-aluan