Question

194

how to change the image on a image button onmouseover event in HTML?

rated 0 times [ 199] [ 5] / answers: 1 / hits: 22141 / 13 Years ago, tue, february 7, 2012, 12:00:00

I have 4 image button containing a image. on mouse over i have to change the image(i.e load a new image on the button). Here is the code.

<div class =submit id=submit >

    <input  type=image src=dump.png value=Dumb class =Dumb id=Dumb onclick=posting_by_user('Dumb') />

    <input  type=image src=informative.png value=Informative class =Informative id=Informative onclick=posting_by_user('Informative')/>

    <input  type=image src=brilliant.png value=Brilliant class =Brilliant id=Brilliant onclick=posting_by_user('Brilliant')/>

    <input  type=image src=cool.png value=Cool class =Cool id=Cool onclick=posting_by_user('Cool')/>

</div>

Here I have loaded dump.png, informative.png, brilliant.png and cool.png. on mouse over on each button i have to change the image.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

geovannil

Add To Favorites

Follow

Total Points: 226

Total Questions: 99

Total Answers: 103

Location: Zimbabwe

Member since Thu, Jul 21, 2022

2 Years ago

answered 13 Years ago ravenl · Accepted Answer

<input  type=image src=dump.png value=Dumb class =Dumb id=Dumb onclick=posting_by_user('Dumb') onmouseover=changeImg.call(this) />



function changeImg(){

this.setAttribute(src,newImageFileName.jpg);

}

Segregating your code from html is always advised.. this answer will be helpful as it is cleaner and good for debugging..