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

    Join Date
    Feb 2004
    Posts
    2
    Rep Power
    0

    CSS image/text rollovers- how?


    Using either CSS, or JavaScript, or a combination of both; is it possible to do this without using frames?:

    image1 and image2 are laid out horizontally across the top of the page.

    When the mouse hovers over image1, a formatted body of text (lets call it "text1") is displayed beneath the layout of images. As the mouse leaves image1, the text disappears.

    When the mouse hovers overs over image2, a different body of text ("text2") appears in the same area where text1 was displayed. It also disappears as the mouse leaves.

    I am probably very obviously a newbie. I have read examples that show how to do similar things with frames, and I can script simple image rollovers, but I am a little lost here, so even if this is too basic a question, if you can point me in the right direction to learn how, I would appreciate it much. Thanks in advance for any help or suggestions!
  2. #2
  3. Bites when cornered
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Back from Iraq!
    Posts
    109
    Rep Power
    13
    Writing a script to do that is fairly simple.
    The method I would use is to contain the formatted text in a div and change it's display properties via Javascript:
    Code:
    (untested)
    <html>
    <head><title>Test</title>
    <style>
    #i1 /* formatting for image 1 text */
    {
      display: none;
      font: 10pt "Tahoma";
    }
    
    #i2 /* formatting for image 2 text */
    {
      display: none;
      font: 10pt "Tahoma";
    }
    
    </style>
    <script>
    function show_chunk(id)
    {
      var chunk = document.getElementById(id);
      chunk.style.display = "block";
    }
    
    function hide_chunk(id)
    {
      var chunk = document.getElementById(id);
      chunk.style.display = "none";
    }
    </script>
    </head>
    <body>
    <img src="image1.gif" onmouseover="show_chunk('i1');" onmouseout="hide_chunk('i1');">
    <img src="image2.gif" onmouseover="show_chunk('i2');" onmouseout="hide_chunk('i2');">
    
    <div id="i1">
    This is the text for our first image.  It cannot be seen until the image is hovered over.
    </div>
    
    <div id="i2">
    This is the text for our second image.  It cannot be seen until the image is hovered over.
    </div>
    ...
    rest of html
    A word of warning: if you don't preserve a spot for the text to display into, you will experience "reflow," or dynamic redrawing of your page (ie when you hover over the image, the text that shows will "push" the rest of the page down). There are two ways to prevent this: you can set the display property (ie chunk.display) to hidden, or you can save it a spot by using CSS. I prefer using CSS because I feel it gives me more control than letting the browser decide.


    HTH
    Obstruct the doors, cause delays, be dangerous.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    2
    Rep Power
    0
    Thanks so much. That is exactly the kind of thing I was looking for.

Similar Threads

  1. HTML & CSS site sizing problem
    By WorldBuilder in forum CSS Help
    Replies: 3
    Last Post: September 23rd, 2003, 10:21 PM
  2. CSS and Rollovers?
    By -proteus- in forum CSS Help
    Replies: 11
    Last Post: May 10th, 2003, 03:02 PM
  3. Help needed with css rollovers
    By Clod in forum CSS Help
    Replies: 2
    Last Post: April 26th, 2003, 08:15 PM
  4. css opacity rollovers
    By lnuxhakr in forum CSS Help
    Replies: 2
    Last Post: November 27th, 2002, 08:06 AM
  5. Page weight with CSS
    By Phil_work in forum CSS Help
    Replies: 0
    Last Post: October 31st, 2002, 05:06 PM

IMN logo majestic logo threadwatch logo seochat tools logo