Buongiorno ragazzi. Ho un problema con l'apertura del tooltip. Sicuramente qualcosa che fa conflitto con altre opzioni javascript che ho inserito. Purtroppo sono totalmente asciutto di javascript e in html conosco solo il generalissimo.
Spiego il problema e porto la pagina di esempio così si comprende benissimo a cosa mi riferisco:
Purtroppo quando punto il mouse sulla parola dove voglio che compaia il tooltip, tutti i tooltip mi compaiono in un punto a caso della pagina, un punto sempre fisso come se ci fosse il comando. Apro slideshow e questo si sposta. In definitiva non solo non è mai vicino al puntatore del mouse ma compare in un punto del tutto suo della pagina.
la pagina con l'errore è questa: http://brushtool.altervista.org/Tutorial/texture.php
Vi porto subito le parole da cercare così non perdete tempo a sfogliare la pagina inutilmente:
... aggiustiamo le dimensioni ...
e
... selezioniamo il livello ...
Se puntate da subito il cursore in queste due parole il tooltip, almeno nella prima, compare perfettamente.
Se adesso passate il puntatore in una delle immagini che si aprono in slideshow o come tooltip anch'esse vedrete che si sposta il tooltip in un punto sempre fisso per ogni richiamo.
Dimenticavo che il file non è in html ma in php.
Inserisco qui il codice javascript, magari serve a capire qualcosa.
codice:
/*
+-------------------------------------------------------------------+
| J S - T O O L T I P (v1.2) |
| |
| Copyright Gerd Tentler info@gerd-tentler.de |
| Created: Feb. 15, 2005 Last modified: Mar. 1, 2005 |
+-------------------------------------------------------------------+
| This program may be used and hosted free of charge by anyone for |
| personal purpose as long as this copyright notice remains intact. |
| |
| Obtain permission before selling the code for this program or |
| hosting this software on a commercial website or redistributing |
| this software over the Internet or in any other medium. In all |
| cases copyright must remain intact. |
+-------------------------------------------------------------------+
======================================================================================================
This script was tested with the following systems and browsers:
- Windows XP: IE 6, NN 4, NN 7, Opera 7
- Mac OS X: IE 5, Safari 1
If you use another browser or system, this script may not work for you - sorry.
------------------------------------------------------------------------------------------------------
USAGE:
Use the toolTip-function with mouse-over and mouse-out events (see example below).
- To show a tooltip, use this syntax: toolTip(text, width in pixels, opacity in percent)
Note: width and opacity are optional
- To hide a tooltip, use this syntax: toolTip()
------------------------------------------------------------------------------------------------------
EXAMPLE:
some text here
======================================================================================================
*/
function TOOLTIP() {
//----------------------------------------------------------------------------------------------------
// Configuration
//----------------------------------------------------------------------------------------------------
this.width = 200; // width (pixels)
this.bgColor = '#FFFFC0'; // background color
this.textColor = '#A00000'; // text color
this.borderColor = '#D00000'; // border color
this.opacity = 80; // opacity (percent) - doesn't work with all browsers
this.cursorDistance = 5; // distance from cursor (pixels)
// don't change
this.text = '';
this.obj = 0;
this.sobj = 0;
this.active = false;
// -------------------------------------------------------------------------------------------------------
// Functions
// -------------------------------------------------------------------------------------------------------
this.create = function() {
if(!this.sobj) this.init();
var t = '<table border=0 cellspacing=0 cellpadding=4 width=' + this.width + ' bgcolor=' + this.bgColor + '><tr>' +
'<td align=center><font color=' + this.textColor + '>' + this.text + '</font></td></tr></table>';
if(document.layers) {
t = '<table border=0 cellspacing=0 cellpadding=1><tr><td bgcolor=' + this.borderColor + '>' + t + '</td></tr></table>';
this.sobj.document.write(t);
this.sobj.document.close();
}
else {
this.sobj.border = '1px solid ' + this.borderColor;
this.setOpacity();
if(document.getElementById) document.getElementById('ToolTip').innerHTML = t;
else document.all.ToolTip.innerHTML = t;
}
this.show();
}
this.init = function() {
if(document.getElementById) {
this.obj = document.getElementById('ToolTip');
this.sobj = this.obj.style;
}
else if(document.all) {
this.obj = document.all.ToolTip;
this.sobj = this.obj.style;
}
else if(document.layers) {
this.obj = document.ToolTip;
this.sobj = this.obj;
}
}
this.show = function() {
var ext = (document.layers ? '' : 'px');
var left = mouseX;
if(left + this.width + this.cursorDistance > winX) left -= this.width + this.cursorDistance;
else left += this.cursorDistance;
this.sobj.left = left + ext;
this.sobj.top = mouseY + this.cursorDistance + ext;
if(!this.active) {
this.sobj.visibility = 'visible';
this.active = true;
}
}
this.hide = function() {
if(this.sobj) this.sobj.visibility = 'hidden';
this.active = false;
}
this.setOpacity = function() {
this.sobj.filter = 'alpha(opacity=' + this.opacity + ')';
this.sobj.mozOpacity = '.1';
if(this.obj.filters) this.obj.filters.alpha.opacity = this.opacity;
if(!document.all && this.sobj.setProperty) this.sobj.setProperty('-moz-opacity', this.opacity / 100, '');
}
}
//----------------------------------------------------------------------------------------------------
// Build layer, get mouse coordinates and window width, create tooltip-object
//----------------------------------------------------------------------------------------------------
var tooltip = mouseX = mouseY = winX = 0;
if(document.layers) {
document.write('<layer id="ToolTip"></layer>');
document.captureEvents(Event.MOUSEMOVE);
}
else document.write('<div id="ToolTip" style="position:absolute; z-index:99"></div>');
document.onmousemove = getMouseXY;
function getMouseXY(e) {
if(document.all) {
mouseX = event.clientX + document.body.scrollLeft;
mouseY = event.clientY + document.body.scrollTop;
}
else {
mouseX = e.pageX;
mouseY = e.pageY;
}
if(mouseX < 0) mouseX = 0;
if(mouseY < 0) mouseY = 0;
if(document.body && document.body.offsetWidth) winX = document.body.offsetWidth - 25;
else if(window.innerWidth) winX = window.innerWidth - 25;
else winX = screen.width - 25;
if(tooltip && tooltip.active) tooltip.show();
}
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();
}