Image mouse over change

I’m trying to find an efficient way to do a simple web task.

What’s the best way to have an image that changes on mouse over and then back on mouse leave.

Mouse enter and leave definitely is not the right way.

I’d use the « normal » and « hover » state , available using WebStyles (or css and classes)

That works ok for text, it’s an image I’m trying to show and switch between

Have a look to this thread How to set backgound image to Webcontainer and Webbutton .
The CSS background image property is used to display an image.

You can create your own CSS rules and use different images for normal/hover state.

Have a look here to see how you defined css, style and classes:


<div class="myclass"></div>


.myclass {
   background-image: url(‘image1.png');
   height: 70px;
   width: 120px;

.myclass:hover {
   background-image: url(‘image2.png');

thanks Oliver