Creating Rollovers Using ImageReady

BlaqueMajik · August 6, 2005

Beware: This tutorial is NOT fully explained, you need some experience in Photoshop and ImageReady to FULLY understand this tutorial. Although, you may be able to understand and figure it out on your own.

I know there are about 2 tutorials already in this forums on rollovers but this one is different, you will use imageready instead of coding it yourself using Javascript or HTML.

First, open up a new document any size you wish.

Then, create your link the way you want it to look before you put your mouse over it.

Example

Then duplicate your layer(s), (it is best to merge your layers before moving on), and then edit it to what you would like it to look like once your mouse is on it.

Example

Once done with that, make your top layer(s) invisible via the little eye next to the layer in the Layers Pallete.

Afterwards, move your image to Image Ready via the button on the bottom of your tool box.

Once in image ready, there should be a window right above your layers palette with a tab labeled Rollovers. (This is assuming you haven't messed with your windows, other wise go to Windows > Rollovers and it should appear). Once selected, create a new frame in the rollover.

Now once you have a layer called Over State in the Rollover palette, make your topmost layers visible again.

Once your layers are visible, save it as optimized using File > Save as optimized... and create a HTML and images file.

Now, to retrieve the code and images from the file you have just made.

Find your file, and open it in any text editor that support html, which is almost all of them.

Then find the code which should look like this:

<!-- ImageReady Preload Script (Untitled-1) --><script TYPE="text/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) {  Untitled_1_01_over = newImage("images/Untitled-1_01-over.gif");  preloadFlag = true;	}}// --></SCRIPT><!-- End Preload Script --></HEAD><BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();"><!-- ImageReady Slices (Untitled-1) --><A HREF="#"	ONMOUSEOVER="changeImages('Untitled_1_01', 'images/Untitled-1_01-over.gif'); return true;"	ONMOUSEOUT="changeImages('Untitled_1_01', 'images/Untitled-1_01.gif'); return true;">	<IMG NAME="Untitled_1_01" SRC="images/Untitled-1_01.gif" WIDTH=200 HEIGHT=55 BORDER=0 ALT=""></A><!-- End ImageReady Slices -->

Long, yes.

Confusing, yes.

The only good thing is you dont need to edit anything really. Just move it to anywhere you want it on your webpage.

Just don't forget to upload your images to your server also!

This is my first tutorial I have ever made so please be nice

Sign In

Creating Rollovers Using ImageReady

Recommended Posts

BlaqueMajik 0

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Important Information