EP.26 หนึ่งรูปหลายลิงก์

noMerzy | 2016-10-04 12:43:47

หนึ่งรูปหลายลิงก์


วันนี้เราจะมาทำหนึ่งรูปหลายลิงก์กันครับ โดยจะทำการ tags ที่หน้าของสาวให้ลิงก์ไปยังรูปเดี่ยวของแต่ละคน

multilink.html

<!DOCTYPE html> <html> <head> <title>Image tags</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <!-- ให้รูปภาพเรียกใช้ map ที่ชื่อ ioi --> <img src="ioi.jpg" alt="I.O.I" usemap="#ioi" /> <map name="ioi"> <!-- ตำแหน่ง x1,y1 และ x2,y2 ของแต่ละลิงก์ --> <area shape="rect" coords="30,15,120,108" href="I.O.I/Somi.jpg" title="Somi" alt="Somi" /> <area shape="rect" coords="120,15,200,108" href="I.O.I/SeJeong.jpg" title="SeJeong" alt="SeJeong" /> <area shape="rect" coords="205,15,280,108" href="I.O.I/YooJung.jpg" title="YooJung" alt="YooJung" /> <area shape="rect" coords="300,15,370,108" href="I.O.I/ChungHa.jpg" title="ChungHa" alt="ChungHa" /> <area shape="rect" coords="385,15,450,108" href="I.O.I/SoHye.jpg" title="SoHye" alt="SoHye" /> <area shape="rect" coords="464,15,538,108" href="I.O.I/KyeolKyung.jpg" title="KyeolKyung" alt="KyeolKyung" /> <area shape="rect" coords="550,15,620,108" href="I.O.I/ChaeYeon.jpg" title="ChaeYeon" alt="ChaeYeon" /> <area shape="rect" coords="633,15,710,108" href="I.O.I/DoYeon.jpg" title="DoYeon" alt="DoYeon" /> <area shape="rect" coords="715,15,790,108" href="I.O.I/Mina.jpg" title="Mina" alt="Mina" /> <area shape="rect" coords="802,15,870,108" href="I.O.I/NaYoung.jpg" title="NaYoung" alt="NaYoung" /> <area shape="rect" coords="880,15,945,108" href="I.O.I/YeunJung.jpg" title="YeunJung" alt="YeunJung" /> </map> </body> </html>