473,499 Members | 1,609 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 2460
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
2366
by: Ali | last post by:
Hi, I wrote the following code and when I loaded the images as static images my background displayed as black (set at start of code), however, now I've started (trying!) to get my image to move,...
25
12898
by: Neal | last post by:
According to the CSS lint at http://htmlhelp.org/tools/csscheck/, "The shorthand background property is more widely supported than background-color." Can anyone point me to, or provide, information...
1
2011
by: Dan V. | last post by:
Does anyone know why the header looks correct in IE 6.0 and not Firefox 1.07? I am trying to have a header that looks good when you expand it wider and smaller. In other words when you shrink...
2
3052
by: Patrick | last post by:
Hi All, I am trying more and more to incorporate CSS into my work here. I have currently been playing around with fluid design and tableless layout. Currently I am trying to make a background...
6
15532
by: Piyu | last post by:
Hi, I am working in jsp pages.in that i used background colour for heading through css.and those colours(heading, image background colour also) are not coming in printing. from my machine i...
2
1788
by: Haines Brown | last post by:
I have situations in which I define the color attribute for an element that is displayed against a background-image. For example, an incipit: #intro:first-letter { margin: -0.05em 0.2em -0.2em...
8
10141
by: Brian Ward | last post by:
I am looking for a simple way to set the image transparency in a PictureBox. I have a moving PictureBox containing a graphic image .. moving by incrementing its Left property. The background...
1
4014
by: deshg | last post by:
Hey everyone how are you all doing? I am trying to use the imagerotate GD function to place an image on top of another image at an angle. Obviously when it rotates an image it creates a...
19
3960
by: david.karr | last post by:
If in my CSS I set the "background-color" property on the "body" element, it only covers the background of the elements defined in the body, up to the current width and height of the page. However,...
0
7134
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
7229
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
1
6905
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
4609
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
0
3108
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
3103
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
1429
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
1
667
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
311
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.