To follow this tutorial you must know how to (1) View HTML Source of a frame within your Member's Area and (2) you must know how to obtain the file path of an image file stored in your Member's Area Image Store. |
If you find yourself determined to create a mouse roll-over effect button on your pages you can do this by following these instructions.
| 1. | First you must have two images created and uploaded to your Image Store. One image will display when the mouse is hovered over the image and the other will display when your mouse is not over that same area. Here are the example images we will use: Image 1 (TESL-Careers1_TESL-Careers-.jpg):  Image 2 (TESL-Careers1_TESL-Careers.jpg):  |
| 2. | Open a text editor like "Notepad" |
| 3. | Paste the following code into the text editor: <a href="link_text" border=0> <img src="image_1.jpg" onmouseover="this.src='image2.jpg'" onmouseout="this.src='image_1.jpg'"> </a>  |
| 4. | Determine the image path of each of these images. Click here to learn how to find your image path. |
| 5. | Replace both instances of the text image_1.jpg with the first image path. In this case the first image path is uploaded/images/mousoverimages/TESL-Careers1_TESL-Careers-.jpg |
| 6. | Replace the single instance of image_2.jpg with the second image path. In this case /images/mousoverimages/TESL-Careers1_TESL-Careers.jpg |
| 7. | Replace the single instance of link_text with the link url you wish the roll-over button to link with. For this example let's pretend you wish to link to the url www.yahoo.com. |
| 8. | Now we have assigned the main button image, the mouse-over button image and the link URL. You can copy and use the Paste-HTML option to place this html into your web page. Copy the Text  Paste-HTML on to your page  |
| 9. | You should see something like the following: IMPORTANT NOTE: You may also see what appears to be a broken image after your move your mouse over the image (this is normal)  |
| 10. | Save and Preview your page to test your new button. Move your mouse over the image and watch the image change! To get rid of the BLUE LINK outline add the text border=0 inside the <IMG tag >. See this example:  |