[JavaScript] Turn the page! Effetto "orecchie della pagina"- Problema con i.explorer

[menomale]

Ciao a tutti!
Vorrei parlarvi di uno script per ricreare l'effetto "orecchia della pagina", un modo simpatico per rendere possibile la navigazione di un sito attraverso i link "next" e "previous". Lo script, funzionante con Mozilla Firefox, prevede la visualizzazione di un'immagine ad "orecchia della pagina" che contiene "next" e "previous" semplicemente passando col cursore su di un link (che appunto dice "turn the page").
Ecco la pagina di esempio: http://ilovegummybears.netsons.org/index.html
L'idea mi è venuta a partire da un interessante script per generare diversi tipi di tips, che onestamente ho sfruttato abbastanza visto che so veramente poco di javascript. Sicura del fatto che lo script originario funzionasse anche per explorer, ho sviluppato la mia "versione" controllandone lo sviluppo primariamente con firefox. Tuttavia a lavoro ultimato ho scoperto che lo script non sembra essere corretto per explorer dato il messaggio:

"Problemi durante la visualizzazione della pagina web. La pagina potrebbe non essere visualizzata o funzionare correttamente".

Effettivamente non appare nè l'immagine nè i link "previous" e "next" che contiene.

Ormai sono affezionata a questo script e mi chiedo se sia possibile sistemare il problema di incompatibilità con explorer.

Purtroppo non riesco ad individuare l'errore nello script, che riporto qui sotto, con le dovute precisazioni:

/*
Ecco come inizia lo script
*/


var ua = navigator.userAgent
var ps = navigator.productSub
var dom = (document.getElementById)? 1:0
var ie4 = (document.all&&!dom)? 1:0
var ie5 = (document.all&&dom)? 1:0
var nn4 =(navigator.appName.toLowerCase() == "netscape" && parseInt(navigator.appVersion) == 4)
var nn6 = (dom&&!ie5)? 1:0
var sNav = (nn4||nn6||ie4||ie5)? 1:0
var cssFilters = ((ua.indexOf("MSIE 5.5")>=0||ua.indexOf("MSIE 6")>=0)&&ua.indexOf("Opera")<0)? 1:0
var Style=[],Text=[],Count=0,sbw=0,move=0,hs="",mx,my,scl,sct,ww,wh,obj,sl,st,ih,iw,vl,hl,sv,evlh,evlw,tbody
var HideTip = "eval(obj+sv+hl+';'+obj+sl+'=0;'+obj+st+'=-800')"
var doc_root = ((ie5&&ua.indexOf("Opera")<0||ie4)&&document.compatMode=="CSS1Compat")? "document.documentElement":"document.body"
var PX = (nn6)? "px" :""

if(sNav) {
window.onresize = ReloadTip
document.onmousemove = Move
if(nn4) document.captureEvents(Event.MOUSEMOVE)
}
if(nn4||nn6) {
mx = "e.pageX"
my = "e.pageY"
scl = "window.pageXOffset"
sct = "window.pageYOffset"
if(nn4) {
obj = "document.TipLayer."
sl = "left"
st = "top"
ih = "clip.height"
iw = "clip.width"
vl = "'show'"
hl = "'hide'"
sv = "visibility="
}
else obj = "document.getElementById('TipLayer')."
}
if(ie4||ie5) {
obj = "TipLayer."
mx = "event.x"
my = "event.y"
scl = "eval(doc_root).scrollLeft"
sct = "eval(doc_root).scrollTop"
if(ie5) {
mx = mx+"+"+scl
my = my+"+"+sct
}
}
if(ie4||dom){
sl = "style.left"
st = "style.top"
ih = "offsetHeight"
iw = "offsetWidth"
vl = "'visible'"
hl = "'hidden'"
sv = "style.visibility="
}
if(ie4||ie5||ps>=20020823) {
ww = "eval(doc_root).clientWidth"
wh = "eval(doc_root).clientHeight"
}
else {
ww = "window.innerWidth"
wh = "window.innerHeight"
evlh = eval(wh)
evlw = eval(ww)
sbw=15
}

/* Ecco la grande differenza tra lo script d'ispirazione e quello nuovo. Noterete la funzione stm, che contiene next, previous e tag (questa serve per non avere un conflitto tra la navigazione del sito e le varie tag date agli articoli del sito). "Coda" mi è stato suggerito sempre per sistemare il conflitto della navigazione del sito per data e quella per tag.
t = il testo contenuto nell'orecchia o linguetta
s = lo stile che assume la linguetta, ovvero le "coordinate" che variano a seconda del browser in uso (forse è qui il problema di visualizzazione per explorer?)
TipLayer=il div richiamato all'interno della pagina "index.html", che si trova anche nel css "style.css"
*/


