Change a background-picture

[Renegade605]

What I want to do is to use the events (onmouseover/out, etc.) to change the background picture of a div. I want to do this so that making my navigation bars will be easier. Right now I have to make new images with text on them for every change I make. Instead, I want to make a div whose background looks like a navigation button, and just put text over that image. This is my code for the button:

<div id="nav_home" style="background-image: url(images/buttons/nav/nav_normal.gif); height: 41px; width: 1px;"><a href="index.html"><p style="text-align: center; font-size: 80%; margin: 12px 4px 0px 4px;">Home</a></p></div>

To change the picture I've tried the following variations of code in the onmouseover event of the <p>, <a>, and <div>, none of which worked.document.getElementById('nav_home').style.background-image = url(images/buttons/nav/nav_hover.gif);document.getElementById('nav_home').style.background-image = 'images/buttons/nav/nav_hover.gif';document.getElementById('nav_home').background-image = url(images/buttons/nav/nav_hover.gif);document.getElementById('nav_home').background-image = 'images/buttons/nav/nav_hover.gif';I'll assume I just need a different code to make this work, but I'm at a loss.

[Synook]

You need to use camelCase instead of hyphens and have quotes around the value

document.getElementById('nav_home').style.backgroundImage = "url(images/buttons/nav/nav_hover.gif)";

But why not just use CSS completely? Your code is currently invalid and overly complicated

<style type="text/css">	div#navigation a {		background-image: url(images/buttons/nav/nav_normal.gif);		height: 41px;		display:block;		text-align: center;		font-size: 80%;		padding: 12px 4px 0px 4px;	}	div#navigation a:hover {		background-image:url(images/buttons/nav/nav_hover.gif);	}</style><!-- end head, start body --><div id="navigation">	<a href="index.html">Home</a>	<a href="about.html">About</a>	<!-- Etc... --></div>

[Renegade605]

Thanks a bunch. However, in using CSS completely, two problems arise:-I cannot add an image to both sides of the navigation (nav_left.gif and nav_right.gif) because their positions are about 8px higher than that of the others.-The code does not keep all the anchors on the same line, it puts each one on its own line.If anyone knows a way to avoid that, that would be great, if not, I'll just stick with the script.

[Synook]

To put them on the same line, use float:left

	div#navigation a {		background-image: url(images/buttons/nav/nav_normal.gif);		height: 41px;		display:block;		text-align: center;		font-size: 80%;		padding: 12px 4px 0px 4px;		float:left;		margin-right:5px;	}	div#navigation a:hover {		background-image:url(images/buttons/nav/nav_hover.gif);	}

For your first problem, could you post the code you have currently?

[Renegade605]

The problem with using float:left is that the imgs are not centered on the page now, they are at the left side. Other than that, it seems doing that has solved both problems in favor of one more. The nav_left.gif and nav_right.gif do not touch the anchors in the center, there is about 4px space between them.EDIT: I solved that by changing the display property to inline instead of block, and removing the float:left. Now I'm back to my original problem:What it looks like now:What it should look like:Code:

<!-- Begin html, and head. Title and Meta Tags --><link rel="stylesheet" type="text/css" href="external/stylesheet.css" /><style type="text/css">div#navigation{	text-align: center;}div#navigation a{	background-image: url(images/buttons/nav/nav_normal.gif);	height: 41px;	width: auto;	display: inline;	text-align: center;	padding: 12px 4px 0px 4px;}div#navigation a:hover{	background-image:url(images/buttons/nav/nav_hover.gif);}div#navigation a#nav_current{	background-image:url(images/buttons/nav/nav_current.gif);}</style><!-- Some scripts. End Head, Begin Body --><div id="navigation">	<img src="images/buttons/nav/nav_left.gif" alt="<-- Navigation"	/><a href="index.html" id="nav_current">Home	</a><a href="http://forums.theunitedfrontclan.com/index.php">Forums	</a><a href="recruitment.php">Recruitment	</a><a href="rank_requirements.html">Rank Requirements	</a><a href="medals.html">Medals	</a><a href="member_pictures.html">Member Pictures	</a><img src="images/buttons/nav/nav_right.gif" alt="Navigation -->" /></div><!-- The rest of the page, End Body and html -->

EDIT2: So I managed to come up with a solution and the navigation works (almost) fine now, thanks for the help Synook. I have one more problem, but I have created a new topic for it under CSS. If anyone is interested: http://w3schools.invisionzone.com/index.php?showtopic=18381

[ali_ggl]

Hi use this code and hope you can change ur image with this function help.

<img id="banner"><script LANGUAGE="JavaScript"><!--var banner=0;function changingBanner(){  if(banner<5){	var img ="";	img = "../images/banner" + banner + ".jpg";	document.getElementById("banner").src= img;	document.getElementById("banner").alt= 	"JavaScript Tutorial, JavaScript SetTimeOut()";	banner++;	if(banner==5){	  banner=0;	}  }//this JavaScript setTimeOut() function will recall the//changingBanner() after one secondsetTimeout("changingBanner()", 3000);}changingBanner();--></SCRIPT>

Ali.

[Renegade605]

Are you... Posting in the wrong topic or something?