How can I use roll-over or mouse-over with pictures?

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I would like to make buttons with pictures and to use mouse-over ( or roll-over ) effect.
I tried to get codes from websites like the below one but could not manage to understand where to put the codes on my page.

And here are the codes I got from this website.

Could you show me step by step how to make a roll-over or mouse-over with two pictures?

Thanks in advance.

Photo of turkanemlak


  • 39 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of David


  • 465 Posts
  • 94 Reply Likes
The simplest way is to use the code below without the <!-- and -->

<img src="the image you want when the page loads" onMouseOver="src='the image you want when moused over'" onMouseOut="src='the image you want after the mouse has left'"></img>

Drag an html widget over to where you would like the image and edit the code to include your image locations which will look something like

resources/the name of your image.jpg

I use a text widget for this as you can move it about with the margins, to do this you will need to prepare the code with your image locations in notebook then drag a text widget over, click on html in the toolbar, delete whatever code displays then just copy and paste your prepared code straight in.

I hope this is clear, if not post back and I'll clarify any points you have.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Forget about the old school javascript method -The best way to do it is with CSS.

Check out this article for background knowledge. (probably easier than trying to explain it here)
Photo of Nazlie


  • 1721 Posts
  • 51 Reply Likes
Good idea, Duke! CSS is definitely an option for image rollovers.
Photo of turkanemlak


  • 39 Posts
  • 0 Reply Likes
Thanks a lot David.
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Or Simply use Jquery:


//Action here


Best Regards,