changing a background image to a background colour?

Discussion in 'Javascript' started by Dj Frenzy, Feb 9, 2004.

  1. Dj Frenzy

    Dj Frenzy Guest

    Hi, I know how to use javascript to change a background image to
    another background image, and how to change a background colour to
    another background colour. Is there a way to change an image to a
    backgound colour?

    I have a table with a background that has a picture. When the user
    hovers over the picture I want the background to change to the
    background colour of the rest of the page, as if to make the picture
    disappear.

    Cheers,
    Dave
    Dj Frenzy, Feb 9, 2004
    #1
    1. Advertising

  2. Dj Frenzy

    kaeli Guest

    In article <>, dado0583
    @hotmail.com enlightened us with...
    > Hi, I know how to use javascript to change a background image to
    > another background image, and how to change a background colour to
    > another background colour. Is there a way to change an image to a
    > backgound colour?
    >
    > I have a table with a background that has a picture. When the user
    > hovers over the picture I want the background to change to the
    > background colour of the rest of the page, as if to make the picture
    > disappear.
    >
    > Cheers,
    > Dave
    >


    This worked in IE6. Didn't test it in any other browsers.

    <html>
    <head>
    <title> New Document </title>
    <script type="text/javascript" language="javascript">
    function changeIt(el,w)
    {
    if (w=="image")
    {
    el.style.background="url(warning.gif)";
    el.style.backgroundColor="transparent";
    }
    else
    {
    el.style.background="";
    el.style.backgroundColor="red";
    }
    }
    </script>
    </head>

    <body>
    <p>Hi there. This is a test.</p>
    <table border="1" cellpadding="3" id="t" onMouseOver="changeIt
    (this,'color')" onMouseOut="changeIt(this,'image')"
    background="warning.gif">
    <tr>
    <td>test1</td>
    <td>test2</td>
    <td>test3</td>
    <td>test4</td>
    </tr>
    <tr>
    <td>test1</td>
    <td>test2</td>
    <td>test3</td>
    <td>test4</td>
    </tr>
    </table>
    </body>
    </html>

    --
    --
    ~kaeli~
    The man who fell into an upholstery machine is fully
    recovered.
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
    kaeli, Feb 9, 2004
    #2
    1. Advertising

  3. Dj Frenzy

    Randy Webb Guest

    Dj Frenzy wrote:

    > Hi, I know how to use javascript to change a background image to
    > another background image, and how to change a background colour to
    > another background colour. Is there a way to change an image to a
    > backgound colour?
    >
    > I have a table with a background that has a picture. When the user
    > hovers over the picture I want the background to change to the
    > background colour of the rest of the page, as if to make the picture
    > disappear.
    >


    onmouseover="oldSource=this.src;this.src='transparent.gif'"
    onmouseout="this.src=oldSource"

    transparent.gif is a 100% transparent gif. When its swapped, it gives
    the illusion of making the original "disappear".


    --
    Randy
    Chance Favors The Prepared Mind
    comp.lang.javascript FAQ - http://jibbering.com/faq/
    Randy Webb, Feb 10, 2004
    #3
  4. Dj Frenzy

    Robert Guest

    Randy Webb <> wrote in message news:<>...
    > Dj Frenzy wrote:
    >
    > > Hi, I know how to use javascript to change a background image to
    > > another background image, and how to change a background colour to
    > > another background colour. Is there a way to change an image to a
    > > backgound colour?
    > >
    > > I have a table with a background that has a picture. When the user
    > > hovers over the picture I want the background to change to the
    > > background colour of the rest of the page, as if to make the picture
    > > disappear.
    > >

    >
    > onmouseover="oldSource=this.src;this.src='transparent.gif'"
    > onmouseout="this.src=oldSource"
    >
    > transparent.gif is a 100% transparent gif. When its swapped, it gives
    > the illusion of making the original "disappear".


    Note: At least in this case, a web browser will automaticlly expand
    the size of your gif image to fit what is in the html file. This
    means a one pixel transparent image is fine.

    Robert
    Robert, Feb 10, 2004
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Helen
    Replies:
    2
    Views:
    3,729
    Helen
    Sep 6, 2004
  2. Simon Harris

    Datagrid - Changing row colour

    Simon Harris, Feb 9, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    488
    Eliyahu Goldin
    Feb 10, 2005
  3. William Park

    changing colour of cursor

    William Park, May 12, 2005, in forum: HTML
    Replies:
    1
    Views:
    417
    Mark Parnell
    May 13, 2005
  4. NeoPhreak
    Replies:
    3
    Views:
    136
    NeoPhreak
    Aug 5, 2003
  5. jodleren
    Replies:
    2
    Views:
    200
    Thomas 'PointedEars' Lahn
    Jan 12, 2008
Loading...

Share This Page