Background Image

[krichard]

Hello...

I have a script that changes the background image for the whole page when you mouseover a link... I would like to modify the code so that it only changes the background in a specific cell in a table... IS THIS POSSIBLE? I would appreciate any help with this!

Thanks Kim

<script language="JavaScript">
<!--

// Copyright 2001 by

http://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] = "images/links/MohawkTrak.gif";
backImage[1] = "images/links/FCCC.gif";
backImage[2] = "images/links/fallslides.gif";
backImage[3] = "images/links/FCCC.gif";
backImage[4] = "images/links/fallslides.gif";
backImage[5] = "images/links/zoar2.jpg";
backImage[6] = "images/links/artspace.gif";
backImage[7] = "images/links/BerkshireEast.gif";
backImage[8] = "images/links/CrabApple.jpg";
backImage[9] = "images/links/Butterfly.gif";
backImage[10] = "images/links/CrumpinFox.gif";
backImage[11] = "images/links/MtSnow.gif";

// Do not edit below this line.
//-----------------------------

function changeBGImage(whichImage){
if (document.body){
document.body.background = backImage[whichImage];
}
}
//-->
</script>


onMouseOver="javascript:changeBGImage(5)">

 

[krichard]

Ok... nevermind, i found a new piece of code that does mostly what i want...

onmouseover="document.getElementById('changeThisBG').style.backgroundImage='URL(images/links/BerkshireEast.gif)';>


I can get the above code to work, but when i add the following code...

background-repeat: no-repeat; background-position: center;" it no longer works.. Any ideas??

 

[Supra]

Yup, you can't use background-repeat within a script. Try this instead:

<script>
<!--
function ChangeBG(obj) {
   obj.style.backgroundImage = "url(SomeOtherImage.jpg)";
   obj.style.backgroundRepeat = "no-repeat";
   obj.style.backgroundPosition = "center";
}
//-->
</script>

<img src="SomeImage.jpg" onmouseover="ChangeBG(changeThisBG);">

<div id="changeThisBG" style="height: 300px; width: 400px">Change this BG</div>

 

[krichard]

Thank you for your help!