changing a background image to a background colour?

Dj Frenzy · Feb 9, 2004

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

kaeli · Feb 9, 2004

dado0583 said:
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

Randy Webb · Feb 10, 2004

Dj said:
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".

Robert · Feb 10, 2004

Randy Webb said:
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

Changing a background-color	2	Aug 2, 2023
Animate a background image	0	May 4, 2022
Background image not showing up on html page	3	Sep 23, 2023
Code for background image in website?	3	Jul 19, 2022
How do I remove the background of an image (Pygame)	0	Dec 23, 2022
I just want a background image	5	Jan 3, 2020
Change to background image.	5	Dec 18, 2018
Background animation infinite zoom-in zoom-out	0	Jul 1, 2022

changing a background image to a background colour?

Dj Frenzy

kaeli

Randy Webb

Robert

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads