14. HTML - Link hình ảnh

Thảo luận trong 'HTML' bắt đầu bởi admin, 15/9/15.

  1. admin

    admin Administrator Thành viên BQT

    Tham gia ngày:
    5/9/15
    Bài viết:
    42
    Đã được thích:
    0
    Điểm thành tích:
    6
    Đây là một ví dụ đơn giản nhất về việc sử dụng hình ảnh như một siêu liên kết. Chúng ta chỉ cần sử dụng một hình ảnh bên trong một siêu liên kết tại vị trí của văn bản.

    PHP:
    <!DOCTYPE html>
    <
    html>
    <
    head>
    <
    title>Image Hyperlink Example</title>
    </
    head>
    <
    body>
    <
    p>Click following link</p>
    <
    a href="http://tuihoclaptrinh.com" target="_self">
      <
    img src="images/logo.jpg" alt="Tui học Lập trình" border="0"/>
    </
    a>
    </
    body>
    </
    html>
    Kết quả:

    upload_2015-10-1_10-39-9.jpeg

    Image Maps



    Bạn có thể tạo ra các link khác nhau trên cơ sở các liên kết khác nhau có trên hình ảnh. Khi các link khác nhau được đính kèm tới các kết nối khác nhau, chúng ta nhấn chuột vào các phần khác nhau của ảnh để mở các trang kết nối. Những hình ảnh có độ nhạy chuột như vậy được gọi như các Image Map.

    Ví dụ:

    PHP:
    <!DOCTYPE html>
    <
    html>
    <
    body>

    <
    p>Click on the sun or on one of the planets to watch it closer:</p>

    <
    img src="images/planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">

    <
    map name="planetmap">
      <
    area shape="rect" coords="0,0,82,126" alt="Sun" href="https://en.wikipedia.org/wiki/Sun">
      <
    area shape="circle" coords="90,58,3" alt="Mercury" href="https://en.wikipedia.org/wiki/Mercur,_Utah">
      <
    area shape="circle" coords="124,58,8" alt="Venus" href="https://en.wikipedia.org/wiki/Venus">
    </
    map>

    </
    body>
    </
    html>
    Kết quả:
    upload_2015-10-1_11-38-9.jpeg

    Bạn hãy rê chuột lên mặt trời hay từng hành tinh, rồi click lên để trải nghiệm nhé.
     
    Chỉnh sửa cuối: 1/10/15

Chia sẻ trang này