การสร้างลิงค์รูปภาพและแผนที่รูปภาพ

• เมษายน 19, 2024

คำตอบในสัปดาห์นี้เป็นการตอบคำถามของผู้อ่าน -“ คุณสามารถอธิบายวิธีสร้างลิงค์รูปภาพไปยังเพจใน HTML” ได้หรือไม่ มีเทคนิคต่าง ๆ สองสามอย่างที่คุณสามารถใช้สำหรับรูปภาพที่ลิงก์ได้ หนึ่งคือการเชื่อมโยงภาพทั้งหมดที่มี HTML ของคุณและอื่น ๆ ที่จะทำแผนที่ภาพ - ที่ส่วนต่าง ๆ ของภาพเดียวกันเชื่อมโยงไปยังสถานที่ที่แตกต่างกัน

รูปภาพที่เชื่อมโยงใน HTML

การลิงก์รูปภาพหรือไอคอนขนาดเล็กนั้นง่ายมาก ๆ เพียงแค่วางลิงค์รูปภาพในไฮเปอร์ลิงก์ดังนี้:



สิ่งที่ฉันทำที่นี่คือการแนบภาพภายใน html สำหรับลิงค์ นี่เป็นวิธีที่ง่ายและมีประสิทธิภาพมากที่สุดในการเชื่อมโยงภาพขนาดเล็กและมักทำด้วยสัญลักษณ์แสดงหัวข้อย่อยไอคอนและอื่น ๆ แต่ถ้าคุณต้องการให้ภาพขนาดใหญ่เชื่อมโยงไปยังสถานที่ต่างๆ นี่คือจุดที่การแบ่งภาพเป็นประโยชน์

การแบ่งภาพใน Photoshop

นี่เป็นเรื่องง่ายที่จะบรรลุใน Photoshop คุณควรใช้ภาพที่ไม่ซับซ้อนจนเกินไปเพราะคุณต้องการให้ผู้ใช้ของคุณสามารถดูตำแหน่งที่จะคลิกบนภาพได้อย่างชัดเจน คุณต้องการให้แน่ใจว่าผู้ใช้ของคุณเข้าใจว่าพวกเขาต้องคลิกภายในภาพเพื่อไปยังที่ที่พวกเขาไป พัฒนาแผนที่รูปภาพอย่างรอบคอบโดยคำนึงถึงผู้ใช้ของคุณ โปรดจำไว้ว่าแผนที่รูปภาพมักจะไม่เป็นมิตรกับเครื่องมือค้นหาเหมือนกับข้อความบนหน้าเว็บอย่างไรก็ตามการใช้แท็ก alt ภายในแท็กรูปภาพของคุณอย่างเหมาะสมจะช่วยได้

เมื่อสร้างภาพของคุณแล้วขั้นตอนต่อไปคือ "ตัด" ภาพของคุณ ไอคอนเครื่องมือชิ้นดูเหมือนมีดที่แน่นอนเล็กน้อย มันอยู่ใกล้ด้านบนของแถบเครื่องมือและอยู่ใต้เครื่องมือครอบตัด - หากคุณคลิกที่ไอคอน "ครอบตัด" เครื่องมือตัวเลือกชิ้นและชิ้นจะปรากฏขึ้น

เลือกเครื่องมือชิ้นจับปุ่มซ้ายของเมาส์ค้างไว้และลากชิ้นที่คุณต้องการแล้วปล่อยอย่างระมัดระวัง เลื่อนไปเรื่อย ๆ เพื่อตัดภาพทั้งหมด ควรมีส่วนย่อยของภาพที่คุณต้องการเชื่อมโยงไปยังหน้าอื่น พื้นที่สีขาวขนาดใหญ่ใด ๆ สามารถเป็นหนึ่งชิ้น

หลังจากภาพของคุณถูกตัดอย่างสมบูรณ์แล้วขั้นตอนต่อไปคือการใช้เครื่องมือ“ เลือกชิ้น” คลิกที่แต่ละชิ้นจากนั้นเลือกประเภทภาพ“ ประเภท” ด้านล่างนั้นเติม URL ของตำแหน่งที่คุณต้องการให้ชิ้นส่วนนี้กำกับโดยตรงตามด้วยฟิลด์แท็ก alt ที่ด้านล่าง ฟิลด์อื่นไม่จำเป็นสำหรับการแมปภาพอย่างง่าย เลื่อนผ่านแต่ละส่วนในลักษณะเดียวกันจนกว่าภาพทั้งหมดจะถูกแมปออก

เมื่อภาพทั้งหมดของคุณเสร็จสมบูรณ์คุณจะใช้ตัวเลือก "บันทึกสำหรับเว็บและอุปกรณ์" หากคุณคลิก "ไฟล์" ที่ด้านบนและดูใต้ตัวเลือกการบันทึกทั่วไปคุณจะเห็นตัวเลือกสำหรับการบันทึกสำหรับเว็บและอุปกรณ์ เลือกตัวเลือกนี้และกล่องโต้ตอบจะเปิดขึ้นเพื่อให้คุณสามารถดูตัวอย่างภาพของคุณได้ หากคุณพอใจกับมันกดปุ่มบันทึกและกล่องโต้ตอบอื่นจะเปิดขึ้น ต้องแน่ใจว่าตัวเลือกที่สองระบุว่า "บันทึกภาพและ HTML" จากนั้นบันทึกงานของคุณ

ไปที่โฟลเดอร์ที่คุณบันทึกเอกสาร HTML และเปิด คุณสามารถคัดลอกและวางรหัสนี้ลงในไฟล์ HTML ของคุณเอง โดยทั่วไปแล้ว HTML นี้จะเลอะเทอะเล็กน้อย หากคุณเชี่ยวชาญใน HTML คุณสามารถทำความสะอาดได้ตามที่คุณต้องการ แต่มันก็ใช้ได้ดีเหมือนเดิม ตรวจสอบให้แน่ใจว่าไฟล์ภาพ ฯลฯ ของคุณอยู่ในตำแหน่งที่ถูกต้องไม่เช่นนั้นภาพของคุณจะไม่ปรากฏ