การใส่รูปใน link html และ image link thml

ตัวอย่าง

แบบ link html ธรรมดา

 

<a href=“http://www.softwaresiam.com/” alt=“HTML tutorial” target=“_blank”>ข้อความ</a>

 

เรียกไฟล์รูปภาพจากโฟลเดอร์มาโชว์

<img src=“/images/file1.gif” alt=“html image link” style=“width:250px;height:250px;”>

 

หรือ

 

<img src=“http://www.softwaresiam.com/images/file1.jpg” alt=“softwaresiam.com” target=“_blank”>

 

หรือ  เอาลิงค์ใส่ด้วยดีกว่า

<a href=“http://www.softwaresiam.com/webboard/index.php”>
<img src=“http://www.softwaresiam.com/images/file1.jpg” alt=“html image link” style=“width:250px;height:250px;border:0;”>
</a>

 

ถ้าต้องการใส่ลิงค์ใน Area ของภาพ

 

<!DOCTYPE html>
<html>
<body>

<p>ใส่ลิงค์ให้กับ Area ให้ภาพ เพื่อคลิ๊กไปที่ไฟล์อื่น ๆ หลายๆไฟล์</p>

<img src=”ใส่ชือไฟล์ภาพ.gif” alt=”Planets” usemap=”#planetmap” style=”width:250px;height:250px;”>

<map name=”planetmap”>
<area shape=”rect” coords=”0,0,82,126″ alt=”บรรยายรายละเอียดภาพ1″ href=”ไฟล์1.html”>
<area shape=”circle” coords=”90,58,3″ alt=”บรรยายรายละเอียดภาพ2″ href=”ไฟล์2.html”>
<area shape=”circle” coords=”124,58,8″ alt=”บรรยายรายละเอียดภาพ3″ href=”ไฟล์-.html”>
</map>

</body>
</html>

 

 

หมายเหตุ

<area shape=”rect” coords=”0,0,82,126″ alt=”บรรยายรายละเอียดภาพ1″ href=”ไฟล์1.html”>

coords=”0,0,82,126″         คือ x1,y1,x2,y2  left, top, right, bottom