อยากเปลี่ยนเฉพาะพิกัดที่ต้องการในรูปครับ มีใครเคยทำมั่ง
![](<span class=html><a href="http://img820.imageshack.us/img820/368/322554104317.png"></span><span class=html><img src="http://img820.imageshack.us/img820/368/322554104317.th.png"/></span><span class=html></a></span><span class=html><br></span><span class=html><font size=1></span>Thanks: <span class=html><a href="http://xn--12cm5fsc9d.com" target="_blank"></span>โยกัง<span class=html></a></span><span class=html></font></span>)
จะเหมือนลักษณะ drop down คือรูปหลักเป็นรูปสีขาว ถ้ามีการเอาเม้าไปชี้ที่ปุ่มโรงแรม ปุ่มก็จะเปลี่ยนเป็นสีฟ้า ส่วนตรงรีสอร์ทสปา เกสต์เฮาส์ก็ยังคงเป็นสีเดิม
ใช้ XML เป็นตัวกำหนดอ่ะคับ ผมเห็นที่มีคนทำไว้เป็น VB แต่ไม่ทราบว่า Ajax ทำได้หรือเปล่า ใครเคยเจอหรือเคยทำแนะนำด้วยครับ
ขอบคุณครับ
<?xml version="1.0"?>
<img name="Chiangmai_Hotel" src="/public/res/cod/Chiangmai_Hotel.jpg" />
<img name="Chiangmai_Hotel-down" src="/public/res/cod/Chiangmai_Hotel-down.jpg" />
<page background="Chiangmai_Hotel">
<list name="list11" focus_img="Chiangmai_Hotel-down">
<button x="195" y="170" w="155" h="46" event="func1" value="1"/>
<button x="353" y="170" w="155" h="46" event="http_sf" value="/public/res/cod/Chiangmai_Resort_Spa.xml"/>
<button x="514" y="170" w="155" h="46" event="http_sf" value="/public/res/cod/Chiangmai_Guest_House.xml"/>
</list>
<list name="list12" focus_img="Chiangmai_Hotel-down">
<button x="49" y="227" w="203" h="68" event="http_sf" value="/public/res/cod/ChiangmaiHolidayInn.xml"/>
<button x="259" y="227" w="203" h="68" event="func1" value="1"/>
<button x="467" y="227" w="203" h="68" event="func1" value="1"/>
<button x="49" y="312" w="203" h="68" event="func1" value="1"/>
<button x="259" y="312" w="203" h="68" event="func1" value="1"/>
<button x="467" y="312" w="203" h="68" event="func1" value="1"/>
<button x="49" y="405" w="203" h="68" event="func1" value="1"/>
<button x="259" y="405" w="203" h="68" event="func1" value="1"/>
<button x="467" y="405" w="203" h="68" event="func1" value="1"/>
</list>
</page>
a {
background-image: url(img.png);
}
/* เปลี่ยนพื้นหลังของลิงค์ เมื่อ เมาส์ อยู่บน */
a:hover {
background-image: url(imghover.png)
}
วิธีด้านบนเป็นวิธีอย่างง่าย ซึ่งต้องเตรียมรูปของปุ่ม 2 รูป แต่วิธีนี้ในปัจจุบัน ไม่ค่อยนิยมแล้ว เนื่องจาก Server ต้องโหลดรูปหลายรูป (ตามคำแนะนำของ Page Speed)
ในปัจจุบัน ผู้ออกแบบนิยมสร้างรูปแบบ Sprite ครับ ซึ่งหมายถึง รูปภาพขนาดใหญ่รูปเดียว แต่มีรูปเล็กๆหลายๆรูปด้านใน
รูปแรกคือ หน้าเพจเลยครับ
ทำได้ครับ ถ้ารู้พิกัดของรูป และไปกำหนดให้กับ CSS ให้ถูกเท่านั้น
555+++
ก็ทำแบบบทความละครับ ไม่มีวิธีอื่น
อย่างแรกก็ต้องหาพิกัดของรูปก่อนว่าอยู่ตรงไหน (ถ้าหาไม่เจอก็ไม่รู้จะทำไงได้เนาะ)
อย่างที่ 2 ก็เอาพิกัดมาติดลบ แล้วส่งให้ CSS
ผมคงช่วยได้เท่านี้ ที่เหลือคงต้องพยายามหาตำแหน่งเอา หาเจอ ก็กำหนดได้ครับ
หรือ ถ้าไม่ได้จริงๆ ก็คงต้องทำรูปให้มันเข้ากับที่ผมอธิบายไว้ในบทความ ถ้าทำได้ งานก็คงง่ายขึ้นครับ
จะกำหนดขอบเขตพื้นที่สองรูปแรกให้มาเปลี่ยนรูปที่สองยังไง เด๋วเรื่องพิกัดผมต้องหาอีกที ^^ งงครับ
ลองอยู่ครับแต่ยังไม่ได้
ปกติ รูปพื้นหลังจะแสดงที่พิกัดหนึ่ง
เมื่อเมาส์อยู่บน (hover) จะแสดงอีกพิกัดหนึ่ง
ทีนี้ถ้ารูป เป็น 2 รูป อยู่ที่พิกัดเดียวกัน ต่างกันที่รูปหนึ่งเป็นรูปปกติ และ อีกรูปเป็น รูป hover ก็ใช้วิธีเปลี่ยนรูปพื้นหลัง ที่พิกัดเดมก็ได้ครับ