-1

Next Problem, i need to make my page hide the background image in the banner <div> when somebody click anywhere in the footer <div>. Again, it needs to use javascript. i was doing some fiddling and took out the background image and replaced it with a colour instead and got it to change colour to test if the onClick() function was working and it did, so i am wondering what the code is to make the image become hidden, i think the start of the line is correct. but am unsure...

Please Help Soon...

This is the HTML Code

<html>
<head>
<title>JavaScript and CSS</title>
<link href="styles2.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript">
function bannerHide()
{
	document.getElementById('banner').style.backgroundImage;	
}
</script>
<body>
<div id="container">
<div id="banner"> </div>
<div id="mainContent"> 
<p onMouseover=document.getElementById('mainContent').style.fontSize='24' onMouseOut=document.getElementById('mainContent').style.fontSize='12'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien  quam, rhoncus at placerat ut, scelerisque in risus. Integer metus nibh,  commodo et feugiat mollis, rhoncus in ante. Nam ultrices lorem sed  lectus ultricies gravida. Proin nec libero ac enim varius placerat a ut  lectus. Donec in lorem et est molestie porttitor a eget sem.  Pellentesque sit amet erat id lectus fermentum tristique a vitae erat.  Proin eu augue ac libero euismod tempor gravida sed orci. Nunc egestas  mollis mauris quis ullamcorper. Cum sociis natoque penatibus et magnis  dis parturient montes, nascetur ridiculus mus. Fusce id ante dui,  egestas sagittis leo. Nunc posuere, erat nec facilisis vehicula, erat  tellus condimentum libero, ut condimentum magna ligula ut metus. Donec  rutrum adipiscing aliquam. Curabitur vehicula libero eu felis hendrerit  sollicitudin. </p>
</div>
<div id="footer" onClick="bannerHide()">
<br>
<SCRIPT>
document.write(Date())
</SCRIPT>
<br>
</div>
</div>
</body>
</html>

This is the CSS

body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #EBEBEB;
	margin: 0;
	padding: 0;
	text-align: center; 
	color: #000000;
}

#container { 
	width: 100%;
	text-align: left; 
}

#banner {
	width: 100%;
	height:50px;
	background-color:#06F;
	background-image:url(../../../Pictures/Wallpapers/World%20of%20Warcraft.jpg);
}

#mainContent {
	width:100%;
	background-color:#CCC;
	text-align:center;
	font-size:12px;
}

#footer {
	width:100%;
	background-color:#06F;
	height:50px;
	text-align:center;
}
3
Contributors
3
Replies
4
Views
7 Years
Discussion Span
Last Post by Atomika3000
0

Hi there,

I'm not really sure what you meant, but I think this is what you were looking for.

document.getElementById('banner').style.visibility="hidden";

This doesn't hide the image, but the entire div. If you'd like to hide the background image however, you could change its url to ' '.

document.getElementById('banner').style.backgroundImage="url(' ')";

Hope this helps,

Traevel

-1

Thanks guys, solved the problem...

That'll save me some sleepless nights...

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.