function stm(next, previous, tag) {
if(tag != "") coda = "\&tag=" + tag;
else coda = "";
linguetta = "";
if(previous != "")
linguetta += "<a href=\"index.php?i=" + previous + coda + "\">previous</a>";
if(previous != "" && next != "")
linguetta += "&nbsp;|&nbsp;"
if(next != "")
linguetta += "<a href=\"index.php?i=" + next + coda + "\">next</a>";
//Style[...] = [TitleColor,TextColor,TitleBgColor,TextBgColor,TitleBgImag,TextBgImag,TitleTextAlign,TextTextAlign, TitleFontFace, TextFontFace, TipPosition, StickyStyle, TitleFontSize, TextFontSize, Width, Height, BorderSize, PadTextArea, CoordinateX , CoordinateY, TransitionNumber, TransitionDuration, TransparencyLevel ,ShadowType, ShadowColor]
t = ["","Graphics:nevermind<br>Layout:nevermind<br>" + linguetta];
if (navigator.appName.indexOf("Explorer") > -1) {
s = ["#FF6ADE","#660099","","","","ilovegummybears_files/pageup.png","","","","","fixed","sticky","","",140,140,0,1,0,0,"","","","",""];
} else {
s = ["#FF6ADE","#660099","","","","ilovegummybears_files/pageup.png","","","","","fixed","sticky","","",140,140,0,1,0,0,"","","","",""];
}
if(sNav) {
if(t.length<2||s.length<25) {
var ErrorNotice = "DHTML TIP MESSAGE VERSION 1.2 ERROR NOTICE.\n"
if(t.length<2&&s.length<25) alert(ErrorNotice+"It looks like you removed an entry or more from the Style Array and Text Array of this tip.\nTheir should be 25 entries in every Style Array even though empty and 2 in every Text Array. You defined only "+s.length+" entries in the Style Array and "+t.length+" entry in the Text Array. This tip won't be viewed to avoid errors")
else if(t.length<2) alert(ErrorNotice+"It looks like you removed an entry or more from the Text Array of this tip.\nTheir should be 2 entries in every Text Array. You defined only "+t.length+" entry. This tip won't be viewed to avoid errors.")
else if(s.length<25) alert(ErrorNotice+"It looks like you removed an entry or more from the Style Array of this tip.\nTheir should be 25 entries in every Style Array even though empty. You defined only "+s.length+" entries. This tip won't be viewed to avoid errors.")
}
else {
var ab = "" ;var ap = ""
var titCol = (s[0])? "COLOR='"+s[0]+"'" : ""
var txtCol = (s[1])? "COLOR='"+s[1]+"'" : ""
var titBgCol = (s[2])? "BGCOLOR='"+s[2]+"'" : ""
var txtBgCol = (s[3])? "BGCOLOR='"+s[3]+"'" : ""
var titBgImg = (s[4])? "BACKGROUND='"+s[4]+"'" : ""
var txtBgImg = (s[5])? "BACKGROUND='"+s[5]+"'" : ""
var titTxtAli = (s[6] && s[6].toLowerCase()!="left")? "ALIGN='"+s[6]+"'" : ""
var txtTxtAli = (s[7] && s[7].toLowerCase()!="left")? "ALIGN='"+s[7]+"'" : ""
var add_height = (s[15])? "HEIGHT='"+s[15]+"'" : ""
if(!s[8]) s[8] = "Verdana,Arial,Helvetica"
if(!s[9]) s[9] = "Verdana,Arial,Helvetica"
if(!s[12]) s[12] = 1
if(!s[13]) s[13] = 1
if(!s[14]) s[14] = 200
if(!s[16]) s[16] = 0
if(!s[17]) s[17] = 0
if(!s[18]) s[18] = 10
if(!s[19]) s[19] = 10
hs = s[11].toLowerCase()
if(ps==20001108){
if(s[2]) ab="STYLE='border:"+s[16]+"px solid"+" "+s[2]+"'"
ap="STYLE='padding:"+s[17]+"px "+s[17]+"px "+s[17]+"px "+s[17]+"px'"}
var closeLink=(hs=="sticky")? "<TD ALIGN='right'><FONT SIZE='"+s[12]+"' FACE='"+s[8]+"'><A HREF='javascript:void(0)' ONCLICK='stickyhide()' STYLE='text-decoration:none;color:"+s[0]+"'><B>Close</B></A></FONT></TD>":""
var title=(t[0]||hs=="sticky")? "<TABLE WIDTH='100%' BORDER='0' CELLPADDING='0' CELLSPACING='0'><TR><TD "+titTxtAli+"><FONT SIZE='"+s[12]+"' FACE='"+s[8]+"' "+titCol+"><B>"+t[0]+"</B></FONT></TD>"+closeLink+"</TR></TABLE>" : ""
var txt="<TABLE "+titBgImg+" "+ab+" WIDTH='"+s[14]+"' BORDER='0' CELLPADDING='"+s[16]+"' CELLSPACING='0' "+titBgCol+" ><TR><TD>"+title+"<TABLE WIDTH='100%' "+add_height+" BORDER='0' CELLPADDING='"+s[17]+"' CELLSPACING='0' "+txtBgCol+" "+txtBgImg+"><TR><TD "+txtTxtAli+" "+ap+" VALIGN='top'><FONT SIZE='"+s[13]+"' FACE='"+s[9]+"' "+txtCol +">"+t[1]+"</FONT></TD></TR></TABLE></TD></TR></TABLE>"
if(nn4) {
with(eval(obj+"document")) {
open()
write(txt)
close()
}
}
else eval(obj+"innerHTML=txt")
tbody = {
Pos:s[10].toLowerCase(),
Xpos:s[18],
Ypos:s[19],
Transition:s[20],
Duration:s[21],
Alpha:s[22],
ShadowType:s[23].toLowerCase(),
ShadowColor:s[24],
WidtharseInt(eval(obj+iw)+3+sbw)
}
if(ie4) {
TipLayer.style.width = s[14]
tbody.Width = s[14]
}
Count=0
move=1
}
}
}

