Problema convivenza script

[MrRam]

Salve a tutti. Ho un problema grosso e dopo averci sbattuto la testa, non mi rimane che chiedere a voi.
Ho due script: il primo al passaggio del mouse carica un immagine (insomma il classico preview), il secondo invece al passaggio del mouse crea un tooltip con del testo.
Se compaiono singolarmente fanno il loro mestiere mentre se convivono nella stessa pagina ci sono dei problemi soprattutto dopo che ho richiamato lo script di anteprima immagine.

L'esempio del problema è su http://www.smalladvertise.com/chat.asp mentre vi posto sotto gli script che sicuramente contengono degli errori (penso soprattutto il primo):

ANTEPRIMA IMMAGINE

<!--
if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="position: absolute;visibility: hidden;left: 0px;top: -1000px;z-index: 300;border: 1px solid #000000;background: #FFFFFF;">[img]images/progress_bar.gif[/img]</div>')

function gettrailobj()
{
if (document.getElementById) return document.getElementById("trailimageid").style
else if (document.all) return document.all.trailimagid.style
}

function truebody()
{
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function hidetrail()
{
document.getElementById('ttimg').src='images/progress_bar.gif'
gettrailobj().visibility="hidden"
}

function showtrail(file)
{
if(navigator.userAgent.toLowerCase().indexOf('oper a') == -1 && navigator.userAgent.toLowerCase().indexOf('safari' ) == -1)
{
// followmouse()

var img = document.getElementById('ttimg');
img.src=file;
gettrailobj().visibility="visible"
gettrailobj().width=img.style.width
gettrailobj().height=img.style.height
document.onmousemove=followmouse

w=gettrailobj().width
h=gettrailobj().height
}
}

function followmouse(f)
{

if(navigator.userAgent.toLowerCase().indexOf('oper a') == -1 && navigator.userAgent.toLowerCase().indexOf('safari' ) == -1)
{

var xcoord=55
var ycoord=-(gettrailobj().width)

if (typeof f != "undefined")
{
xcoord+=f.pageX
ycoord+=f.pageY
}
else if (typeof window.event !="undefined")
{
xcoord+=truebody().scrollLeft+event.clientX
ycoord+=truebody().scrollTop+event.clientY
}

var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)

if (xcoord+w+3>docwidth)
xcoord=xcoord-w-(20*2)

if (ycoord-truebody().scrollTop+h>truebody().clientHeight)
ycoord=ycoord-h-20;

gettrailobj().left=xcoord+"px"
gettrailobj().top=ycoord+"px"

}
}
//-->

TOOLTIP

var OP = (navigator.userAgent.indexOf('Opera') != -1);
var IE = (navigator.userAgent.indexOf('MSIE') != -1 && !OP);
var GK = (navigator.userAgent.indexOf('Gecko') != -1);
var SA = (navigator.userAgent.indexOf('Safari') != -1);
var DOM = document.getElementById;

var tooltip = null;

