Tạo Menu hình ảnh bằng Javascript - 14 August 2010 - All 4 You
Friday, 24-Feb-2017, 4:57 PM
Welcome Guest | RSS
Main » 2010 » August » 14 » Tạo Menu hình ảnh bằng Javascript
10:49 AM
Tạo Menu hình ảnh bằng Javascript


Việc tạo một slide không cần dùng phần mềm là một công việc thú vị của các webmaster. Tuy nhiên nếu bạn không phải là chuyên gia về JAVASCRIPT thì vấn đề không dễ chút nào. Hãy tập là chuyên gia bằng cách vận dụng bài viết sau. 

I. Chuẩn bị 

* 05 tấm hình định dạng jpg có tên tương ứng là img1, img2, img3, img4, img5, 
* Upload Tất cả lên host của bạn vào một thư mục nào đó. 

II. Tiến hành công việc

1. Bạn copy đoạn sau: 

Code
<script type="text/javascript" src="http://unetvn.tk/js/imagemenu.js"> 
</script>

Dán đoạn code trên vào trước thẻ </head> 

2. Chọn một mãnh đất phù hợp để đặt sile của bạn 
3. Copy đoạn code sau dán vào mãnh đất mà bạn vừa chọn đó: 

Code
<table width="550px"> 
<tr> 
<td align="center" style="cursor:pointer;float:left;background: url(/demo/img1.jpg) repeat scroll 0%; width:80px;height: 200px;border-color:white;border-style: solid;border-right-width:2px;border-left-width:0px;border-top-width:0px;border-bottom-width:0px;color:white;" id="img1" onmouseover="enlargeimg(this.id)" onmouseout="actualimg()"><a href='link trang' style='text-decoration:none;'>Menu1</a></td> 
<td align=center style="cursor:pointer;float:left; background: url(/demo/img2.jpg) repeat scroll 0%; width:80px;height: 200px;border-color:white;border-style: solid;border-right-width:2px;border-left-width:0px;border-top-width:0px;border-bottom-width:0px;color:white;" id="img2" onmouseover="enlargeimg(this.id)" onmouseout="actualimg()"><a href='link trang' style='text-decoration:none;'>Menu2</a></td> 
<td align=center style="cursor:pointer;float:left; background: url(/demo/img3.jpg) repeat scroll 0%; width:80px;height: 200px;border-color:white;border-style: solid;border-right-width:2px;border-left-width:0px;border-top-width:0px;border-bottom-width:0px;color:white;" id="img3" onmouseover="enlargeimg(this.id)" onmouseout="actualimg()"><a href='link trang' style='text-decoration:none;'>Menu3</a></td> 
<td align=center style="cursor:pointer;float:left; background: url(/demo/img4.jpg) repeat scroll 0%; width:80px;height: 200px;border-color:white;border-style: solid;border-right-width:2px;border-left-width:0px;border-top-width:0px;border-bottom-width:0px;color:white;" id="img4" onmouseover="enlargeimg(this.id)" onmouseout="actualimg()"><a href='link trang' style='text-decoration:none;'>Menu4</a></td> 
<td align=center style="cursor:pointer;float:left; background: url(/demo/img5.jpg) repeat scroll 0%; width:80px;height: 200px;border-color:white;border-style: solid;border-right-width:2px;border-left-width:0px;border-top-width:0px;border-bottom-width:0px;color:white;" id="img5" onmouseover="enlargeimg(this.id)" onmouseout="actualimg()"><a href='link trang' style='text-decoration:none;'>Menu5</a></td> 
</tr> 
<tr><td colspan=4><div align=center style="font-size: 10px; color: #dadada;" id="dumdiv"> 
       </div> 
</td></tr> 
</table>

4. Bạn thay đổi các giá trị trên đoạn code trên cho phù hợp với giao diện tổng thể của website bạn rồi SAVE lại nhé. 
Category: Menu | Views: 1077 | Added by: all4u | Tags: menu | Rating: 2.0/1
Total comments: 0
Only registered users can add comments.
[ Registration | Login ]
Login Form
Nhận bài qua Email


Đăng ký để nhận thông tin
và bài post mới nhất qua email

Chuyên mục
Toàn tập Dmon/ Ucoz [22]
Hướng dẫn thiết kế website với dịch vụ của Dmon.com/ Ucoz.com,...
Code [18]
Các code giúp bạn cá nhân hóa trang web của bạn
Design [21]
Các công cụ web giúp thiết kế web....
Featured Post - Image Gallery [15]
Menu [5]
Các Menu đẹp cho web của bạn
Tab Content [6]
Templates [3]
Toàn bộ thiết kế Template
Khác [0]
Rearch
Thống kê

Total online: 1
Guests: 1
Users: 0
Bản đồ truy cập
Locations of visitors to this page