Hi, I'm building a site for a friend and I know what I want to do, but I'm struggling to get any script to fit the bill. It's a little beyond me as it's my first foray into javascript aside from gallerys/sliders.
My page layout is as follows:
Body > wrapper > header > 3 columns >footer
I want to put my links for my navigation in the 1st column div and on mouseover change the background image in the centre column div.
the following script works well, but changes the document body background as you can see from the code.
<!--
// Copyright 2001 by www.CodeBelly.com
// Please do *not* remove this notice.
var backImage = new Array(); // don't change this
// Enter the image filenames you wish to use.
// Follow the pattern to use more images. The
// number in the brackets [] is the number you
// will use in the function call to pick each
// image.
// Note how backImage[3] = "" -- which would
// set the page to *no* background image.
However I'd also like to preload the the mouseout image as the default background image in the centre col div so it starts with an image and not waiting for the first mouse over event.
Any help really appreciated as I have an image of how I want it to look and function and this is key to it.
In testing I tried setting the body background colour of the div to #000, like my image but the image appearing via the script was not visible on mouseover, I removed the BG color and voila the scripted images were visible again.
My main thing is getting the image to change in the centre div as the dom path in the above code is document.body where I really need the the path to be the class or id of the centrecol.
Thought that getelementbyId would be the solution but can't see how it would integrate into the above code, and still get the centrecol mouseout image to display on page load
The above javascript code changes the body background image to a different one for each link hovered over and returns to a different image onmouseout.
It works and the BG image changes perfectly.
I want the javascript path to point to a certain center div and change the background of that div rather than the body, but I'm not sure about the paths with dom.
try the code, just change the paths to image file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">
<html>
<head><script language="JavaScript">
<!--
// Copyright 2001 by www.CodeBelly.com
// Please do *not* remove this notice.
var backImage = new Array(); // don't change this
// Enter the image filenames you wish to use.
// Follow the pattern to use more images. The
// number in the brackets [] is the number you
// will use in the function call to pick each
// image.
// Note how backImage[3] = "" -- which would
// set the page to *no* background image.
backImage[0] = "PATH - TO -IMAGE GOES HERE";
backImage[1] = "PATH - TO -IMAGE GOES HERE";
backImage[2] = "PATH - TO -IMAGE GOES HERE";
backImage[3] = "PATH - TO -IMAGE GOES HERE";
// Do not edit below this line.
//-----------------------------
function changeBGImage(whichImage){
if (document.body){
document.body.background = backImage[whichImage];
}
}
Hi below is the javascript and some tester html I'm using . It works perfectly except the path points to the document.body background rather than being able to choose another path or an id or name.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">
<html>
<head><script language="JavaScript">
<!--
// Copyright 2001 by www.CodeBelly.com
// Please do *not* remove this notice.
var backImage = new Array(); // don't change this
// Enter the image filenames you wish to use.
// Follow the pattern to use more images. The
// number in the brackets [] is the number you
// will use in the function call to pick each
// image.
// Note how backImage[3] = "" -- which would
// set the page to *no* background image.
backImage[0] = "PATH - TO -IMAGE GOES HERE";
backImage[1] = "PATH - TO -IMAGE GOES HERE";
backImage[2] = "PATH - TO -IMAGE GOES HERE";
backImage[3] = "PATH - TO -IMAGE GOES HERE";
// Do not edit below this line.
//-----------------------------
function changeBGImage(whichImage){
if (document.body){
document.body.background = backImage[whichImage];
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled 2</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#container {
min-width: 600px;
}
#left_col {
float: left;
width: 200px;
}
#right_col {
float: right;
width: 200px;
}
#page_content {
margin-right: 200px;
margin-left: 200px;
}
</style>
<script type="text/javascript">
<!--
// Copyright 2001 by www.CodeBelly.com
// Please do *not* remove this notice.
var backImage = new Array(); // don't change this
// Enter the image filenames you wish to use.
// Follow the pattern to use more images. The
// number in the brackets [] is the number you
// will use in the function call to pick each
// image.
// Note how backImage[3] = "" -- which would
// set the page to *no* background image.
backImage[0] = "Default.jpg";
backImage[1] = "Koala.jpg";
backImage[2] = "Penguins.jpg";
backImage[3] = "Desert.jpg";
// Do not edit below this line.
//-----------------------------
function changeBGImage(whichImage){
var bg = backImage[whichImage]
document.getElementById("page_content").style.backgroundImage = "url(" + bg + ")";
}
//-->
</script>
</head>
<body>
<div id="container">
<div id="left_col">
<ul>
<li><a href="#" onMouseOver="changeBGImage(1)" onmouseout="changeBGImage(0)">Change</a></li>
<li><a href="#" onMouseOver="changeBGImage(2)"onmouseout="changeBGImage(0)">Change</a></li>
<li><a href="#" onMouseOver="changeBGImage(3)"onmouseout="changeBGImage(0)">Change</a></li></ul>
</div>
<div id="right_col">
Right Content
</div>
<div id="page_content" style="background-image:url('Default.jpg');">
Middle Content
<br /><br /><br /><br /><br /><br />
</div>
</div>
</body>
</html>
Geez Nick, many many thanks, way beyond what the call of duty!!! Spot On.
I've done some formatting and got it bang on how I want. Many Many thanks.
I owe you a beer.
Only last thing is getting a default background image to appear in the centre div when the page loads and then that image be changed on mouse over. Can't seem to get that to work. Ideas???
Reply With Quote
Bookmarks