JAVA - NIIT-ICT: JavaScript - Bản đồ hình ảnh

Khóa học lập trình Java có thể sử dụng JavaScript để tạo bản đồ hình ảnh phía máy khách. Bản đồ hình ảnh phía máy khách được bật bởi thuộc tính usemap cho thẻ <img /> và được xác định bằng thẻ tiện ích <map> và <area> đặc biệt.

Hình ảnh sẽ tạo bản đồ được chèn vào trang bằng cách sử dụng phần tử <img /> như bình thường, ngoại trừ việc nó mang một thuộc tính phụ gọi là usemap .

Khóa học lập trình Java

Khóa học lập trình Java Giá trị của thuộc tính usemap là giá trị của thuộc tính name trên phần tử <map> mà bạn sắp gặp, trước bởi một dấu thăng hoặc bảng băm.

Phần tử <map> thực sự tạo bản đồ cho hình ảnh và thường trực tiếp sau phần tử <img />. Nó hoạt động như một vùng chứa cho các phần tử <area /> thực sự xác định các điểm nóng có thể nhấp.

Khóa học lập trình Java Phần tử <map> chỉ mang một thuộc tính, thuộc tính name , là tên xác định bản đồ. Đây là cách phần tử <img /> biết phần tử <map> nào sẽ sử dụng.

Phần tử <area> chỉ định hình dạng và tọa độ xác định ranh giới của mỗi điểm phát sóng có thể nhấp.

Khóa học lập trình Java Đoạn mã sau kết hợp các imagemaps và JavaScript để tạo ra một thông báo trong một hộp văn bản khi chuột được di chuyển qua các phần khác nhau của một hình ảnh.

<html>
   
   <head>
      <title>Using JavaScript Image Map</title>
      
      <script type="text/javascript">
         <!--
            function showTutorial(name){
               document.myform.stage.value = name
            }
         //-->
      </script>
      
   </head>
   
   <body>
      <form name="myform">
         <input type="text" name="stage" size="20" />
      </form>
      
      <!-- Create  Mappings -->
      <img src="/images/usemap.gif" alt="HTML Map" border="0" usemap="#tutorials"/>
      
      <map name="tutorials">
         <area shape="poly" 
            coords="74,0,113,29,98,72,52,72,38,27"
            href="/perl/index.htm" alt="Perl Tutorial"
            target="_self" 
            onMouseOver="showTutorial('perl')" 
            onMouseOut="showTutorial('')"/>
         
         <area shape="rect" 
            coords="22,83,126,125"
            href="/html/index.htm" alt="HTML Tutorial" 
            target="_self" 
            onMouseOver="showTutorial('html')" 
            onMouseOut="showTutorial('')"/>
         
         <area shape="circle" 
            coords="73,168,32"
            href="/php/index.htm" alt="PHP Tutorial"
            target="_self" 
            onMouseOver="showTutorial('php')" 
            onMouseOut="showTutorial('')"/>
      </map>
   </body>
</html>

Đầu ra

Khóa học lập trình Java có thể cảm nhận được khái niệm bản đồ bằng cách đặt con trỏ chuột lên đối tượng hình ảnh.

JAVA - NIIT-ICT

Thứ Tư, 21 tháng 11, 2018

JavaScript - Bản đồ hình ảnh

Đầu ra

Không có nhận xét nào:

Đăng nhận xét

Lập trình Java - Ngoại lệ

Danh Sách Khóa Đào Tạo

Tổng số lượt xem trang