Neverending page reloading...

[Charlie]

Hey all:

I have a very simple script that changes an image when the user
'OnMouseOver's it. it works without a problem, but the progress bar at
the bottom of the browser window reappears with the change in image,
and never finishes or goes away. When the page initially loads the
progress bar completes and disappears.

To change to image I am re-assigning it's .src

I am new to javscript, so I apologize if this is a FAQ, but I've
googled and couldn't find an answer.

-cjl

[Evertjan.]

Charlie wrote on 29 okt 2004 in comp.lang.javascript:

I have a very simple script that changes an image when the user
'OnMouseOver's it. it works without a problem, but the progress bar at
the bottom of the browser window reappears with the change in image,
and never finishes or goes away. When the page initially loads the
progress bar completes and disappears.

To change to image I am re-assigning it's .src

I am new to javscript, so I apologize if this is a FAQ, but I've
googled and couldn't find an answer

Without the code, we cannot say. Please copy and pase your javascript code.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress,
but let us keep the discussions in the newsgroup)

[Charlie]

Hey:

I think I've figured it out. What I was trying to create was a tab
strip, which responds without reloading the page.

Instead or re-assiging an image '.src' dynamically, I use javascript
to change the CSS style element 'backgroundPosition' of the
appropriate DIV, and I changed my image to have all three tab states
(active, hover, inactive) spaced horizontally by an exact number of
pixels (in my case 30).

I respond to onMouseOver, onMouseOut, and onMouseDown by calling a
function that changes the background position of the element.

Example javascript:
function rollOver(tabName) {
obj = document.getElementsByTagName("div");
obj[tabName].style.backgroundPosition = '-30px opx';
}

Example HTML:
<div id="tab1" onMouseOver="rollOver('tab1')">
</div>

Example CSS:
#tab1 {
background: url(tab1.png);
background-position: 0px 0px;
height: 36px;
width: 30px;
}

This seems to work with both Mozilla and IE. I'm not sure if I'm
supposed to put calls to functions directly in the div tag, but it
works great.

Next, I'm figuring out how to alter the 'html' contents of a DIV. I've
seen how to do it with 'innerHTML', and I think I understand the DOM
child thingy, but we'll see.

-cjl