วิธีการสร้างภาพโรลโอเวอร์ด้วยรหัส HTML

ผู้เขียน: Janice Evans
วันที่สร้าง: 3 กรกฎาคม 2021
วันที่อัปเดต: 15 พฤศจิกายน 2024
Anonim
Gallery Using HTML, CSS, And JavaScript | How To Open Images Using JavaScript | JavaScript Tutorial
วิดีโอ: Gallery Using HTML, CSS, And JavaScript | How To Open Images Using JavaScript | JavaScript Tutorial

เนื้อหา

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


คำสั่ง

สร้างเว็บไซต์แบบไดนามิกด้วยความช่วยเหลือของภาพแบบโรลโอเวอร์ (Jupiterimages / Photos.com / Getty Images)
  1. สร้างเอกสารใหม่ที่มีขนาดที่ต้องการ (เป็นพิกเซล) โดยใช้ซอฟต์แวร์แก้ไขภาพเช่น Photoshop สร้างภาพปกติและ "โรลโอเวอร์" ซึ่งจะต้องมีขนาดเท่ากัน

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

  3. เปิดซอฟต์แวร์การออกแบบที่เหมาะสมเช่น Adobe Dreamweaver คลิกปุ่ม "รีเฟรช" ในไลบรารีเพื่ออัพเดตไลบรารีและโฟลเดอร์รูทโลคัลสำหรับไซต์ของคุณ ค้นหารูปภาพในโฟลเดอร์รูท

  4. สลับไปยังมุมมองโค้ดของหน้าเว็บ

  5. ประเภท "

    "ในโค้ดโดยไม่มีเครื่องหมายอัญประกาศเริ่มต้น


  6. แทนที่ "http://yoursite.com" ด้วยที่อยู่เว็บไซต์ของคุณ นอกจากนี้ยังแทนที่ "IMAGE1" และ "IMAGE2" ด้วยชื่อของภาพปกติและ "โรลโอเวอร์" ตามลำดับ

สิ่งที่คุณต้องการ

  • ซอฟต์แวร์แก้ไขรูปภาพ
  • ซอฟต์แวร์ออกแบบเว็บไซต์