Home > User Guide

How to Use an External Image 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 click the above white iphone icon, the below background image will be changed to the big white iPhone image. On the other hand, when you click the above black iPhone icon, the below background image will be changed to the big black iPhone image.

                                                                 [View the Demo]                              [Free Download the Demo]

 

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

Note: In this tutorial, I will only show you how to change the background image to the white iPhone background image when we click the white iPhone icon. The same way can be used to change the background image from white iPhone background image to black iPhone background image when we click the black iPhone icon.

 

 

 Step 1: Select a Slice to Trigger the onClick, onMouseOver or onMouseOut Event

Because when we click the white iPhone icon, the below iPhone background image will be changed to white, so we should select the slice that contains the white iPhone icon to trigger the onClick event.

 

 

Note: Here we have already add the black iPhone background image to the No.3 slice. If you don't know how to add a background image to a slice, please contact us for help, we will help you solve this problem easily. Contact our technical support team at: support@slicemaker.com.

 


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

Here we will choose onClick event.

 

onMouseOver event here will determine when your mouse hovers over the white iPhone icon, the below iPhone background image will be changed to white.

onClick event here will determine when you click the white iPhone icon, the below iPhone background image will be changed to white.

onMouseOut event here will determine when your mouse moves away from the white iPhone icon, the below iPhone background image will be changed to white.

 

 

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

 

 

 Step 4: Select the White iPhone Background Image

After clicking the JavaScript Effect -  , a dialog box will appear asking us to select a slice that contains the below iPhone background image.

Here, we will select No. 3 slice because No. 3 slice contains the iPhone background image.

 

 

After click the confirm button, another dialog box will appear asking us to select an image. The selected image will be used to change the black iPhone background image within No.3 slice when onClick.

 

Here, we will select the white iPhone background image:

 

 

Note:

1) Please firstly prepare two iPhone background images - The white one and the black one whose sizes are nearly the same.

2) Please save the images you prepared to the Website Root Directory or its sub directory youve set through SliceMaker products.

 

 

 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 youve got. We promise to you we will deal with your issues within 24 hours. Contact Our Support Team

 

 

Whats 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