Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2004
    Location
    Rochester, MN
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with Images that change with list mouseover

    I know some basic html and a little php. So I am basically web programming challenged. I am learning but I need some help. What I want to do is as follows:

    1) Create a static list in a table cell.
    2) When the mouse pointer is moved over the cell I want to have the next cell contain an image that changes and is unique for each item in the list. I have about 5 items currently in the list.

    Does anyone have script that does this that I could obtain and modify, or provide me with guidance on how to do the above? Any help would be much appreciated.

    imageman/rongreen:

    1/12/04 - Works like a charm. Many thanks. thumbsup:
    Last edited by rongreen; 01-13-2004 at 12:22 AM.

  • #2
    New Coder
    Join Date
    Dec 2003
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this:

    <table border="0" cellspacing="0" bordercolor="#111111" width="100%" cellpadding="0">
    <tr>
    <td width="21%" onMouseOver="image1.src='image1.gif'" onMouseOut="image1.src='default_image.gif'">Item A</td>
    <td width="79%" rowspan="5">
    <p align="center"><img name="image1" src="default_image.gif"></td>
    </tr>
    <tr>
    <td width="21%" onMouseOver="image1.src='image2.gif'" onMouseOut="image1.src='default_image.gif'">Item B</td>
    </tr>
    <tr>
    <td width="21%" onMouseOver="image1.src='image3.gif'" onMouseOut="image1.src='default_image.gif'">Item C</td>
    </tr>
    <tr>
    <td width="21%" onMouseOver="image1.src='image4.gif'" onMouseOut="image1.src='default_image.gif'">Item D</td>
    </tr>
    <tr>
    <td width="21%" onMouseOver="image1.src='image5.gif'" onMouseOut="image1.src='default_image.gif'">Item E</td>
    </tr>
    </table>


    If you dont want any image in the cell initially, just make the "default_image.gif" fully transparent OR the same colour as the background.

    Hope this helps.

    Murdz
    Spiral Out

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    you must use absolute reference to the image to make it cross-browser.

    onMouseOver="document.images['image1'].src='image1.gif'"


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •