Theo yêu cầu của bạn Thuấn (share4vnn.tk)
[FD's BlOg] - Một tiện ích nhỏ sử dụng Javascript, cho phép bạn tùy chỉnh việc hiển thị hình nền theo ý muốn của bạn. Chỉ với việc chọn ảnh muốn hiển thị và 1 cái click chuột vào button là bạn đã có thể thay đổi hình nền theo ý bạn.Hình ảnh minh họa :
☼ Bây giờ ta bắt đầu thực hiện:
A. Bước 1 : Trước tiên hãy thiết lập một số thuộc tính background cho thẻbody
- Vào bố cục
- vào chỉnh sửa code HTML
- Tìm đoạn code CSS của body
body {
margin:0;
padding:0;
font-size: small;
text-align:center;
color:$textColor;
line-height:1.3em;
background:#695641 url(link ảnh);
}
- Hãy chú ý tới dòng code màu xanh, hãy xóa nó đi (nếu trong code templatecủa blog bạn ko có dòng này thì thôi, nhưng nếu có phải xóa nó đi), và thêm 1 vài đoạn code màu đỏ như bên dưới:
body {
margin:0;
padding:0;
font-size: small;
text-align:center;
color:$textColor;
line-height:1.3em;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
- Giải thích về 3 đoạn code màu đỏ :
+ background-repeat:no-repeat; : code không cho ảnh nền lặp lại, nếu không có code này, khi thực hiện thủ thuật ảnh nền sẽ bị lặp lại.
+ background-attachment:fixed; : với đoạn code này, ảnh nền sẽ không bị dịch chuyển khi bạn trượt lên hoặc xuống trang.
+ background-position:center; : code xác định vị trí hiển thị của ảnh nền.
- Save template.
B. Bước 2 : Sau khi thực hiện xong bước trên ta tiếp tục chèn thêm đoạn code bên dưới vào trước thẻ đóng </head> (trong code template)
<script language="JavaScript">
var backImage = new Array();
backImage[0] = "link ảnh nền 1";
backImage[1] = "link ảnh nền 2";
backImage[2] = "link ảnh nền 3";
backImage[3] = "link ảnh nền 4";
backImage[4] = "link ảnh nền 5";
function changeBGImage(whichImage){
if (document.body){
document.body.background = backImage[whichImage];
}
}
function go1(){
if (document.selecter1.select1.options[document.selecter1.select1.selectedIndex].value != "none") {
location = document.selecter1.select1.options[document.selecter1.select1.selectedIndex].value
}
}
</script>
- nếu muồn thêm các ảnh nền khác thì cứ việc thêm dòng code này :backImage[5] = "link ảnh nền 6";
- Save template.
C. Bước 3 : Tạo một widget HTML/Javascript và dán code bên dưới vào:
<script type="text/javascript">
document.write('<form name="selecter1"><select name="select1" size=1>');
document.write('<option value=none>Select Background');
document.write('<option value="javascript:changeBGImage(0)">ảnh nền 1');
document.write('<option value="javascript:changeBGImage(1)">ảnh nền 2');
document.write('<option value="javascript:changeBGImage(2)">ảnh nền 3');
document.write('<option value="javascript:changeBGImage(3)">ảnh nền 4');
document.write('<option value="javascript:changeBGImage(4)">ảnh nền 5');
document.write('</select>');
document.write('<input type="button" value="Change" onclick="go1()">');
document.write('</form>');
</script>
- Tương tự như bước 2, khi thêm 1 ảnh nền nào đó thì ta phải thêm đoạn code này vào bước 3 :
document.write('<option value="javascript:changeBGImage(5)">ảnh nền 6');
Như vậy đã hoàn thành.
Chúc các bạn thành công.
Nguồn : chúng tôi sưu tầm từ nhiều nguồn
Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn
0 nhận xét:
Đăng nhận xét