function TOOLTIP() {
//----------------------------------------------------------------------------------------------------
// Configuration
//----------------------------------------------------------------------------------------------------
this.width = 200; // width (pixels)
this.bgColor = "#EEEEEE"; // background color
this.textFont = "Trebuchet MS"; // text font family
this.textSize = 11; // text font size (pixels)
this.textColor = "#000000"; // text color
this.border = "1px solid #404040"; // border (CSS spec: size style color, e.g. "1px solid #D00000")
this.opacity = 90; // opacity (0 - 100); doesn't work with all browsers
this.cursorDistance = 10; // distance from mouse cursor (pixels)

// don't change
this.text = '';
this.height = 0;
this.obj = null;
this.active = false;

//----------------------------------------------------------------------------------------------------
// Methods
//----------------------------------------------------------------------------------------------------
this.create = function() {
if(!this.obj) this.init();

var s = (this.textFont ? 'font-family:' + this.textFont + '; ' : '') +
(this.textSize ? 'font-size:' + this.textSize + 'px; ' : '') +
(this.border ? 'border:' + this.border + '; ' : '') +
(this.textColor ? 'color:' + this.textColor + '; ' : '');

var t = '<table border=0 cellspacing=0 cellpadding=4 width=' + this.width + '><tr>' +
'<td align=left' + (s ? ' style="' + s + '"' : '') + '>' + this.text +
'</td></tr></table>';

if(DOM || IE) this.obj.innerHTML = t;
if(DOM) this.height = this.obj.offsetHeight;
else if(IE) this.height = this.obj.style.pixelHeight;
if(this.bgColor) this.obj.style.backgroundColor = this.bgColor;

this.setOpacity();
this.move();
this.show();
}

this.init = function() {
if(DOM) this.obj = document.getElementById('ToolTip');
else if(IE) this.obj = document.all.ToolTip;
}

this.move = function() {
var winX = getWinX() - (((GK && !SA) || OP) ? 17 : 0);
var winY = getWinY() - (((GK && !SA) || OP) ? 17 : 0);
var x = mouseX;
var y = mouseY;

if(x + this.width + this.cursorDistance > winX + getScrX())
x -= this.width + this.cursorDistance;
else x += this.cursorDistance;

if(y + this.height + this.cursorDistance > winY + getScrY())
y -= this.height;
else y += this.cursorDistance;

this.obj.style.left = x + 'px';
this.obj.style.top = y + 'px';
}

this.show = function() {
this.obj.style.zIndex = 69;
this.active = true;
this.obj.style.visibility = 'visible';
}

this.hide = function() {
this.obj.style.zIndex = -1;
this.active = false;
this.obj.style.visibility = 'hidden';
}

this.setOpacity = function() {
this.obj.style.opacity = this.opacity / 100;
this.obj.style.MozOpacity = this.opacity / 100;
this.obj.style.KhtmlOpacity = this.opacity / 100;
this.obj.style.filter = 'alpha(opacity=' + this.opacity + ')';
}
}

//----------------------------------------------------------------------------------------------------
// Global functions
//----------------------------------------------------------------------------------------------------
function getScrX() {
var offset = 0;
if(window.pageXOffset)
offset = window.pageXOffset;
else if(document.documentElement && document.documentElement.scrollLeft)
offset = document.documentElement.scrollLeft;
else if(document.body && document.body.scrollLeft)
offset = document.body.scrollLeft;
return offset;
}

function getScrY() {
var offset = 0;
if(window.pageYOffset)
offset = window.pageYOffset;
else if(document.documentElement && document.documentElement.scrollTop)
offset = document.documentElement.scrollTop;
else if(document.body && document.body.scrollTop)
offset = document.body.scrollTop;
return offset;
}

function getWinX() {
var size = 0;
if(window.innerWidth)
size = window.innerWidth;
else if(document.documentElement && document.documentElement.clientWidth)
size = document.documentElement.clientWidth;
else if(document.body && document.body.clientWidth)
size = document.body.clientWidth;
else size = screen.width;
return size;
}

function getWinY() {
var size = 0;
if(window.innerHeight)
size = window.innerHeight;
else if(document.documentElement && document.documentElement.clientHeight)
size = document.documentElement.clientHeight;
else if(document.body && document.body.clientHeight)
size = document.body.clientHeight;
else size = screen.height;
return size;
}

function getMouseXY(e) {
if(e && e.pageX != null) {
mouseX = e.pageX;
mouseY = e.pageY;
}
else if(event && event.clientX != null) {
mouseX = event.clientX + getScrX();
mouseY = event.clientY + getScrY();
}
if(mouseX < 0) mouseX = 0;
if(mouseY < 0) mouseY = 0;
if(tooltip && tooltip.active) tooltip.move();
}

function toolTip(text, width, opacity) {
if(text) {
tooltip = new TOOLTIP();
tooltip.text = text;
if(width) tooltip.width = width;
if(opacity) tooltip.opacity = opacity;
tooltip.create();
}
else if(tooltip) tooltip.hide();
}

//----------------------------------------------------------------------------------------------------
// Build tooltip box
//----------------------------------------------------------------------------------------------------
document.write('<div id="ToolTip" style="position:absolute; visibility:hidden; z-index:199"></div>');

//----------------------------------------------------------------------------------------------------
// Event handlers
//----------------------------------------------------------------------------------------------------
var mouseX = mouseY = 0;
document.onmousemove = getMouseXY;

//----------------------------------------------------------------------------------------------------

[artorius]

Il problema è:
document.onmousemove=followmouse
e
document.onmousemove = getMouseXY;

Chiaramente, il secondo sovrascrive il primo.

Soluzione? Cancella le due righe ed in fondo alla pagina scrivi:

document.onmousemove = function(e){
followmouse(e);
getMouseXY(e);
}

