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

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
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

Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
6,650
Được Like
3,939
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

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom