Beginner at java script needs help with background images

[cumars]

Hello.

I have a problem:

I need to set a backgroud to an element.


<div id='object1' name='object1' onmouseover="mouseovermenu('object1')" onmouseout="mouseoutmenu('object1')">
<a href="about/about.html" >About me</a>
</div>

I have set an id, I know its DOM calculated with a function


var isDHTML = 0;
var isLayers = 0;
var isAll = 0;
var isID = 0;

var isDHTML = 0;
var isID = 0;
var isAll = 0;
var isLayers = 0;

if (document.getElementById) {isID = 1; isDHTML = 1;}
else {
if (document.all) {isAll = 1; isDHTML = 1;}
else {
browserVersion = parseInt(navigator.appVersion);
if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) {isLayers = 1; isDHTML = 1;}
}}

function findDOM(objectID,withStyle) {
if (withStyle == 1) {
if (isID) { return (document.getElementById(objectID).style) ; }
else {
if (isAll) { return (document.all[objectID].style); }
else {
if (isLayers) { return (document.layers[objectID]); }
};}
}
else {
if (isID) { return (document.getElementById(objectID)) ; }
else {
if (isAll) { return (document.all[objectID]); }
else {
if (isLayers) { return (document.layers[objectID]); }
};}
}
}

Now I need to write a function mouseovermenu that sets a new background.

function mouseovermenu(objectID){
domStyle = findDOM(objectID,1);
domStyle.background = 'main_button_down.gif';
}

But the problem is that there is a mistake somewhere (I think in defining the new background).

It would be great if somebody could solve the problem.

[jscheuer1]

This is all much more complicated than it needs to be. You don't need any involved, self contained script. All of your code can be written into the events within the division tag (simple preloading code in the head for the rollover image is a nice touch):


<div style="background:url(main_button_up.gif);" onmouseover="this.style.background='url(main_button_down.gif)'" onmouseout="this.style.background='url(main_button_up.gif)'">
<a href="about/about.html" >About me</a>
</div>

Then in the head, preloading code for the rollover:


<script type="text/javascript">
img1=new Image();
img1.src="main_button_down.gif"
</script>

If you are wanting to do this for a bunch of links, you can use a stylesheet in the head or externally. In the head, the stylesheet could look like this:


<style type="text/css">
.up {
background:url('main_button_up.gif');
}
.down {
background:url('main_button_down.gif');
}
</style>

Keep the same preloading script as in the first example in the head but now, your html markup for the division tag changes to:


<div class="up" onmouseover="this.className='down'" onmouseout="this.className='up'">
<a href="about/about.html" >About me</a>
</div>