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

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,827
Được Like
11,118
DEMO: Nút HOME tại góc phải của diễn đàn http://cnm24h.tk/

1.png

Lúc bình thường

2.png

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.
Mã:
<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
Mã:
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​
 

Đính kèm

  • Ảnh.zip
    20.7 KB · Lượt xem: 8
  • Like
Reactions: THB

THB

Admin - Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
6,656
Được Like
3,942
bổ sung hình cho dễ hiểu hơn.
trước
home01.jpg


sau
home00.jpg
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom