By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,092 Members | 1,546 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,092 IT Pros & Developers. It's quick & easy.

changing a background image to a background colour?

P: n/a
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
Share this Question
Share on Google+
4 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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.