1997: Tutorial : Background boleh Tukar Tukar

Tutorial : Background boleh Tukar Tukar

13 December 2012

Ok. Mungkin korang susah sikit nak faham apa yang Izzat maksudkan dengan Background boleh tukar tukar kan?
Click Gambar untuk ke Live Preview
Ok dah Faham macam mana Benda ni boleh berfungsi? Nak buat?

Lets start.

I. Paste code ni atas </Style>
#bg a img{
width:50px;
Margin:5px;
height:50px;
border: 2px solid #EEE;
}
#bg a:hover img{
border: 2px solid #bdebff;
}
Edit apa yang korang rasa perlu.

II. Then paste code ni dekat mana korang nak gadget ni terletak.
<div id="bg">
<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'></script>
<script>
$(document).ready(function(){
            $("#bgcolor1").click(function(){
                        $("body").css({"background":"url(LINK GAMBAR 1)"});
            });
});
$(document).ready(function(){
            $("#bgcolor2").click(function(){
                        $("body").css({"background":"url(LINK GAMBAR 2)"});
            });
});
$(document).ready(function(){
            $("#bgcolor3").click(function(){
                        $("body").css({"background":"url(LINK GAMBAR 3)"});
            });
});
</script>

<center>
<a href="javascript:void(O)" id='bgcolor1'><img src="LINK GAMBAR 1" /></a>
<a href="javascript:void(O)" id='bgcolor2'><img src="LINK GAMBAR 2" /></a>
<a href="javascript:void(O)" id='bgcolor3'><img src="LINK GAMBAR 3" /></a>
</center></div>
</div>
Yang Izzat warnakan tu, Makesure pasangan dia sama. Merah sama dengan merah. Biru sama dengan biru.

Preview. Kalau menjadi save. Kalau tak mohon korang Ctrl+Z. Kemudian Report. 
Goodluck!

3 comments:

  1. kenapa tak jumpa ye code 'style' tu ?

    ReplyDelete
  2. Oh.. tu sebab awak pakai code Template Designer. Ni untuk Code Classic. Sorry :|

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...