469,647 Members | 1,800 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,647 developers. It's quick & easy.

changing a background image to a background colour?

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
Jul 20 '05 #1
4 2267
In article <81*************************@posting.google.com> , 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

Jul 20 '05 #2
You can always make up an image of any color you want and swap it as you
would an image.

Gif one color images are amazingly small.

Robert
Jul 20 '05 #3
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='transpar ent.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/

Jul 20 '05 #4
Randy Webb <hi************@aol.com> wrote in message news:<qN********************@comcast.com>...
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='transpar ent.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
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Ali | last post: by
25 posts views Thread by Neal | last post: by
2 posts views Thread by Patrick | last post: by
2 posts views Thread by Haines Brown | last post: by
8 posts views Thread by Brian Ward | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.