function Move(e) {
if(move) {
var X,Y,MouseX = eval(mx),MouseY = eval(my); tbody.Height = parseInt(eval(obj+ih)+3)
tbody.wiw = parseInt(eval(ww+"+"+scl)); tbody.wih = parseInt(eval(wh+"+"+sct))
switch(tbody.Pos) {
case "left" : X=MouseX-tbody.Width-tbody.Xpos; Y=MouseY+tbody.Ypos; break
case "center": X=MouseX-(tbody.Width/2); Y=MouseY+tbody.Ypos; break
case "float": X=tbody.Xpos+eval(scl); Y=tbody.Ypos+eval(sct); break
case "fixed": X=tbody.Xpos; Y=tbody.Ypos; break
default: X=MouseX+tbody.Xpos; Y=MouseY+tbody.Ypos
}

if(tbody.wiw<tbody.Width+X) X = tbody.wiw-tbody.Width
if(tbody.wih<tbody.Height+Y+sbw) {
if(tbody.Pos=="float"||tbody.Pos=="fixed") Y = tbody.wih-tbody.Height-sbw
else Y = MouseY-tbody.Height
}
if(X<0) X=0
eval(obj+sl+"=X+PX;"+obj+st+"=Y+PX")
View()
}
}

function View() {
Count++
if(Count == 1) {
if(cssFilters&&FiltersEnabled) {
for(Index=28; Index<31; Index++) { TipLayer.filters[Index].enabled = 0 }
for(s=0; s<28; s++) { if(TipLayer.filters[s].status == 2) TipLayer.filters[s].stop() }
if(tbody.Transition == 51) tbody.Transition = parseInt(Math.random()*50)
var applyTrans = (tbody.Transition>-1&&tbody.Transition<24&&tbody.Duration>0)? 1:0
var advFilters = (tbody.Transition>23&&tbody.Transition<51&&tbody.Duration>0)? 1:0
var which = (applyTrans)?0advFilters)? tbody.Transition-23:0
if(tbody.Alpha>0&&tbody.Alpha<100) {
TipLayer.filters[28].enabled = 1
TipLayer.filters[28].opacity = tbody.Alpha
}
if(tbody.ShadowColor&&tbody.ShadowType == "simple") {
TipLayer.filters[29].enabled = 1
TipLayer.filters[29].color = tbody.ShadowColor
}
else if(tbody.ShadowColor&&tbody.ShadowType == "complex") {
TipLayer.filters[30].enabled = 1
TipLayer.filters[30].color = tbody.ShadowColor
}
if(applyTrans||advFilters) {
eval(obj+sv+hl)
if(applyTrans) TipLayer.filters[0].transition = tbody.Transition
TipLayer.filters[which].duration = tbody.Duration
TipLayer.filters[which].apply()
}
}
eval(obj+sv+vl)
if(cssFilters&&FiltersEnabled&&(applyTrans||advFilters)) TipLayer.filters[which].play()
if(hs == "sticky") move=0
}
}

function stickyhide() {
eval(HideTip)
}

function ReloadTip() {
if(nn4&&(evlw!=eval(ww)||evlh!=eval(wh))) location.reload()
else if(hs == "sticky") eval(HideTip)
}

function htm() {
if(sNav) {
if(hs!="keep") {
move=0;
if(hs!="sticky") eval(HideTip)
}
}
}

var FiltersEnabled = 0; // se non vuoi usare transizioni o filtri in nessuno dei tips impostala a 0

//applyCssFilter();
//-->

Ecco qui la parte di css che interessa il div TipLayer :

/*da modificare con attenzione - effetto orecchia-pagina e tip vari*/

#TipLayer {
float: right;
position: static;
width: 140px;
height: 140px;
padding-top: 1px;
}
#TipLayer a {
font-family: Verdana, sans-serif, serif;
font-size: 11px;
color: #FF6ADE;
text-align: center;
text-decoration: none;
font-weight: bold;
}
#TipLayer a:hover {
font-family: Verdana, sans-serif, serif;
font-size: 11px;
color: #FEFBE4;
text-align: center;
text-decoration: none;
font-weight: bold;
}
p {
font-family: Verdana, sans-serif, serif;
}
h2, h3 {
font-family: Verdana, sans-serif, serif;
}

Dimenticavo di indicare come richiamo lo script nella pagina "index.html":

<SCRIPT language="JavaScript1.2" src="pag.js" type="text/javascript"></SCRIPT>

Grazie per l'attenzione!