#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 1999
    Location
    St.JOhn's, Newfoundland, Canada
    Posts
    7
    Rep Power
    0
    I need a script that when you run the mouse over a text or image link, and it displays an image in another table cell.

    The images that I need to use are

    Before mouseOver

    medstudents.gif image to display in other cell when mouseover occurs is medstudent_desc.gif

    medresidents.gif image to display in other cell when mouseover occurs is medresidents_desc.gif

    pracphyis.gif image to display in other cell when mouseover occurs is pracphyis_desc

    imm.gif image to display in other cell when mouseover occurs is imm_desc

    job.gif image to display in other cell when mouseover occurs is job_desc

    Can someone please give me the script with these images inserted.

    Thanks
    Tim

  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 1999
    Posts
    84
    Rep Power
    15
    <HTML>
    <HEAD>
    <TITLE>Simple Image Rollover</TITLE>
    <SCRIPT LANGUAGE=JAVASCRIPT>
    <!--//
    /* Author: Spookster
    * Email: ts_spook@hotmail.com
    * Description: This script will preload your images and allow you to
    * produce a dynamic rollover effect.
    */

    // This statement detects if the browser supports the image object
    if (document.images) {

    //This section instantiates or creates the image objects
    //You can also add the width and height of the images inside the parentheses seperated by a comma
    image1 = new Image();
    image2 = new Image();

    //This section specifies the location or url of the images to be used
    image1.src = "image1.jpg"
    image2.src = "image2.jpg"
    }
    //-->
    </SCRIPT>
    </HEAD>
    <BODY>
    <!-- To produce the rollover effect you will use the onMouseove/onMouseout event
    handlers. You must give your image tag an id. To do that you will just add the
    name attribute(ie. <img name="myimage"> ) inside of the image tag. Then
    refer to the image you would use "document" which refers to the page that the
    image tag resides in followed by a period and the you type the name you gave
    to the image with the name attribute and then another period and type "src=".
    The src is what you assigned to the location of the image to be changed back
    in the script(ie. image1.src). If you wanted to change an image located in
    another frame then the statement in your onMouse event handler would look
    something like this:
    onMouseover="parent.framename.document.rollover.src=image2.src"
    You will just need to add a path to the other image. In this case you refer to the
    parent window and the the framename and then continue the statement as usual.
    One final note- In the HREF if you want an actual link to another page then just
    put the link in there. If you do not want to link to another page then you can
    just use the following to disable the HREF portion: HREF="javascript:void(null);"
    -->
    <A HREF="somewhere.html" onMouseover="document.rollover.src=image2.src" onMouseout="document.rollover.src=image1.src">
    <IMG SRC="image1.jpg" border="0" name="rollover"></A>
    </BODY>
    </HTML>

    Spookster

Similar Threads

  1. Finding Images in HTML
    By beardo in forum PHP Development
    Replies: 14
    Last Post: March 28th, 2004, 06:29 AM
  2. Problem with image resizing
    By willms_jay in forum PHP Development
    Replies: 0
    Last Post: February 12th, 2004, 12:23 AM
  3. Browser (cache?) problem after image upload
    By mugane in forum PHP Development
    Replies: 7
    Last Post: November 4th, 2003, 11:39 AM
  4. How to make textwrap around image?
    By kippie in forum HTML Programming
    Replies: 4
    Last Post: March 11th, 2003, 09:31 AM
  5. Javascript image preload race condition
    By lmcccha in forum JavaScript Development
    Replies: 5
    Last Post: February 13th, 2003, 08:21 PM

IMN logo majestic logo threadwatch logo seochat tools logo