 |
|
|
Search this site!
|
 |
 |
|
Text Rollover 1 | Text Rollover 2 | Image Rollover 1 | No Underline 1 | Menu links with rollover | Change Scroll Bar Color
|
Image Rollover 1
|
Description:
|
Creating mouse rollovers for text is one thing, but making mouse rollovers using graphical buttons requires a second cup of java! This page expands on the example provided in Trellix's FAQ WD11009.
|
||
How to use:
|
Step 1. Make your buttons
* For each button, you will need two images: one representing when the mouse/cursor is ON the image, and the second representing when the mouse/cursor is OFF the image.
* If you don't know how to create a button, see 'Other Information' below.
Step 2. Store your buttons
* Create a container page in your Trellix file by right clicking in the MAP area, then selecting 'Insert Container Page'.
* Click on the drop down box, and click on 'Captured Resource'. A new window will open up.
* Click on Insert -> From Disk, and load your image into the container page. Repeat until all images are loaded.
* After you have inserted all your images, you are required to identify one image as default. Simply click on Edit -> Set Default
 * Click on File -> Save & Exit. The Container Page Properties window appears. Be sure to record the assigned Resource number! In the example below, the resource number is: Resource:270
 Step 3. Place your buttons
Please notice: generally to insert an image on your page, you simply click on the 'Add Image' icon. But in this case, we will be inserting a 'Build Your Own Web Gem' (BYOWG) for each button. So, if you are going to have 5 buttons on your page, you will be creating 5 BYOWG's!
* Simply cut and paste the provided Javascript code into the BYOWG, and modify the identified lines for your specific images.
* Repeat for as many buttons as you plan to use
* Publish and test it out!
|
||
Example:
|
First, here are the two buttons I will be using:
Now, let's see it in action! Simply move your mouse on & off the button below. Go ahead and click on it, if you wish!
|
||
Download the code
right click on link, then click on 'Save target (or frame) as'
|
|||
Other information:
|
Here is the web site link that tells you how to put text onto a button. This site has many wonderful buttons, bars, and backgrounds. Link is: http://www.cbull.com/testhowto.htm Also for more info on creating and saving images, go to: http://www.cbull.com/howto.htm
Finally, here is a web site with lots of information and tips on scanning in images:
http://www.plu.edu/scanning/scantips.html
|
Source code:
Note: if using this script for multiple buttons, text that needs to be changed is in bold face.
<SCRIPT LANGUAGE="JavaScript">
<!--
function newImage(arg)
{
if (document.images)
{
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages()
{
if (document.images && (Rollover == true))
{
for (var i=0; i<changeImages.arguments.length; i+=2)
{
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var Rollover = false;
function preloadImages(){
if (document.images){
emailoff = newImage("Resource-270/emailoff.jpg");
Rollover = true;
}
}
preloadImages();
//-->
</SCRIPT>
<A HREF="id68.htm" target="_blank" ONMOUSEOVER="changeImages('email', 'Resource-270/emailon.jpg'); return true;" ONMOUSEOUT="changeImages('email', 'Resource-270/emailoff.jpg'); return true;" Target="_Parent">
<IMG NAME="email" SRC="Resource-270/emailoff.jpg" WIDTH=100 HEIGHT=40 BORDER=0></A>
|