การใช้รูปภาพแทนปุ่ม Button
1. หา URL ของรูปภาพที่เราต้องการนำมาใช้
2 อันนี้เป็นส่วนของโค้ดนะคะ
<input type = "image" alt = "Search" scr = "URLของรูปภาพที่เราหามา" name = "Image" align = "middle">
3. ให้เราเอา URL ของรูปภาพที่เราหามานะคะ ใส่แทนที่ตัวอักษรสีแดงได้เลยค่ะ
4. Copy Code ทั้งหมดไปวางไว้ในส่วนของ <head> เป็นอันเรียบร้อย
การใช้รูปภาพแทนปุ่ม Button
ใช้ Mouse ชี้ที่ LINK แล้ว CURSOR เปลี่ยนแบบ
คำอธิบายโค้ด
ตัวอักษรสีแดง คือ URL ของ LINK ที่คุณต้องการตัวอักษรสีน้ำเงิน คือ รูปแบบของ CURSOR ที่ต้องการให้แสดงตัวอักษรสีม่วง คือ ข้อความ LINK คุณSource Code (นำโค้ดไปวางไว้ในส่วนที่ต้องการใช้ได้เลยครับ)
<!---ในบรรทัดด้านล่าง ตรงคำว่า move นั้นสามารถเปลี่ยนเป็นรูปแบบของ Cursor ตามที่เราต้องการได้โดยมีรูปแบบดังนี้ hand,Crosshair,text,wait,move,help,n-resize,e-resize,w-resize,ne- resize,nw-resize,se-resize,sw-resize---><a href = "URL ของ LINK " style = "cursor : move"> TEXTLINK </a>
ตัวอย่าง
Click เพื่อเปลี่ยนขนาดภาพ
คำอธิบายโค้ด
ตัวอักษรสีแดง คือ URL ของไฟล์ภาพ
ตัวอักษรสีน้ำเงิน คือ ขนาดภาพก่อนนำเม้าส์ไปคลิ๊ก
ตัวอักษรสีม่วง คือ ขนาดภาพหลังจากเอาเม้าสืไปคลิ๊ก
ตัวอักษรสีเขียว คือ ขนาดภาพก่อนหลังเอาเม้าส์ไปคลิ๊กอีกที
Source Code (นำโค้ดไปวางในตำแหน่งที่ต้องการให้รูปขยายได้เลยจ้าา ^^ )
<img src = "picture.jpg" height = "200" width = "150"
onclick = "this.src = 'picture.jpg';this.height =400;this.width =300"
ondblclick ="this.src = 'picture.jpg';this.height = 200;this.width =150" >
ตัวอย่าง
เสร็จเรียบร้อยแล้ววครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น