เพิ่มตัวชี้นำภาพไปยังไซต์ของคุณ

Sep 12, 2025

วิธีการ

มันน่ารำคาญสำหรับผู้ใช้เว็บไซต์ที่จะคลิกที่ลิงค์เพื่อค้นหาว่าหน้าเว็บไม่เป็นที่สนใจเสียเวลา การใช้รูปภาพในพื้นหลังของหน้าเป็นวิธีที่ยอดเยี่ยมในการทำให้ผู้ใช้มีข้อบ่งชี้ถึงสิ่งที่คาดหวังจากลิงค์ก่อนที่จะทำหน้าที่โหลดหน้า คุณสามารถดูตัวอย่างที่ดีของเทคนิคนี้ในการใช้งานบน Ivan Aivazvsky Life Site .

การใช้พื้นหลังของหน้ายังสามารถช่วยให้ผู้อ่าน Dyslexic หรือผู้ที่พูดภาษาอังกฤษเป็นภาษาเพิ่มเติม ในกรณีเหล่านี้คุณสามารถสื่อสารข้อมูลเพิ่มเติมให้กับผู้ใช้โดยไม่ใช้ข้อความมากเกินไปด้วยข้อความมากเกินไป

10 ขั้นตอนในการสร้างประสบการณ์การใช้งานที่น่าสนใจ

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

นี่คือเราจะแสดงวิธีการสร้างจอแสดงผลการนำทางแบบโต้ตอบที่มีประโยชน์และ ซึ่งเข้าถึงได้ ตัวชี้นำภาพ

ดาวน์โหลดไฟล์สำหรับบทช่วยสอนนี้ ที่นี่ .

The Ivan Aivazvsky life site changes the background images as you hover over links (click the image to go to the website) — เว็บไซต์ Ivan Aivazvsky Life เปลี่ยนภาพพื้นหลังในขณะที่คุณวางเมาส์เหนือลิงก์ (คลิกที่ภาพเพื่อไปที่เว็บไซต์)

01. สร้างเอกสาร HTML

สร้างเทมเพลตเอกสาร HTML หลักซึ่งประกอบด้วยคอนเทนเนอร์ HTML ที่เก็บส่วนหัวและร่างกาย

ส่วนหัวจัดเก็บข้อมูลรายละเอียดเช่นชื่อเอกสารรวมถึงลิงก์ไปยังแหล่งข้อมูลภายนอก - IE CSS และ JavaScript

ร่างกายเก็บเนื้อหาเอกสาร คุณสมบัติที่สำคัญของร่างกายคือแอตทริบิวต์ 'ธีมข้อมูล' ที่ใช้แล้ว - เพื่อแก้ไขโดย JavaScript เพื่อกระตุ้นการเปลี่ยนแปลงการนำเสนอ CSS

 & lt;! Doctype HTML & GT;
& lt; html & gt;
& lt; หัว & gt;
& lt; ชื่อ & gt; background การนำทาง & lt; / ชื่อ & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "styles.css" / & gt;
& lt; ประเภทสคริปต์ = "text / javascript" src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; ข้อมูลร่างกายธีม & GT;
*** ขั้นตอนที่ 2
& lt; / body & gt;
& lt; / html & gt;

02. เพิ่ม HTML นำทาง

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

 & lt; Nav ID = "MainNav" & GT;
& lt; href = "#" ชื่อ = "หน้า 1" & gt; หน้า 1 & lt; / a & gt;
& lt; a href = "#" ชื่อ = "หน้า 2" & gt; หน้า 2 & lt; / a & gt;
& lt; a href = "#" ชื่อ = "หน้า 3" & gt; หน้า 3 & lt; / a & gt;
& lt; / nav & gt;

03. เริ่มต้นไฟล์ CSS

