Discrepancies between js in ie5 for win32 and mac? Any clues why this

[marianne23]

Is anyone aware of specific discrepancies in the implementations of jscript between WinIE5 and MAC IE5?

I have a script which is running fine under netscape win32/mac and ie5 win32, but on ie5 Macintosh it doesnt behave as expected.

Simply put, one external .js script that calls a document.write creating a <span> section that an image is placed into. In the span tag there is a onmouseover event handler that kicks off a repositioning of the element. The -contents- of the span is an image that has a #usemap for image mapping associated with it. INSIDE the <map> used for the imagemap, are some additional onMouseover events. Somehow this works in netscape(win32 and mac) and ie5(win32) in that the when the cursor is placed over the graphic, it first repositions it slightly (its a pop out menu thing) AND the mouseovers work (they are calling another external .js file to render some text above each hotspot &quot;button&quot; in the image. I did not think this would work at all as it seemed the two events would conflict somehow...but as I said it works fine in ie5/win32 and NS4 win32/mac. In IE5/mac, either ONE OR THE OTHER WORKS...as is, the mouseover text pops up, but the element does not reposition. however if i remove the call to the imagemap with the mouseover events, the repositioning works. I suspect that I probably made an error in the ie specific code somewhere that the win32 version is tolerant of, but the mac is not...I have no clue what though and ive looked it over for hours :|

it is implemented here:

http://www.jonespartners.com/test/high/chronology/main.html

(yes these pages are web crimes in themselves but that is how we want them! goto

http://www.jonespartners.com/test/high/chronology/home.html

for a little preloading distraction)

I will put the code below...but before you ridicule it's inefficiencies and amateurishness, please realize i am trying to learn here and one day write good code. i'm amazed ive gotten it working so far as i have. i have struggled with this for three days before seeking help, so please dont just tell me RTFM. I have! Any help is appreciated!!!

NOTE: Most of this code is adapted from freesourced code, and is cited as such. All the stupid comments are mine.

