Home > User Guide

How to Change an Image on Your Webpage when onClick, onMouseOver or onMouseOut?

Below is the result we want to achieve through SliceMaker products:

When your mouse hovers over the image, the image will be changed ------- When your mouse moves away the image, the image will be back to its original.

 

                                             [View the demo]                  [Download the demo]

 

 

You can also view a completed web page created by SliceMaker products to see how this function works for a completed web page.

 

                                                                                    [View the Demo]                                                     [Download the Demo]

 

 

 

The following tutorial will teach you how to achieve the above result, it includes two parts:



 

 

 

 Part 1: How to Change the Image onMouseOver?

 

 Step 1: Select the Slice that Contains the Image that We Want to Change

 

Note: The slice we select should be set as image attribute (If you don¡¯t know how to set a slice as image attribute, please view this tutorial).

 

 

 

 Step 2: Choose an Event - onClick, onMouseOver or onMouseOut

Here we will choose onMouseOver event.

 

 

onMouseOver event here will determine when a visitor¡¯s mouse hovers over the image, the image will be changed to another image.

onClick event here will determine when a visitor¡¯s mouse clicks the image, the image will be changed to another image.

onMouseOut event here will determine when a visitor¡¯s mouse moves away from the image, the image will be changed to another image.

 

 

 Step 3: Click the Add Button to Choose the Corresponding JavaScript Effect

 

 

 

 

 Step 4: Click the Corresponding JavaScript Effect Button You Want to Choose

After clicking the JavaScript Effect button -  , a dialog box will appear asking us to select an image. The selected image will be used as the changed the current image when onMouseOver.

Here, we will select the ¡°changed image¡± image:

 

 

Note:

1) Please firstly prepare the ¡°changed image¡± image which has nearly the same size as the image within the selected slice.

2) Please save the ¡°changed image¡± image to the file folder which has been set as Website Root Directory or to its sub file folder.

 

 

 Step 5: Generate and Preview

After finishing the above settings, please click the generate button. You will immediately see that when your mouse hovers over the image, the image will be changed to ¡°NBA LIVE¡± image.

 

 

 

 

 

 Part 2: How to Restore the Image onMouseOut?

  

 Step 1: Select the Slice that Contains the Image that We Want to Change

 

 

 

 

 Step 2: Choose an Event - onClick, onMouseOver or onMouseOut

Here we will choose onMouseOut event.

 

 

 

 

 Step 3: Click the Add Button to Choose the Corresponding JavaScript Effect

 

 

 

 Step 4: Generate and Preview

That¡¯s all! The desired result we want to achieve has already been created.

 

 

 

 

 Contact Us for Help

If you cannot find a proper solution to your issue through the above methods, our support team is always on standby for whatever problems you¡¯ve got. We promise to you we will deal with your issues within 24 hours. Contact Our Support Team

 

 

 

 

What¡¯s Next:



Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0