Image Slicing can also be used in the construction of rollover buttons. Create a button in Photoshop on one layer with elements you want to change such as text or a motif on separate layers.
When the image in Photoshop is ready click on the Jump to button in the Toolbox to load the layers into ImageReady. Choose Window/Show Slice and use the slice tools to mark out the three buttons as separate images. Select the
Switch to the Rollover palette and click on the New Page icon to create a second state. Switch to the Layers palette, select the element to be changed (e.g. the text layer) and choose Layer/Effects. Choose from the effects available such as Colour Fill, i.e. change the colour of the text for the new rollover state. Repeat this for a third state if required. Click the tiny triangle above the rollover thumbnail to choose the state of the mouse when the rollover is activated.
When you have created the rollover buttons choose File/Save Optimised As and make sure the Save HTML File and Save Images boxes are checked. ImageReady saves the sliced images as separate files in a directory and creates an HTML file with the necessary Javascript to activate the buttons. The following example is based on a single frame of the image which was sliced in the previous example called Jemez_01.GIF.
<HTML><HEAD><TITLE>jemez_01</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (jemez_01.gif) -->
<SCRIPT LANGUAGE="JavaScript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;}}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];}}}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
jemez_01_01_over = newImage("images/jemez_01_01-over.gif");
jemez_01_01_down = newImage("images/jemez_01_01-down.gif");
preloadFlag = true;}}
// --></SCRIPT>
<!-- End Preload Script --></HEAD>
<BODY BGCOLOR=#FFFFFF ONLOAD="preloadImages();">
<!-- ImageReady Slices (jemez_01.gif) -->
<A HREF="#" ONMOUSEOVER="changeImages('jemez_01_01',
'images/jemez_01_01-over.gif');
return true;"
ONMOUSEOUT="changeImages('jemez_01_01', 'images/jemez_01_01.gif');
return true;"
ONMOUSEDOWN="changeImages('jemez_01_01', 'images/jemez_01_01-down.gif');
return true;"
ONMOUSEUP="changeImages('jemez_01_01', 'images/jemez_01_01-over.gif');
return true;">
<IMG NAME="jemez_01_01" SRC="images/jemez_01_01.gif"
WIDTH=200 HEIGHT=164 BORDER=0></A>
<!-- End ImageReady Slices -->
</BODY>
</HTML>
ImageReady creates the images from the rollover windows and ties them to the mouse events OUT, DOWN and UP. This code is more complex than that in the earlier lesson. You could use ImageReady to create the images and then adjust the earlier code to match them.