GORAGOD.com

freelance, web developer, web designer, hosting, domain name

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

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


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



ขอความกรุณาด้วยนะครับ



 



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


29 มิ.ย. 2554 5 3,051

ตามเว็บตัวอย่างที่ให้มา คือ 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
ความคิดเห็น
ไฟล์อัปโหลด ชนิด jpg, jpeg ขนาดไฟล์ไม่เกิน 2M
^