Tooltip

S

Sasser

Erfahrenes Mitglied
Hallo Leute!

Ich habe ein Script gefunden, mit welchem es möglich ist, bereits in Bildern und Links hinterlegte Titel zu formatieren. Das Script funktioniert in einem eigenen HTML-Dokument super, allerdings wenn ich den JS in meine functions.js einfüge funktioniert es nicht mehr. Was kann das Problem sein oder wie kann man das so umbauen, dass es keine Probleme mehr gibt?

HTML: 
<style type="text/css">
div#qTip {
 padding: 3px;
 border: 1px solid #000000;
 display: none;
 background: #B8860B;
 color: #FFFFFF;
 font: bold 9px Verdana, Arial, sans-serif;
 text-align: left;
 position: absolute;
 z-index: 1000;
}
</style>

<script language="JavaScript">
var qTipTag = "a,img";
var qTipX = 15;
var qTipY = 0;

tooltip = {
name : "qTip",
offsetX : qTipX,
offsetY : qTipY,
tip : null
}

tooltip.init = function () {
var tipNameSpaceURI = "http://www.w3.org/1999/xhtml";
if(!tipContainerID){ var tipContainerID = "qTip";}
var tipContainer = document.getElementById(tipContainerID);
if(!tipContainer) {
tipContainer = document.createElementNS ? document.createElementNS(tipNameSpaceURI, "div") : document.createElement("div");
tipContainer.setAttribute("id", tipContainerID);
document.getElementsByTagName("body").item(0).appendChild(tipContainer);
}
if (!document.getElementById) return;
this.tip = document.getElementById (this.name);
if (this.tip) document.onmousemove = function (evt) {tooltip.move (evt)};
var a, sTitle, elements;
var elementList = qTipTag.split(",");
for(var j = 0; j < elementList.length; j++)
{
elements = document.getElementsByTagName(elementList[j]);
if(elements)
{
for (var i = 0; i < elements.length; i ++)
{
a = elements[i];
sTitle = a.getAttribute("title");
if(sTitle)
{
a.setAttribute("tiptitle", sTitle);
a.removeAttribute("title");
a.removeAttribute("alt");
a.onmouseover = function() {tooltip.show(this.getAttribute('tiptitle'))};
a.onmouseout = function() {tooltip.hide()};
}
}
}
}
}

tooltip.move = function (evt) {
var x=0, y=0;
if (document.all) {
x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
x += window.event.clientX;
y += window.event.clientY;
} else {
x = evt.pageX;
y = evt.pageY;
}
this.tip.style.left = (x + this.offsetX) + "px";
this.tip.style.top = (y + this.offsetY) + "px";
}

tooltip.show = function (text) {
if (!this.tip) return;
this.tip.innerHTML = text;
this.tip.style.display = "block";
}

tooltip.hide = function () {
if (!this.tip) return;
this.tip.innerHTML = "";
this.tip.style.display = "none";
}

window.onload = function () {
tooltip.init ();
}
</script>

<a href="#" title="Test">Testlink</a>
<img src="#" title="Test">
 
Sasser hat gesagt.:
allerdings wenn ich den JS in meine functions.js einfüge funktioniert es nicht mehr. Was kann das Problem sein oder wie kann man das so umbauen, dass es keine Probleme mehr gibt?
Zum Vergrößern anklicken....
Um zu den möglichen Ursachen was sagen zu können, wirst du uns schon einen Einblick in den Scriptcode von "functions.js" gewähren müssen, denn hellsehen ist nicht unsere Stärke.

Denkbar wäre hier die window.onload-Funktion, falls es davon im Script-Code eine weitere gibt, die dann am Ende des Scripts zusammengeführt gehören:

Javascript: 
window.onload = function(){
function1();
function2();
}


mfg Maik
 
