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

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







จะเหมือนลักษณะ 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>
03 ก.พ. 2554 12 2,152

ใช้ 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
ความคิดเห็น
ไฟล์อัปโหลด ชนิด jpg, jpeg ขนาดไฟล์ไม่เกิน 1024
^