Using document.getElementById to change an element size works in iWeb but not when site published

Question

I am trying to use an HTML snippet to construct a "popup" to show explanatory text on iWeb windows. This is the code:
<div id="divName"></div>
<style type="text/css">
/*<![CDATA[*/
#divName {
     border:solid 0px #000;
     text-align:left;
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function mouseOver()
    var el=document.getElementById("divName");
                   el.style.width=400+"px";
                   el.style.height= 200+"px";
                   el.style.margin="auto";
                       el.style.backgroundColor="#ffffff";             
          el.innerHTML="this is a bit of text, and this is some more";
function mouseOut()
    var el=document.getElementById("divName");
                   el.style.width=80+"px";
                   el.style.height= 20+"px";
                   el.style.margin="auto";
          el.innerHTML=" ";
                       el.style.backgroundColor="";             
window.onload=mouseOut;
window.onmouseover=mouseOver;
window.onmouseout=mouseOut;
//]]>
</script>
This works o.k. when tested inside iWeb. When the mouse is rolled over the element it is enlarged, the background colour changed and the text displayed. However, when I publish the site the background colour changes and the text is displayed BUT the size of the element remains set to the size set in the "mouseOut" function. On one occasion after publishing it did actually work, but mostly it doesn't!
What am I doing wrong?
Incidentally, when testing under iWeb, the mouseOut function sometimes doesn't shrink the element back to its original size. Mostly it does, but when it doesn't the background has still been made transparent and the text removed. It only appears to be the height and width functions that are failing!

Answer 1

Here's how I started :
http://www.wyodor.net/Ajax/Ajax.html
But to avoid having to edit the page after editing the iWeb page, i figured out a way to do it with a JavaScript :
http://www.wyodor.net/mfi/Maaskant/How_To.html
The magic word is : unique word. Then replace it with your own code.
Then I advanced it a bit to this :
http://www.wyodor.net/_Demo/Fancy/Dynamic_Text.html
And here's an explanation what the HTML Snippet does :
http://www.wyodor.net/blog/archives/2009/07/entry_213.html
You may have to learn HTML/CSS/JavaScript/DOM/AJAX and how iWeb creates its pages.