| Image changing menu |
Would you like to have an image-changing menu, sort of like on the top of this page? As you can see, when you put your mouse over one of the links, the image changes to show a description of that topic. Below I will show you how to make an image-changing menu two ways, one that changes the image when the mouse is put over it, or one that changes a single image when a mouse is put over some other link. the single change menu The singe change menu is much like the menu on the very top, a single image is changes when the mouse is put over a certain link on the page. I will guide you step by step with this. 1. First of all, you will need to actually think about how you would like your menu set up. Will you have sort of like a description of a link or will you have it some other way? Once you figured it out, you will need to actually make each of the images you want to be shown when the mouse is passed over a link. You will also need to make an image that will be the default image when the mouse isn't passing over one of the links. All of these images must be saved in the gif format.
2. Once you have made each of your images, it's recommended that you put them in a separate directory, such as menu so you could reference them easier. Now, name each of the changing images with the prefix on_. For example, you make three changing images and you can call them on_resource.gif, on_frontpage.gif, and on_tutorial.gif. You'd also make a default image which would have to be called on_blank.gif. You'd then put all of these images in the menu directory. 3. You will now need to insert the actual script into your webpage. I'd recommend you put this script inside the <head></head> tags. The code that you will need to copy and paste in between these tags is: <script language="JavaScript">
4. Now you will need to modify this code. See where it says on_image1. As you can see, the whole list is filled in with four of these types of lines, the three images and one "blank" image. Replace each of the "image" statements with your image names. For example, if one of my images was called on_reource and it was available in the path /menu/on_resource.gif, one of the two lines should look like this: on_resource = new Image(); Do the same thing for all of the image statements and if you have more than three images, feel free to add another one of the two lines. Make sure that if you have you default image named anything besides on_blank (but with the on_ prefix, of course), you make that change in the last statement and also in the document [sn].src = on_blank.src statement at the end of the script (replace on_blank with the changed default image). In our example, we'll add five statements, four of just the changing images and one of the default images. We'll also change the default image name instead of on_blank to on_default. Here's what the final code will look like in our example <script
language="JavaScript"> Note that the dark blue lines indicate the only changes done to the script. Once you are done with this part, you'll have to leave the rest of the stuff alone.
5. We will now need to mark the other tags in html so the script can use them. First of all, in the main changing <img> tag, the image that is going to be changed by the mouse over links, you will need to add the following statement: name="on". The path to this image also needs to point at the default image file. In our example, the <img> tag would look like this: <img src="menu/on_default.gif" name="on"> .
6. Now we will need to tell the link tags to change that image to a specific image when the mouse is passed over the link. To do this, add onMouseOver="mOverWork('image');" onMouseOut="mOutWork('image')" to each of the <a> (link) tags. Replace image with the name of the image you want shown on the default image, this time without the on_ prefix. If in our example we'd like the default image to change to the resource description image when we put our mouse over the chosen link and come back to the default image when the nouse leaves the link, we'll simply need to put in the tag <a href="resource.shtml" onMouseOver="mOverWork('resource');" onMouseOut="mOutWork('resource')">. Note that image is replaced by the non-prefixed name of the image- resource.
7. Go ahead and make these links, just be sure to put in that statement in all of your tags and modify it. This is how our final example will look like with all of the given tags:
<script language="JavaScript"> The result will look just the same as the image at the top of this page. Play around with this and see what you get. Just remember not to change the credits. Have fun! |