Sublime Text
<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <meta charset="utf-8"> </head> <body> <map name="the-face"> <area shape="circle" coords="117,203,30" href="../html/default.html" target="_blank"> <area shape="circle" coords="218,203,30" href="../css/default.html" target="_blank"> <area shape="rect" coords="130,250,205,286" href="../javascript/default.html" target="_blank"> <area shape="rect" coords="126,292,210,332" href="../mysql/default.html" target="_blank"> </map> <img src="../image/face.jpg" usemap="#the-face"> <p>- Khi nhấp vào mắt trái & mắt phải thì các bạn sẽ thấy vùng có hình tròn.</p> <p>- Khi nhấp vào mũi & miệng thì các bạn sẽ thấy vùng có hình chữ nhật.</p> <p style="line-height:25px">- <u>Lưu ý</u>: Các bạn nên trải nghiệm ví dụ này bằng trình duyệt Chrome hoặc Opera, bởi vì có một số trình duyệt khi chúng ta nhấp vào vùng thì nó không hiển thị đường viền bao xung quanh vùng, cho nên chúng ta không thể nào biết được vùng có dạng hình gì.</p> </body> </html>
<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <meta charset="utf-8"> </head> <body> <map name="the-face"> <area shape="circle" coords="117,203,30" href="../html/default.html" target="_blank"> <area shape="circle" coords="218,203,30" href="../css/default.html" target="_blank"> <area shape="rect" coords="130,250,205,286" href="../javascript/default.html" target="_blank"> <area shape="rect" coords="126,292,210,332" href="../mysql/default.html" target="_blank"> </map> <img src="../image/face.jpg" usemap="#the-face"> <p>- Khi nhấp vào mắt trái & mắt phải thì các bạn sẽ thấy vùng có hình tròn.</p> <p>- Khi nhấp vào mũi & miệng thì các bạn sẽ thấy vùng có hình chữ nhật.</p> <p style="line-height:25px">- <u>Lưu ý</u>: Các bạn nên trải nghiệm ví dụ này bằng trình duyệt Chrome hoặc Opera, bởi vì có một số trình duyệt khi chúng ta nhấp vào vùng thì nó không hiển thị đường viền bao xung quanh vùng, cho nên chúng ta không thể nào biết được vùng có dạng hình gì.</p> </body> </html>