Follow

How to make a rollover button for your Ultranet web page

This article provides some guidance on how to make a rollover button on an Ultranet webpage.

Step 1: Creating the Images

Firstly, create the images you want to use for the rollover buttons. You will need two images which have exactly the same dimensions.

Tip: There are many ways to make your own images and don’t require you to have high end software.  GIMP is an open source image editor and is a good alternative to Adobe Photoshop. You can also use software such as Powerpoint, Publisher and Keynote in conjunction with GIMP to create your images. 

Step 2: Uploading the Images into Ultranet

Open the Image Manager, make a new folder (e.g. Rollovers_buttons) and upload the images into this folder. (For more of the basics on uploading media refer to this article).

Take note of the URL shown in the address line of the Image Manager dialogue box. This references the Page_ID and shows the path to the folder where the rollover images are stored.

e.g. “/DataStore/Pages/PAGE_1/Docs/Documents/Rollover_buttons” 

 

Step 3: Entering the html code for your rollover button

1. Open the HTML tab of the Page Editor and paste the following code on to the page:

<a href="REPLACE THIS TEXT WITH TARGET URL OF THE FIRST BUTTON" target="_blank" tabindex="-1">

<img alt="" src="REPLACE THIS TEXT WITH THE FILEPATH AND FILENAME OF THE FIRST ROLLOVER IMAGE" onmouseover="this.src='REPLACE THIS TEXT WITH THE FILEPATH AND FILENAME OF THE 2ND ROLLOVER IMAGE'" onmouseout="this.src='REPLACE THIS TEXT WITH THE FILEPATH OF THE FIRST ROLLOVER IMAGE'"

style="width: XXXpx; height: XXXpx;" /> </a>

 

2. Edit the code replacing the block text with the references to your own pages and images.

Here is what the code for the first rollover button on the Matapihi website looks like. 

<a href="/WebSpace/122/" target="_blank" tabindex="-1">

<img alt="" src="/DataStore/Pages/PAGE_1/Docs/Documents/Rollover_buttons/rolloverbutton1.jpg" onmouseover="this.src='/DataStore/Pages/PAGE_1/Docs/Documents/Rollover_buttons/rolloverbutton2.jpg'" onmouseout="this.src='/DataStore/Pages/PAGE_1/Docs/Documents/Rollover_buttons/rolloverbutton1.jpg'" style="width: 200px; height: 130px;" /> </a>

 

Tip: To create more than one rollover button repeat the process and place each rollover image into a cell in an HTML Table to control the layout.


 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk