Home > User Guide

How to Use an Image on Your Webpage to Change a Background 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 background image will be changed to the image your mouse hovers:

 

                                                                       [View the demo]                  [Download the demo]

 

Now, I will show you how to achieve the above result with SliceMaker products.

 

 

 

 

 Step 1: Select the Slice that Contains the Image

 

 

Note:

1) Here, we assume that the above 3 slices are one part of your webpage.

2) The No.1 slice should be set as image attribute (If you doní»t know how to set a slice as image attribute, please view this tutorial). While the No.2 slice should be set as background attribute (If you doní»t know how to set a slice as background attribute, please view this tutorial).

3) The No.3 slice here is just used to position the layout, we must use it to contain the No.1 and No.2 slice but we doní»t need to add any attribute to the No.3 slice.

 

 

 

 

 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 background image will be changed to the image.

onClick event here will determine when a visitorí»s mouse clicks the image, the background image will be changed to the image.

onMouseOut event here will determine when a visitorí»s mouse moves away from the image, the background image will be changed to the image.

 

 

 

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

 

 

 

 

 

 Step 4: Click the JavaScript Effect You Want to Choose

After clicking the JavaScript Effect -  , a dialog box will appear asking us to select the other slice (No.2 slice) that contains the background. Once we select the slice (No.2 slice) that contains the background, the background will be changed to the image (No.1 slice) when a visitorí»s mouse hovers over the image.

 

 

 

 

 

 Step 5: Generate the Project

After generating the project, you will immediately view the above result through the built-in previewer of SliceMaker products.

 

 

 

 

 

 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