Nút Home có thể thay đổi hình ảnh

[PVS]

DEMO: Nút HOME tại góc phải của diễn đàn http://cnm24h.tk/

Lúc bình thường

Lúc rê chuột vào
​

Diễn giải: Khi người dùng đưa trỏ chuột vào nút HOME thì sẽ thấy một hình ảnh khác với hình ảnh ban đầu. Khi đưa chuột ra thì lại có một hình ảnh mới.

Code: Chép đoạn code dưới đây và dán vào template footer. Tiếp theo, bạn chỉnh sửa lại các link:
1) Link trang chủ (thay bằng địa chỉ trang riêng của bạn)
2) Link hình ảnh (bạn có thể tùy chọn link các hình ảnh nút HOME bất kỳ đâu để thay vào)
3) Link hình ảnh mũi tên lên, xuống.
​

<a style="position: fixed; Bottom: 250px; right: 42px;" href="javascript:scroll(0,0)" title="Về đầu trang">
<img src="link web/images/muitenlen.png" width="30" height="30"></a>
<a style="position: fixed; Bottom: 130px; right: 7px;" title="Về trang chủ" href="http://vnxf.vn/">
<img src="link web/images/ngoinha.gif" width="100" height="90" onmouseover="this.src='link ảnh (nên để link ảnh logo web của bạn)';" onmouseout="this.src='link web/images/ngoinha.gif';"></a>
<a style="position: fixed; Bottom: 65px; right: 42px;" href="javascript:scroll(0,9999999)" title="Xuống cuối trang">

<img src="link web/images/muitenxuong.png" width="30" height="30"></a>

Các bạn download file đính kèm giải nén ra và upload ảnh vào forder images trong host nhé, nếu upload chỗ khác các bạn phải sửa lại link ảnh trong code trên.

Ngoài ra, bạn cũng có thể thay các nút mũi tên lên xuống theo sở thích cũng như tạo hình ảnh thay đồi như nút HOME bằng cách gắn thêm đoạn code sau vào cuối link hình ảnh ban đầu

onmouseover="this.src='LINK HÌNH MŨI TÊN KHI RÊ CHUỘT VÀO ';"
onmouseout="this.src='LINK HÌNH MŨI TÊN KHI RỜI CHUỘT RA';"

Chúc các bạn thành công.

Nguồn: bangvu.net​

 

[THB]

bổ sung hình cho dễ hiểu hơn.
trước

sau