Here is an excerpt from the imagemap from the html doc (the problem isn't here, but just so you dont think im doing anything too funky - it works fine)

<map name=&quot;bubblemap&quot;>
<area shape=&quot;rect&quot; coords=&quot;0,0,28,29&quot; href=&quot;../profile/home.html&quot; onMouseOver=&quot;return overlib('<table border=0 cellspacing=0 cellpadding=0> <TR><TD NOWRAP><B><FONT COLOR=\'#FF6E14\' FACE=\'Helvetica Black, Helvetica, Helvetica Light\'> > profile</FONT></B></TD></TR></TABLE>', FULLHTML)&quot; onMouseOut=&quot;nd();&quot;>
</map>

The script (ll.js) (called from the document body):

///////////////////////////////////////////////////////////////////
/ [mutated] *Site Logo Script (Geocities Watermark)
© Dynamic Drive (

http://www.dynamicdrive.com)

///////////////////////////////////////////////////////////////////

var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

//edit the below 6 steps

// 1) substitute 116 and 42 with the width and height of your logo image, respectively
var logowidth=197
var logoheight=29
var staticlogo=new Image(logowidth,logoheight)

// Choose x (# pixels down), y(# pixels from left) position for logo - h=475 (bottom) or 496 (half) or 515 (below)

w=-170

if (screen.height<768){
if (ns4)
h=window.innerHeight-44
else if (ns6)
h=window.innerHeight-44
else if (ie4)
h=document.body.clientHeight-44
}
else if (screen.height>=768)
h=475

// 2) change the image path to reflect the path of your logo image
staticlogo.src=&quot;bubble.gif&quot;

// 3) Change url below to the target URL of the logo
var logolink=&quot;

http://dynamicdrive.com&quot;

// 4) change the alttext variable to reflect the text used for the &quot;alt&quot; attribute of the image tag
var alttext=&quot;Dynamic Drive&quot;

// 5) set below to either &quot;1&quot; or &quot;0&quot; (&quot;1&quot; fades the logo into view) Note: IE 4 specific
var fadeintoview=1

// 6) Finally, below variable determines the duration the logo should be visible after loading, in seconds. If you'd like the logo to appear for 20 seconds, for example, enter 20. Entering a value of 0 causes the logo to be perpectually visible.
var visibleduration=0

///////////////////////////The Functions/////////////////////////

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (ns4)
setTimeout(&quot;window.onresize=regenerate&quot;,400)
}

//FUNCTION FOR FADING IN IMAGE IN IE5 OR HIDING IT AFTER TIMEOUT
function bringintoview(){
if (logo.filters.alpha.opacity<=95)
logo.filters.alpha.opacity+=5
else{
clearInterval(viewit)
if (visibleduration!=0)
setTimeout(&quot;logo.style.visibility='hidden'&quot;,visibleduration*1000)
}
}

// THESE TWO FUNCTIONS ARE FOR MOVING THE IMAGE IN IE onMouseover
function pull(){
if (ns4)
staticimage.left=pageXOffset+175
else if (ie4)
crosslogo.style.left=w+170
}

function push(){
crosslogo.style.left=w
}

// THESE TWO FUNCTIONS ARE FOR MOVING THE IMAGE IN NS4 onMouseover
function pullns(){
w=w+170
}

function pushns(){
w=w-170
}

// NS THIS IS WHERE THE LOGO GETS DRAWN IN NETSCAPE - THIS FUNCTION IS NS ONLY MOUSEOVER ACTION HERE SEEMS INEFFECTIVE EVEN W MAP REMOVED
function createlogo(){
staticimage=new Layer(1000)
staticimage.left=1
staticimage.top=1
staticimage.onMouseOver=pullns
staticimage.onMouseOut=pushns
staticimage.document.write('<img name=&quot;nav&quot; src=&quot;'+staticlogo.src+'&quot; border=0 usemap=&quot;#bubblemap&quot;>')
staticimage.document.close()
staticimage.visibility=&quot;show&quot;
regenerate2()
staticitns()
}

//THIS IS WHERE NETSCAPE CONTROLS THE LOCATION OF THE LOGO ON REDRAW
function logoit2(){
staticimage.left=pageXOffset+w
staticimage.top=pageYOffset+h
}

//THIS IS WHERE IE CONTROLS THE LOCATION OF THE LOGO ON REDRAW
function logoit(){
var w2=ns6? pageXOffset+w : document.body.scrollLeft+w
var h2=ns6? pageYOffset+h : document.body.scrollTop+h
crosslogo.style.left=w2
crosslogo.style.top=h2
}

//WHERE THE LOGO IS DRAWN IN IE
function insertimage(){
crosslogo.innerHTML='<img src=&quot;'+staticlogo.src+'&quot; border=0 usemap=&quot;#bubblemap&quot;></a>'
if (ie4){
if (fadeintoview)
viewit=setInterval(&quot;bringintoview()&quot;,100)
else{
if (visibleduration!=0)
setTimeout(&quot;crosslogo.style.visibility='hidden'&quot;,visibleduration*1000)
}
}
}

function staticitns(){
startstatic=setInterval(&quot;logoit2()&quot;,90)
if (visibleduration!=0)
setTimeout(&quot;staticimage.visibility='hide';clearInterval(startstatic)&quot;,visibleduration*1000)
}

////////////////////////////////THE CODE////////////////////////////////

// IE THIS SETS UP THE LOGO FADE-IN IE5
var fadeset=''
if (fadeintoview)
fadeset=&quot;filter:alpha(opacity=0)&quot;

// IE THIS SEEMS TO BE CREATING THE SPAN IN IE - MOUSEOVER EVENTS ARE APPROPRIATELY RESPONSIVE EXCEPT UNDER IE5 MAC
if (ie4)
document.write('<span id=&quot;logo&quot; onMouseover=&quot;pull()&quot; onMouseout=&quot;push()&quot; style=&quot;'+fadeset+';position:absolute;top:100;width:'+staticlogo.width+';height:'+staticlogo.height+'&quot;></span>')

if (ns4)
window.onload=createlogo;
else if (ie4)
crosslogo=document.all.logo
else if (ns6)
crosslogo=document.getElementById(&quot;logons6&quot

if (ie4||ns6){
// IE THIS IS WHERE IE CONTROLS THE LOCATION OF THE LOGO REDRAW IE
crosslogo.style.left=w
crosslogo.style.top=h
}

if (ie4){
window.onscroll=logoit
window.onresize=new Function(&quot;window.location.reload()&quot
window.onload=insertimage
}
else if (ns6){
startstatic=setInterval(&quot;logoit()&quot;,100)
window.onload=insertimage
window.onresize=new Function(&quot;window.location.reload()&quot
if (visibleduration!=0)
setTimeout(&quot;crosslogo.style.visibility='hidden';clearInterval(startstatic)&quot;,visibleduration*1000)
}