Bekomme es leider trotzdem nicht zum Laufen, selbst wenn ich den ganzen anderen Quellcode aus der Datei entferne ... :(

Muss ich den Code vll. in den Body machen?
 
Das lässt dann die Vermutung zu, dass entweder in dem Dokument der Pfad zur Script-Datei nicht stimmt, oder sich innerhalb des Scriptaufrufs ein Syntaxfehler eingeschlichen hat.

Es darf hier dann munter weitergeraten werden :p

mfg Maik
 
Also ich habs jetzt direkt in das Dokument eingebracht und es funktioniert!

Kann man den CSS-Code irgendwie mit in das Javascript mit einbauen, sodass ich nicht so ein Wirrwar habe?

Also das:
HTML: 
<style type="text/css">
 div#qTip {
 padding: 3px;
 border: 1px solid #000000;
 border-right: 2px solid #000000;
 border-bottom: 2px solid #000000;
 display: none;
 background: #B8860B;
 color: #FFFFFF;
 font: bold 9px Verdana, Arial, sans-serif;
 text-align: left;
 position: absolute;
 z-index: 1000;
}
</style>

Da mit rein:
HTML: 
<script language="JavaScript">
var qTipTag = "a,img";
var qTipX = 15;
var qTipY = 0;

tooltip = {
name : "qTip",
offsetX : qTipX,
offsetY : qTipY,
tip : null
}

tooltip.init = function () {
var tipNameSpaceURI = "http://www.w3.org/1999/xhtml";
if(!tipContainerID){ var tipContainerID = "qTip";}
var tipContainer = document.getElementById(tipContainerID);
if(!tipContainer) {
tipContainer = document.createElementNS ? document.createElementNS(tipNameSpaceURI, "div") : document.createElement("div");
tipContainer.setAttribute("id", tipContainerID);
document.getElementsByTagName("body").item(0).appendChild(tipContainer);
}
if (!document.getElementById) return;
this.tip = document.getElementById (this.name);
if (this.tip) document.onmousemove = function (evt) {tooltip.move (evt)};
var a, sTitle, elements;
var elementList = qTipTag.split(",");
for(var j = 0; j < elementList.length; j++)
{
elements = document.getElementsByTagName(elementList[j]);
if(elements)
{
for (var i = 0; i < elements.length; i ++)
{
a = elements[i];
sTitle = a.getAttribute("title");
if(sTitle)
{
a.setAttribute("tiptitle", sTitle);
a.removeAttribute("title");
a.removeAttribute("alt");
a.onmouseover = function() {tooltip.show(this.getAttribute('tiptitle'))};
a.onmouseout = function() {tooltip.hide()};
}
}
}
}
}

tooltip.move = function (evt) {
var x=0, y=0;
if (document.all) {
x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
x += window.event.clientX;
y += window.event.clientY;
} else {
x = evt.pageX;
y = evt.pageY;
}
this.tip.style.left = (x + this.offsetX) + "px";
this.tip.style.top = (y + this.offsetY) + "px";
}

tooltip.show = function (text) {
if (!this.tip) return;
this.tip.innerHTML = text;
this.tip.style.display = "block";
}

tooltip.hide = function () {
if (!this.tip) return;
this.tip.innerHTML = "";
this.tip.style.display = "none";
}

window.onload = function () {
tooltip.init ();
}
</script>

PS: Da ich das JavaScript nun im Body habe, führt er einige andere Scripte nicht mehr aus... Ich werde wahnsinnig ...
 
Zuletzt bearbeitet:
Also ich habe es mittlerweile hinbekommen, es lag wirklich an den mehreren Aufrufen ;)

Kann man den Code eigentlich noch kürzen?

Ich möchte gern das folgende ins Script einbauen um es übersichtlicher zu machen. Es wird sowieso nicht wieder geändert:

HTML: 
var qTipTag = "img";
var qTipX = 15;
var qTipY = 0;

tooltip = {
name : "qTip",
offsetX : qTipX,
offsetY : qTipY,
tip : null
}

Kann man das entfernen und ins Script direkt übernehmen?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück