hotaphu Thành viên cấp 2
Tổng số bài gửi : 112 Join date : 28/10/2009 Đến từ : cntt2k9
| Tiêu đề: Image Map!bài viết được tổng hợp từ nhiều nguồn khác nhau. Sat Oct 09, 2010 3:46 am | |
| | | | | bài viết được tổng hợp từ nhiều nguồn khác nhau. ---------------------------------------------- - Bạn đã biết Image Map dùng làm gì chưa?
Với mỗi bức ảnh đã được hiện thỉ trên website của bạn, bạn có thể sử dụng Image Map để tạo ra nhiều vùng trên một bức ảnh và với mỗi vùng bạn có thể gán cho nó một siêu liên kết riêng.
VD:DEMO - Code:
-
<map name="dt"> <area href="http://hotaphu.tk" shape=rect coords="37,192,143,47" target="_blank"> <area href="http://cntt2k9.tk" shape=poly coords="38,406,78,391,123,389,107,325,45,325,60,361"target="_blank"> <area href="http://zing.vn" shape=circle coords="311,302,109" target="_blank"> </map> <img src="h2.jpg" usemap="#dt"/> -các thẻ và thuộc tính cần quan tâm: thẻ <AREA> thuộc tính SHAPE:xác định hình dạng của vùng chọn,với các giá trị rect(dạng hình chử nhật),poly(hình đa giác),circle(hình tròn).Thuộc tính COORDS:xác định các vị trí cần thiết để tạo nên vùng chọn,tùy vào hình dạng được xác định trước mà COORDS có cách xác định riêng. Để hiểu rõ nó hơn,mình sẻ quay lại VD và giải thích cách chọn vùng trên ảnh. Dùng paint để mổ xẻ vấn đề. lưu ý các thông số phía dưới thanh trạng thái.
- cách xác định tọa độ 1 điểm:khi rê chuột vào tâm đường tròn(màu trắng),thanh trạng thái sẻ xuật hiện 2 thông số 311,302.Đó là tọa độ của tâm đường tròn trên.Với 311 :điểm sẻ cách lề trái 311 pixels,302:điểm cách lề trên cùng 302 pixels. - Để tạo vùng chọn poly:cần xác định tất cả tọa độ các đỉnh,sẻ xác định lần lượt các điểm theo 1 chiều nhất định(chiều kim đồng hồ,hay chiều ngược lại củng dc).Vì vậy đối với lục giác trên(màu tím tím)sẻ có 6 đỉnh cần xác định với 12 thông số,mõi thông số cách nhau dấu phẩy. - Code:
-
<area href="http://cntt2k9.tk" shape=poly coords="38,406,78,391,123,389,107,325,45,325,60,361"target="_blank"> - để tạo vùng rect:có thể xác định như làm với poly,nhưng để đơn giản hơn chỉ cần xác định tọa độ 2 đỉnh đối nhau là dc(như trên hình:2 đỉnh cùng màu),vì thế chỉ cần 4 thông số. - Code:
-
<area href="http://hotaphu.tk" shape=rect coords="37,192,143,47" target="_blank"> - Đối với circle:cần xác định 3 thông số,2 thông số đầu là tọa độ tâm đường tròn,thông số cuối là bán kính đường tròn.Tâm đường tròn có thể xác định tương đối như trên hình,sau khi xác định được tâm,rùi kẻ 1 đường thẳng từ tâm đến đường tròn(như trên hình) thông số thứ 3 sẻ là 109. - Code:
-
<area href="http://zing.vn" shape=circle coords="311,302,109" target="_blank"> Để dể tham khảo các bạn down DEMO về! | | | | |
|
|
cutuan527 Moderators
Tổng số bài gửi : 1051 Join date : 26/04/2009 Age : 33 Đến từ : Vĩnh Long
| Tiêu đề: Re: Image Map!bài viết được tổng hợp từ nhiều nguồn khác nhau. Sat Oct 09, 2010 6:48 pm | |
| |
|
hotaphu Thành viên cấp 2
Tổng số bài gửi : 112 Join date : 28/10/2009 Đến từ : cntt2k9
| Tiêu đề: Re: Image Map!bài viết được tổng hợp từ nhiều nguồn khác nhau. Sat Oct 09, 2010 6:59 pm | |
| |
|
Sponsored content
| Tiêu đề: Re: Image Map!bài viết được tổng hợp từ nhiều nguồn khác nhau. | |
| |
|