472,370 Members | 2,561 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,370 software developers and data experts.

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 2369
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
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
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
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
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
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
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
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
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
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
by: Naresh1 | last post by:
What is WebLogic Admin Training? WebLogic Admin Training is a specialized program designed to equip individuals with the skills and knowledge required to effectively administer and manage Oracle...
0
by: Arjunsri | last post by:
I have a Redshift database that I need to use as an import data source. I have configured the DSN connection using the server, port, database, and credentials and received a successful connection...
0
hi
by: WisdomUfot | last post by:
It's an interesting question you've got about how Gmail hides the HTTP referrer when a link in an email is clicked. While I don't have the specific technical details, Gmail likely implements measures...
1
by: Matthew3360 | last post by:
Hi, I have been trying to connect to a local host using php curl. But I am finding it hard to do this. I am doing the curl get request from my web server and have made sure to enable curl. I get a...
0
Oralloy
by: Oralloy | last post by:
Hello Folks, I am trying to hook up a CPU which I designed using SystemC to I/O pins on an FPGA. My problem (spelled failure) is with the synthesis of my design into a bitstream, not the C++...
0
by: Carina712 | last post by:
Setting background colors for Excel documents can help to improve the visual appeal of the document and make it easier to read and understand. Background colors can be used to highlight important...
0
BLUEPANDA
by: BLUEPANDA | last post by:
At BluePanda Dev, we're passionate about building high-quality software and sharing our knowledge with the community. That's why we've created a SaaS starter kit that's not only easy to use but also...
2
by: Ricardo de Mila | last post by:
Dear people, good afternoon... I have a form in msAccess with lots of controls and a specific routine must be triggered if the mouse_down event happens in any control. Than I need to discover what...
0
by: jack2019x | last post by:
hello, Is there code or static lib for hook swapchain present? I wanna hook dxgi swapchain present for dx11 and dx9.

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.