อยู่ในประเภท: web design |
โพสเมื่อ July 15th, 2008 โดย Bird
ตัวอย่างคำสั่งที่ทำให้ <div> สามารถกลายเป็น link ได้ อีกทั้งเมื่อเอาเมาส์ไปโอเวอร์ก็ให้ cursor เป็นรูปมือ มีดังนี้
-
-
<div style="cursor: pointer; cursor: hand;" onclick="window.location = ‘/process/enterprise/training/change_index.shtml’;">
-
BlahBlah</div>
เพียงแค่นี้ ไม่ว่าจะเป็น div หรือ อะไรก็ตามก็สามารถเป็น link ได้หมด
คำสั่งให้ cursor เป็นรูปมือ
คำสั่งข้างล่างนี้ใส่เพื่อให้ cursor ที่ไปชี้ นี้เป็นรูป 
-
style="cursor: pointer; cursor: hand;"
ทำไมถึงใส่ทั้ง pointer และ hand ทั้ง ๆ ที่สองคำสั่งนี้ก็เหมือนกัน?
เพราะว่า ถ้าเราใส่เฉพาะ cursor: pointer จะใช้ได้เฉพาะ IE ส่วน firefox จะใช้ไม่ได้ วิธีแก้เพื่อให้มัน Cross browser ก็คือใส่ทั้งสองเลย
คำสั่งที่ทำให้เมื่อคลิกที่ <div> แล้ว link ไปยัง url ที่กำหนด
คำสั่งด้านล่างนี้ใส่เพื่อให้เวลาเราคลิกบนพื้นที่ ที่กำหนด หรือในที่นี้คือ <div> ให้มันไปที่ url ที่กำหนด
-
onclick="window.location = ‘/process/enterprise/training/change_index.shtml’;"
References:
July 16th, 2008 เมื่อ 11:22 pm
ทำได้แต่จะทำไปเพื่ออะไร
ถ้าทำไปเวลาเอาไปใช้กับ mobile phone
ไม่ต้องแก้โค้ด html กันให้วุ่นเหรอครับ
ก็โอเคครับเหมือนการทดลองแต่พอใช้จริงๆ
ถ้าฝืนทำงี้ tag div ก็ทำงานผิดหน้าที่ทั้งๆ ที่ไม่จำเป็นปะครับ
July 17th, 2008 เมื่อ 10:35 am
มันก็แล้วแต่สถานการณ์คับ
เหตุผลที่ผมใช้เพราะว่า
ผมให้ div id=”logo”
อยู่ตรงส่วนหัวเพื่อแสดง
รูป logo ของเว็บ โดยใส่รูปเป็นพื้นหลัง
และพี่คนตรวจงานเขาต้องการให้ logo เป็นลิงค์ไปที่หน้าแรก
ด้วยความขี้เกียจ ไม่อยากแก้ ผมก็เลยใช้วิธีนี้ : P
July 18th, 2008 เมื่อ 1:57 pm
ทำได้แต่ไม่เป็นผลดีกับ Spider