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.
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.
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>