เนื้อหา HTML เสร็จสมบูรณ์ดังนั้นสร้างไฟล์ใหม่ที่เรียกว่า 'Styles.css' ไฟล์นี้เก็บกฎการจัดรูปแบบ CSS ที่ควบคุมการนำเสนอภาพ เริ่มไฟล์นี้ด้วยกฎเพื่อนำเสนอเอกสาร HTML และร่างกายของมันเพื่อให้ปรากฏทั่วทั้งหน้าจอโดยใช้พื้นหลังสีขาวและข้อความสีดำ

 HTML, ร่างกาย {
  จอแสดงผล: บล็อก;
  ความกว้าง: 100%;
  ความสูง: 100%;
  มาร์จิ้น: 0;
  padding: 0;
  Font-Family: Helvetica, Sans-Serif;
  สี: # 000; }

04. กำหนดกฎสำหรับภาพ

องค์ประกอบที่สำคัญสำหรับเอฟเฟกต์คือการใช้แอตทริบิวต์ 'ธีมข้อมูล' ที่ใช้กับเนื้อหาเอกสาร กฎถูกตั้งค่าเพื่อกำหนดพฤติกรรมเริ่มต้นของข้อมูล - ซึ่งเราจะใช้การวางตำแหน่งพื้นหลังและเปลี่ยนการเปลี่ยนผ่าน

สิ่งนี้จะช่วยหลีกเลี่ยงความจำเป็นในการทำซ้ำนิยามกฎเหล่านี้สำหรับแต่ละธีมแต่ละชุดซึ่งทำให้หน้าเว็บของคุณง่ายต่อการบำรุงรักษา

 [ธีมข้อมูล] {
  การเปลี่ยนแปลง: พื้นหลัง 1 วินาที;
  พื้นหลัง: ศูนย์ศูนย์กลางไม่ซ้ำ;
  ขนาดพื้นหลัง: ปก; }

05. ออกแบบชุดรูปแบบ

การออกแบบของแต่ละธีมถูกตั้งค่าโดยใช้ค่าของแอตทริบิวต์ธีมข้อมูล

เพื่อให้บรรลุถึงผลที่ต้องการเรากำลังตั้งค่าภาพพื้นหลังที่แตกต่างกันสำหรับแต่ละธีม ขั้นตอนก่อนหน้านี้ดูแลการตั้งค่าเริ่มต้นทั้งหมดที่ธีมเหล่านี้จะสืบทอด

 [Data-theme = "หน้า 1"] {
  ภาพพื้นหลัง: URL (image1.jpg);
}
[Data-theme = "หน้า 2"] {
  ภาพพื้นหลัง: URL (image2.jpg);
}
[Data-theme = "หน้า 3"] {
  ภาพพื้นหลัง: URL (image3.jpg);
}

06. เพิ่มภาชนะนำทาง

คอนเทนเนอร์การนำทางใช้เพื่อให้แน่ใจว่าลิงก์จะถูกนำเสนอด้วยความกว้างที่สอดคล้องกันที่อยู่ตรงกลางของหน้าจอ ความกว้าง 50% และการคำนวณอัตโนมัติที่ใช้สำหรับการใช้ขอบแนวนอน วิธีการนี้ให้การรับประกันความสอดคล้องโดยไม่คำนึงถึงความละเอียดหน้าจอ / ขนาดของผู้ใช้

 #mainnav {
  จอแสดงผล: บล็อก;
  ความกว้าง: 50%;
  ระยะขอบ: 0 อัตโนมัติ 0 อัตโนมัติ; }

07. ลิงค์นำทางสไตล์

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

 #mainnav a {
  จอแสดงผล: บล็อก;
  ความกว้าง: 100%;
  พื้นหลัง: RGBA (255,255,255, .3);
  สี: # 000;
  padding: 1em;
  อัตรากำไรขั้นต้น: .5em;
  ชายแดน: 1px ของแข็ง; }
#mainnav a: โฮเวอร์ {
  พื้นหลัง: RGBA (0,0,0, .5);
  สี: #FFF; }

08. ผู้ฟังเหตุการณ์ Link

CSS เสร็จสมบูรณ์แล้วดังนั้นสร้างไฟล์ใหม่ที่เรียกว่า 'Code.js' สำหรับ JavaScript

เอฟเฟกต์ต้องการลิงค์แต่ละลิงก์ภายในการนำทางเพื่อฟังและตอบสนองต่อเหตุการณ์การวางเมาส์ที่ผู้ใช้ค้างอยู่เหนือลิงค์ ผู้ฟังนี้ใช้ค่า 'ชื่อเรื่อง' ของลิงค์ไปยังแอตทริบิวต์ Data-Theme ของ Document Body - ด้วยเหตุนี้จึงก่อให้เกิดสไตล์ใน CSS

หลังจากที่หน้าต่างหน้าโหลดแล้วโหนดลิงค์นำทางจะถูกวางลงในอาร์เรย์ซึ่งใช้สำหรับลูปสำหรับการใช้ฟังเหตุการณ์

 window.addeventlistener (โหลด "ฟังก์ชั่น () {
  var โหนด = document.queryselectorall ("# mainnav a");
  สำหรับ (var i = 0; i & lt; nodes.length; i ++) {
  โหนด [i]. addeventlistener ("mouseover", ฟังก์ชั่น () {
  document.body.setattribute ("ธีมข้อมูล", this.getattribute ("ชื่อ"));
  });
  }
});

บทความนี้ปรากฏในฉบับออกแบบเว็บ 262 ซื้อที่นี่ !

บทความที่เกี่ยวข้อง:

10 แนวโน้มการนำทางเว็บไซต์สำหรับ 2017
10 ขั้นตอนในการสร้างประสบการณ์การใช้งานที่น่าสนใจ
Léonieวัตสันว่าทำไมการเข้าถึงต้องเป็นส่วนสำคัญของกระบวนการออกแบบเว็บ

เพิ่มตัวชี้นำภาพไปยังไซต์ของคุณ

01. สร้างเอกสาร HTML

02. เพิ่ม HTML นำทาง

03. เริ่มต้นไฟล์ CSS

04. กำหนดกฎสำหรับภาพ

05. ออกแบบชุดรูปแบบ

06. เพิ่มภาชนะนำทาง

07. ลิงค์นำทางสไตล์

08. ผู้ฟังเหตุการณ์ Link

วิธีการ - บทความยอดนิยม

หยุดบอทด้วย Google recaptcha

Magic Making Image Magic กับ Houdini

วิธีการสร้าง Glazes ด้วยสีน้ำ

สร้างการเคลื่อนไหวแบบไดนามิกในองค์ประกอบ

เปลี่ยนภาพถ่ายเป็นภาพเคลื่อนไหว 3 มิติด้วย Photoshop

วิธีการปรับปรุงประสิทธิภาพของไซต์อีคอมเมิร์ซ

สร้างแดชบอร์ดที่ตอบสนองด้วย figma

สร้างสภาพแวดล้อมเกมใน Unreal Engine 4

หมวดหมู่