Future Students
Undergraduates
Graduates
Current Students
Undergraduates
Graduates
MTSU Alumni
Faculty and Staff
Academic & Instructional Technology Services

Mouseover Image Change

JavaScript Change Image

Description: This JavaScript code will change image automatically when the user puts their cursor on the corresponding link.
Sample:

 
image1 image2
image3 image4

Implement:

  1. Insert JavaScript Code
    • Decide which images you wish to use, and upload them into the images folder of your web site.
      1. Highlight "images" fold in Folder List
      2. Click File, go to Import. The "import window will jump out.
      3. Click "Add File...". Then the "Add File to Import List" Window appears.
      4. Go to the right fold to select an image
      5. Repeat III and IV to add all images into the Import List
      6. Click OK
    • Highlight the following JavaScript code, click edit in tool bar, click Copy.
    • Use the FrontPage to open the web page where the cycle image will be added.
    • Insert image first
      1. Click "Insert" in tool bar, go to "Picture", click "From File..."
      2. Click folder named "images"
      3. Pick one of images there. Click it.
      4. If necessary, fix the image size by mouse
    • Click HTML in the bottom of this page to go to html version.
    • Put the cursor behind tag <body> and click Edit in tool bar , click Paste. You will see that JavaScript code is pasted there.
    • Get rid of both <xmp> and </xmp> tags. It is an important step otherwise the JavaScript will not act in your web page.
    • Change path/01.jpg, path/02.jpg, path/03.jpg, path/04.jpg to the name of images which you want to show. Attention: path represents the path to access the image and *.jpg represents image name. Change them to right path and name to access the image
    • Click Normal at the bottom in the page to go to Normal version
  2. Rename Image
    1. Click HTML at the bottom of the page to go to html view
    2. Change the image name to "picture". If there is no "name" item in <img> tag, add it by typing "name=picture " in it. It will look like <img name="picture" border="0" src="images/01.jpg" width="369" height="265">.
    3. Go to Normal version by click Normal in bottom of the page
    4. high light the link that you want the image changing when you put cursor on that link.
    5. Go back to HTML version, you will see there is high light part. In front of the high light, it should be <href> tag. Add onmouseover="doButtons('images/01.jpg')" onmouseout="doButtons('path /01.jpg')" somewhere in <herf> tag. change images to the path and 01.jpg to the image name. Attention: path represents the path to access the image and *.jpg represents image name. Change them to right path and name to access the image
    6. Repeat step d, e, f until all images are added to corresponding <href> tag
    7. save your page

2011 Middle Tennessee State University, a Tennessee Board of Regents institution 1301 East Main Street, Murfreesboro, TN 37132-0001 USA +1.615.898.2300

Middle Tennessee State University, in its educational programs and activities involving students and employees, does not discriminate on the basis of race, color, national origin, sex, religion, or age. Furthermore, the university does not discriminate against veterans or individuals with disabilities.

Regents Online Campus Collaborative