Introduction

Today you will be making a mouseover, which temporarily replaces an image with another image.

Outline:


Software List:

Back to Thursday's Outline


What does a mouseover look like?


Mouse over an area of science to view a picture of a famous scientist.

Back to Thursday's Outline


Choosing your images

There are several ways that you can obtain images for a mouseover. For this class, you should either find images on the web or make them in GraphicConverter/Photoshop. To obtain images from the web, save them to your filespace just like you've done earlier this week. Try not to choose images that are larger than the screen, but if you do you should probably change the size of the image in either GraphicConverter or Photoshop. If you're comfortable using GraphicConverter or Photoshop, feel free to construct your own images in either of these programs (if you do this, don't forget to save your images in GIF format).

Save your default image as menu.gif. The default image is the image that appears on the page without mousing over it. Save up to five images that you want to appear on your default image when you mouseover specific areas as temp1.gif, temp2.gif, temp3.gif, temp4.gif, and temp5.gif.

Now you need to create the alter the images so that they're usable in your mouseover.

Back to Thursday's Outline


Altering your chosen images


First, open your menu.gif and temp1.gif images in Photoshop. Your screen should look like the following:



Now change the mode of your menu.gif image to RGB Color by selecting Image - Mode - RGB Color.



Next, switch back to the temp1.gif window by clicking on the Window menu and selecting temp1.gif.



Use the rectangular selection tool (upper left box of the toolbar) to select the region of temp1.gif that you want to mouseover menu.gif. Copy this (Edit - Copy on the main menu).



Go back to menu.gif (Window - menu.gif on the main menu). Paste (Edit - Paste in the main menu) the copied portion of temp1.gif onto menu.gif.



Click on the move tool in the toolbar (it's the one in the upper right box).



Click on your pasted image and move it to the appropriate position on the menu.gif image.
In this case the picture of James Watson was placed over the word "Genetics." This way when you mouseover the word "Genetics," James Watson's picture appears. Note that this is the only change to the picture.



Change the mode of the image to Indexed color (located under the Image menu as Mode - Indexed Color), and save the image as one.gif.


Repeat this process for temp2.gif, temp3.gif, temp4.gif, and temp5.gif. Save the altered versions as two.gif, three.gif, four.gif, and five.gif, respectively.

Back to Thursday's Outline


Mouseover code

Once you've altered your images, you need to enter the following Java script to your code.
At the top of your document, before you define the colors of text, copy and paste the following script.
(If you have less than five images that will change your default image, delete any lines that do not pertain to your images. For example, if you only have one.giftwo.gif, and three.gif, then elimate any lines in the code that refer to four.gif and five.gif.)

<script language="JavaScript">

bName = navigator.appName;
bVer = parseInt(navigator.appVersion);
ver = "other";
if ((bName == "Netscape" && !(bVer < 3))
|| (bName == "Microsoft Internet Explorer" && !(bVer < 4))) ver = "good";

if (ver == "good") {

oneoff = new Image();
oneoff.src = "menu.gif";
oneon = new Image();
oneon.src = "one.gif";

twooff = new Image();
twooff.src = "menu.gif";
twoon = new Image();
twoon.src = "two.gif";

threeoff = new Image();
threeoff.src = "menu.gif";
threeon = new Image();
threeon.src = "three.gif";

fouroff = new Image();
fouroff.src = "menu.gif";
fouron = new Image();
fouron.src = "four.gif";

fiveoff = new Image();
fiveoff.src = "menu.gif";
fiveon = new Image();
fiveon.src = "five.gif";

}

function rollon(imgName) {
if (ver == "good") {
document["menumap"].src = eval(imgName + "on.src");
}
}

function rolloff(imgName) {
if (ver == "good") {
document["menumap"].src = eval(imgName + "off.src");
}
}
</script>


Now insert the following in your code where you want the mouseover to appear.
(Once again, if you have less than five images that will mouseover your default image, delete any unnecessary lines in this code.)

<map name="menumap">

<area shape="rect" coords="upperleftx,upperlefty,lowerrightx,lowerrighty" a href="index.htm" name="menumap" onMouseover="rollon('one')"; onMouseout="rolloff('one')"></a>

<area shape="rect" coords="upperleftx,upperlefty,lowerrightx,lowerrighty" a href="index.htm" name="menumap" onMouseover="rollon('two')"; onMouseout="rolloff('two')"></a>

<area shape="rect" coords="upperleftx,upperlefty,lowerrightx,lowerrighty" a href="index.htm" name="menumap" onMouseover="rollon('three')"; onMouseout="rolloff('three')"></a>

<area shape="rect" coords="upperleftx,upperlefty,lowerrightx,lowerrighty" a href="index.htm" name="menumap" onMouseover="rollon('four')"; onMouseout="rolloff('four')"></a>

<area shape="rect" coords="upperleftx,upperlefty,lowerrightx,lowerrighty" a href="index.htm" name="menumap" onMouseover="rollon('five')"; onMouseout="rolloff('five')"></a>

<area shape=default href="menu.gif">

</map>

<center> <table border="5" cellpadding="0" cellspacing="0">
<tr>
<td><img src="menu.gif" name="menumap" border="0" usemap="#menumap">
</td>
</tr>
</table>

The underlined portions of the code require specific coordinates of where your mouseover will happen.
(In the sample mouseover, notice that the picture of James Watson only appears when you mouseover the word "Genetics." In this case the coordinates of the word genetics had to be inserted to define where the mouseover would take effect.)
See the next section,
Specifying coordinates, to learn how to determine the coordinates of the areas where your mouseover will occur.

Back to Thursday's Outline


Specifying coordinates

For this class we will be using rectangular coordinates, which can be specified by using Photoshop.

First, open your menu.gif image in Photoshop.


Under the View menu, select Show Rulers.


Under the File menu, select Preferences - Units & Rulers.


Change the units to pixels and click OK.



Move the cursor to the upper left corner of where you want the menu.gif image to change to the one.gif image. Record the x and y coordinates (located inside the red boxes below). Below the x-coordinate is 70 and the y-coordinate is 50. Repeat this for the lower right corner.

Find the upper-left and lower-right coordinates for all areas of menu.gif that you want two.gif, three.gif, etc. to appear.


Insert the coordinates in your mouseover script in the areas that say upperleftx (for upper-left x-coordinate), upperlefty (for upper-left y-coordinate, lowerrightx (for lower-right x-coordinate), and lowerrighty (for lower-right y-coordinate).

Back to Thursday's Outline