SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Rollovers

  1. #1
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rollovers

    Lo guys,

    I want to have a table with has 4 cells in each corner. When the mouse is over one of these cells I want an image in a cell in the centre of the table to change. But I want to have a different image for each outer cell appear in the centre when the mouse is over it.


    Is there anyway to do this

    I have tried and tried to find something but had no luck.

    Thanks

  2. #2
    SitePoint Member
    Join Date
    Feb 2001
    Location
    New Zealand
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should be able to do this quite easily depending what is in the four corner cells. If it is text or images there should be no problem, however if you are wanting empty cells, you can probably use transparent images in each one and use the mouseover function on each one the same as if you were using a normal image.
    Does this answer your question?

  3. #3
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No not at all!

    I know how to do a rollover. I just dont know how to have 4 TDs that when you roll the mouseover them they each change an image that is in the same place.

    If you rollover text in TD_1 then an image in TD_5 changes;
    If you rollover text in TD_2 then an image in TD_5 changes;
    If you rollover text in TD_3 then an image in TD_5 changes;
    If you rollover text in TD_4 then an image in TD_5 changes;

    I can do this with show/hide layers but I would REALLY love to avoid using them!

  4. #4
    SitePoint Member
    Join Date
    Feb 2001
    Location
    New Zealand
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, in first in your head, preload and define your images.

    <SCRIPT LANGUAGE="JAVASCRIPT">
    if (document.images) {
    image1 = new Image
    image2 = new Image
    image3 = new Image
    image4 = new Image
    image5 = new Image

    image1.src = "your-image1.jpg"
    image2.src = "your-image2.jpg"
    image2.src = "your-image3.jpg"
    image2.src = "your-image4.jpg"
    image2.src = "your-image5.jpg"

    }
    </SCRIPT>

    Then in your TD_1, write:

    <a href="somewhere.html"
    onMouseover="document.pic.src=image2.src" onMouseout="document.pic.src=image1.src">Left Top</a>

    in your TD_2, write:

    <a href="somewhere.html"
    onMouseover="document.pic.src=image3.src" onMouseout="document.pic.src=image1.src">Right Top</a>

    same for TD_3,4:

    <a href="somewhere.html"
    onMouseover="document.pic.src=image4.src" onMouseout="document.pic.src=image1.src">Left Bottom</a>

    <a href="somewhere.html"
    onMouseover="document.pic.src=image5.src" onMouseout="document.pic.src=image1.src">Right Bottom</a>


    Then in your TD_5, write:

    <img src="your-image1.jpg" name="pic" border="0">

    Does that answer you now?
    NOTE: image1 is your default image.

  5. #5
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup, thanks alot , ill try it!

  6. #6
    SitePoint Member
    Join Date
    Feb 2001
    Location
    New Zealand
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yah, sorry, my bad !!

    This part:

    image1.src = "images/black.gif"
    image2.src = "images/green.gif"
    image2.src = "images/blue.gif"
    image2.src = "images/orange.gif"
    image2.src = "images/red.gif"

    should be:

    image1.src = "images/black.gif"
    image2.src = "images/green.gif"
    image3.src = "images/blue.gif"
    image4.src = "images/orange.gif"
    image5.src = "images/red.gif"

    sorry, it will work now.

  7. #7
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah just noticed that too and deleted the post.

    Thanks thats great


Bookmarks

Posting Permissions

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