A-AA+then

อยากทราบวิธีเขียนสคริปลักษณะนี้

1,807
อยากทราบวิธีเขียนสคริปลักษณะนี้

    สวัสดีครับ อยากขอคำแนะนำเกี่ยวกับการสร้างสคริปแบบเว็บไซต์นี้ http://www.r24.org/R24/demo2/ ที่เมื่อเอาเม้าไปวางแล้วโชว์รูปขึ้นมาครับ ผมจะนำมาประยุกต์ใช้ทำตัวแนะนำแผนผังองค์กร (แปลนตามรูปที่แนบมา) หนะครับ แบบว่าวางเม้าที่ตำแหน่งหนึ่งแล้วโชว์รูปบริเวณนั้นจริง ๆ พร้อมรายละเอียดสั้น ๆ ขึ้นมาครับ
    
    ขอความกรุณาด้วยนะครับ

     

    ปล. ชอบเว็บไซต์จริง ๆ ครับ มีความรู้เยอะมาก ๆ เลย

5 ความคิดเห็น

ตามเว็บตัวอย่างที่ให้มา คือ Ajax Tooltip ครับ

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

คำแนะนำสำหรับกรณีนี้คือ ใช้ flash ครับ จะเป็นอะไรที่ง่ายที่สุด ง่าวยกว่าการใช้รูป หรือ HTML ครับ และ flash ก็ยังสามารถออกแบบให้ดังข้อมูลจาก Server มาแสดงคล้ายตัวอย่างได้ด้วยเช่นกัน

ข้อเสียของการใช้แฟลช ก็คือต้องเรียนรู้เพิ่มเติม แต่ความเห็นผม การออกแบบ HTML หรือ Javascript ให้เป็นไปตามที่ต้องการ อาจใช้เวลามากกว่าครับ
1

หมายถึง image note หรือเปล่าครับ
แบบใน facebook น่ะ
ตัวอย่าง
http://jquery-notes.rydygel.de/samples.php

เป็น jquery น่ะครับlaugh
2

    ตอบพี่ gOragod ครับ; เดิมทีคิดจะทำมันด้วยแฟลชเหมือนกันครับ เพราะเห็นเป็นแนวทางมากที่สุด แต่ก็เห็นหลาย ๆ ที่เค้าใช้เทคนิคลักษณะแบบนี้ (แบบในเว็บตัวอย่าง) ทำกันอยู่ ไม่คิดว่าจะยากครับ ^^' ตอนแรกกะจะใช้จาวาสคริปต์ทำ (จะตัดแบ่งรูปเป็นโซน ๆ แล้วใส่สคริปต์ครอบรูปไว้ เมื่อเม้าไปวางก็จะโชว์เป็นวินโดวน์ปอปอัพ) แต่มันไม่ค่อยสวยและมีข้อจำกัดมากไปนิดครับ ยังไงต้องลองศึกษา Ajax Tooltip บ้างแล้วครับ

     

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

     

    ขอบคุณทั้ง 2 ท่านมาก ๆ ครับ หากมีแนวคิดแะไรเพิ่มเติม ช่วยชี้แนะด้วยครับ

3

ลองดูแนวคิดของ Google Map ครับ ถ้าสามารถออกแบบได้....

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

ในกรณีของ script ของคุณ niti ก็เป็นลักษณะของการ Tag รูปภาพละครับ ซี่งก็มีใช้หลายที่ ส่วนการดัดแปลงเพื่อแสดงรูปก็อาจทำได้ครับ


4

โดยส่วนตัวมีวิธีการที่แนะนำสองอย่างนะครับ
1.ใช้ Ajax Tooltip , Jquery Tooltip

ตัวอย่าง
http://rndnext.blogspot.com/2009/02/jquery-ajax-tooltip.html

2
.อาจจะออกแบบมาแบบให้คลิกแล้วมี POPUP ภาพขึ้นมาก็ได้ครับ ก็ง่ายดี แต่อาจจะไปทำลูกเล่นตอนมีภาพขึ้นมาแทนครับ

5
^