A-AA+then

อยากเปลี่ยนเฉพาะพิกัดที่ต้องการในรูปครับ มีใครเคยทำมั่ง

1,349
อยากเปลี่ยนเฉพาะพิกัดที่ต้องการในรูปครับ มีใครเคยทำมั่ง
สิ่งที่มีคือรูปสองรูปคับ     [size=1]Thanks: โยกัง โยกัง" />     [size=1]Thanks: โยกัง โยกัง">     [size=1]Thanks: โยกัง โยกัง" /> เมือเค้าเม้าไปในพื้นที่ที่กำหนด พื้นที่ตรงนันจะเปลี่ยนเป็นอีกรูป



จะเหมือนลักษณะ 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>

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

ใช้ CSS นะครับ

/* พื้นหลังของลิงค์ ปกติ */
a {
  background-image: url(img.png);
}
/* เปลี่ยนพื้นหลังของลิงค์ เมื่อ เมาส์ อยู่บน */
a:hover {
  background-image: url(imghover.png)
}

วิธีด้านบนเป็นวิธีอย่างง่าย ซึ่งต้องเตรียมรูปของปุ่ม 2 รูป แต่วิธีนี้ในปัจจุบัน ไม่ค่อยนิยมแล้ว เนื่องจาก Server ต้องโหลดรูปหลายรูป (ตามคำแนะนำของ Page Speed)

ในปัจจุบัน ผู้ออกแบบนิยมสร้างรูปแบบ Sprite ครับ ซึ่งหมายถึง รูปภาพขนาดใหญ่รูปเดียว แต่มีรูปเล็กๆหลายๆรูปด้านใน
1

ที่ผมจะทำก็เป็นรูปใหญ่รูปเดียวครับ รูปนึงเป็นรูป ปรกติ รูปนึงคือรูปที่จะเปลี่ยน อย่างรูปที่ให้ดูสองรูปนั้นครับ แต่การเปลี่ยนจะเปลี่ยนในพิกัดที่กำหนดอะคับ x="49"    y="227" w="203"  h="68"      พิกัดเริ่มต้น และ ความกว้าวยาวของพื้นที่ ที่เปลี่ยนอ่ะครับ อธิบายละก็งง ครับ ไม่รู้จะอธิบายยังไงดี ^^ ยังไงขอแอดเมลปรึกษาหน่อยได้ปะคับ ขอบคุณครับ
2

อานบทความครับ ผมเขียนให้แล้ว เทคนิคการใช้งานรูปภาพ Sprite
3

เยี่ยมมากเลยครับ ท่านครับขอบคุณ ครับช่ายเลย ผมไม่หาขอมูลเองต้องขอโทษด้วยครับ laugh
4

ในกรณีของผมครับ ถ้ารูปผมเป้นรูปใหญ่ สองรูป แบบนี้ อะคับ
 

รูปแรกคือ หน้าเพจเลยครับ

5

ที่ทาง admin ให้มาก็เป็นแนวทางที่จะนำไปประยุคใช้ได้ครับ แต่อยากทราบถ้าเกิดว่าเป็นแบบนี้จะทำได้มั้ย ขอบคุณครับ
6

อ้างจากคำตอบที่ #6ที่ทาง admin ให้มาก็เป็นแนวทางที่จะนำไปประยุคใช้ได้ครับ แต่อยากทราบถ้าเกิดว่าเป็นแบบนี้จะทำได้มั้ย ขอบคุณครับ

ทำได้ครับ ถ้ารู้พิกัดของรูป และไปกำหนดให้กับ CSS ให้ถูกเท่านั้น
7

ช่วยชี้แนะด้วยครับ ผมไม่ค่อยเก่งเรื่อง css เลย ขอบคุณล่วงหน้าครับ ^^
8

อ้างจากคำตอบที่ #8ช่วยชี้แนะด้วยครับ ผมไม่ค่อยเก่งเรื่อง css เลย ขอบคุณล่วงหน้าครับ ^^

555+++

ก็ทำแบบบทความละครับ ไม่มีวิธีอื่น 

อย่างแรกก็ต้องหาพิกัดของรูปก่อนว่าอยู่ตรงไหน (ถ้าหาไม่เจอก็ไม่รู้จะทำไงได้เนาะ)
อย่างที่ 2 ก็เอาพิกัดมาติดลบ แล้วส่งให้ CSS

ผมคงช่วยได้เท่านี้ ที่เหลือคงต้องพยายามหาตำแหน่งเอา หาเจอ ก็กำหนดได้ครับ

หรือ ถ้าไม่ได้จริงๆ ก็คงต้องทำรูปให้มันเข้ากับที่ผมอธิบายไว้ในบทความ ถ้าทำได้ งานก็คงง่ายขึ้นครับ
9

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

จะกำหนดขอบเขตพื้นที่สองรูปแรกให้มาเปลี่ยนรูปที่สองยังไง เด๋วเรื่องพิกัดผมต้องหาอีกที ^^ งงครับ
ลองอยู่ครับแต่ยังไม่ได้ laugh
10

การเปลี่ยนรูป มันอยู่ที่ CSS ครับ แนวคิดก็คือ

ปกติ รูปพื้นหลังจะแสดงที่พิกัดหนึ่ง
เมื่อเมาส์อยู่บน (hover) จะแสดงอีกพิกัดหนึ่ง

ทีนี้ถ้ารูป เป็น 2 รูป อยู่ที่พิกัดเดียวกัน ต่างกันที่รูปหนึ่งเป็นรูปปกติ และ อีกรูปเป็น รูป hover ก็ใช้วิธีเปลี่ยนรูปพื้นหลัง ที่พิกัดเดมก็ได้ครับ
11

จะลองดูครับ ท่านได้ผล ละจะมารายงานครับ ^^
12
^