[MrRam]

ho fatto la modifica che mi hai detto sullo script "tooltip" ma così facendo purtroppo non funziona +, e funziona quindi solo quello del preview immagini.. :-(

forse sbaglio qualosa? scusa ma sono una pippa con js.

[artorius]

Originariamente inviato da MrRam
ho fatto la modifica che mi hai detto sullo script "tooltip" ma così facendo purtroppo non funziona +, e funziona quindi solo quello del preview immagini.. :-(

NO, non hai capito, DEVI LEVARE ENTRAMBI GLI ASSEGNAMENTI A document.onmousemove, e mettere SOLO quello che ti ho indicato io.

forse sbaglio qualosa? scusa ma sono una pippa con js.

Quando leggo queste affermazioni, mi viene sempre in mente il tipo che non sapeva sciare ed è andato a fare sci d'altura per imparare... non devo dire com'è finita, vero?

[MrRam]

hai ragione non avevo capito bene la tua risposta, poi dopo averla rivista l'ho applicata correttamente ma ho dovuto invertire
getMouseXY(e);
con
followmouse(e);
in uno script altrimenti non funzionava.

hai ragione anche sul discorso dello sciatore, e per questo infatti ho cercato qualcosa di già fatto per capirne il meccanismo e cercare quindi di essere autonomo in futuro.

grazie mille per il tuo aiuto.

se ti va ti chiedo un ulteriore sforzo ma senza impegno:
lo script "tooltip" è intelligente in quanto se il div contenente il messaggio è oltre il limite della finestra del browser, la sua visualizzazione è spostata automaticamente per permetterne la visione intera. invece nello script del preview immagine, l'immagine va oltre i bordi ... ti viene in mente nulla? :master:

[artorius]

bisognerebbe vedere la struttura della preview, ma adesso non ho proprio tempo, mi spiace.

[MrRam]

ok ti ringrazio comunque per il tuo prezioso aiuto.
per caso qualcuno sa dirmi perchè se vado verso la destra dello schermo con il puntatore, la pagina tenta di ridimensionarsi (le barre di scorrimento si attivano).
misteri della fede

[artorius]

ah, ma tu gli cambi l'opacity per non mostrarlo e non sleghi il tooltip dal movimento del mouse:

quando attivi il tooltip leghi una funzione al movimento del mouse, che sposta il div contenitore con il cursore, ma, quando il tooltip esce dall'area interessata (e scompare) tu non lo sleghi dal mouse, così che rimane sempre col cursore, non visibile, ma c'è. Questo anche perché per farlo scomparire non usi un display:none ma un opacity: 0, che, si lo rende invisibile, ma non lo estrare dalla pagina, come un display:none farebbe. quindi quando il div esce dalla window la pagina si deve ridimensionare, dato che l'elemento fa comunque parte di essa

[MrRam]

ok Artorius, quello che dici è corretto come sempre, ma tra il dire ed il fare...
ho implementato nello script di preview:

function hidetrail()
{
document.getElementById('ttimg').src='images/progress_bar.gif';
gettrailobj().active=false;
gettrailobj().visibility="hidden";
gettrailobj().display="none";
followmouse(e);
getMouseXY(e);
}

function showtrail(file)
{
if(navigator.userAgent.toLowerCase().indexOf('oper a') == -1 && navigator.userAgent.toLowerCase().indexOf('safari' ) == -1)
{
// followmouse()

var img = document.getElementById('ttimg');
img.src=file;
gettrailobj().visibility="visible"
gettrailobj().display="inline"
gettrailobj().width=img.style.width
gettrailobj().height=img.style.height
document.onmousemove = function(e){
followmouse(e);
getMouseXY(e);
}

w=gettrailobj().width
h=gettrailobj().height
}
}

...
poi nello script successivo di tooltip:

this.show = function() {
this.obj.style.zIndex = 69;
this.active = true;
this.obj.style.visibility = "visible";
this.obj.style.display = "inline";
}

this.hide = function() {
this.obj.style.zIndex = -1;
this.active = false;
this.obj.style.visibility = "hidden";
this.obj.style.display = "none";
}

..
..

Il problema SPARISCE solo se passo almeno una volta sull'immagine che attiva il primo script, altrimenti se passo solo sul tooltip, il problema del ridimensionamento (e quindi dell'oggetto che non viene fisicamente eliminato ma solo nascosto), permane.

help me.