Script gesucht: Menu beim klick

redX

Erfahrenes Mitglied
Hm.. scheiss Titel ;)

Ich suche ein Script, welches beim klick auf ein Bild ein Div (oder was auch immer) einblendet in dem dann was steht. Also dirket dort wo geklickt wurde. Ich möchte den Inhalt aber Variabel füllen können. Also ich habe x von diesen Bildern, und bei allen sollte was anderes stehen. Es sollte ganze Tabellen anzeigen können.

Habe im I-Net gesucht aber nur Script gefunden mit statischem Text.

MFG
 
Suche mal nach "Tooltip"...diese Skripts machen das Gewünschte, du müsstest lediglich die Events ändern, da sie idR nach "onmouseover" horchen.
 
Habe mal so ein Tooltip teil gefunden und habe jetzt meine Probleme beim anpassen.

Das Script ist eigentlich darauf ausgelegt, das wenn man auf einen Link fährt das Tooltip eingeblendet wird und der Maus solange folgt, bis man nicht mehr auf dem Link ist. Ich möchte aber ein Tooltip beim Klick auf einen Link, und verschwinden tut es nur, wenn man auf ein X klickt welches in dem Tooltipfenster angebracht ist.

Probleme:
1. Das Tooltip Div ist beim ersten klick immer links oben. Erst beim 2ten und darauffolgenden Klicks ist es richtig possitioniert. Bei der Funktion crossMoveTo im cross.js habe ich mal einen Alert reingeschrieben (der im Moment rauskommentiert ist) welcher die Positionen angibt. X Position ist nicht vorhanden und Y hat irgend einen Negativen Wert biem ersten klick :confused:
2. Der Tooltip reagiert auf einen onClick. Und bei einem onmouseout verschwindet er wieder. Das onmouseout wollte ich entfernen. Dann reagiert er aber auf dem ganzen Fenster auf meinen click und nicht mehr nur auf dem Button. Im File tooltips.js hat es noch einen onmousup, welcher vieleicht zu dem Problem führen kann. Weiss aber nicht wie ich das Problem beheben kann.


Da ich leider nicht genau weiss wo der Fehler liegt, Poste ich einfach mal alles.

Das steht mal im HTML File.
HTML:
<!-- ganz viele Tags -->
<script language="JavaScript" src="/victorya/victorya.nsf/cross.js"  type='text/javascript'></script>
<script language="JavaScript" src="/victorya/victorya.nsf/tooltips.js" type='text/javascript'></script>
</head>
<body leftmargin='0' topmargin='0' onload='setBallon("BallonTip");'>
<div id="BallonTip" style="POSITION:absolute; VISIBILITY:hidden; LEFT:-200px; Z-INDEX: 100"></div>
<a href='#' onClick="showBallon('Die Ballon-Formatierung richtet sich nach Vorgabewerten, die im Script selber festgelegt werden.'); window.status='Tooltip 1'; return true;" onmouseout="hideBallon(); return true;"><b>Tooltip 1</b></a>
<!-- nochmals ganz viele Tags -->

Dies ist das File toolips.js. Es beinhaltet die Initial Funktion setBallon sowie die beiden Funktionen zum anzeigen show und hide Ballon. In der Initalfunktion habe ich von onmousemove auf onmouseup gewändert und bei der cursorMove eine If ausgeklammert.
Es wird des öffteren auf eine Funktion von cross.js zugegriffen (alle Funktionen, die mit cross... beginnen.)
HTML:
// integriert: Crossbrowser-Funktionen von "cross.js"


/* bitte vergesst nicht, ein Link auf meine Site zu setzen */

// Config:
var ballonBack = "#00ff77";  // Hintergrundfarbe
var ballonText = "#000000";  // Text und Randfarbe
var ballonBreite = 200;        // Ballon-Breite (Vorgabewert)
var ballonBorder = 1;      // Randstärke
var ballonFont = "Arial";
var ballonDir = 0;         // Ausrichtung; 0=rechts 1=links
var ballonVDir = 0;        // Ausrichtung; 0=unten 1=oberhalb
var ballonChangeVDir = 65;    // Schwellwert für Wechsel der 
			      // V-Ausrichtung am unteren Rand
var ballonSpace = 10;        // Abstand vom Cursor
var ballonShow = false; // Anzeige aktiv/inaktiv

var Ballon = null;        // das DIV-Objekt
var b_Breite;             // aktueller Speicher für Ballonbreite
var b_Dir, b_VDir;

// Ballon-Objekt (div) festlegen
function setBallon(id, breite, bgcolor) {
	
	//document.onmousemove = cursorMove;
	document.onmouseup = cursorMove

	if (breite && breite>20) b_Breite = breite;
	if (bgcolor) ballonBack = bgcolor;
	Ballon = crossGetObject(id);
	if (Ballon == null) {
		alert("keine Unterstützung für Ballon-Infos");
		showBallon = noBallon; hideBallon = noBallon;
	}
	ballonShow = false;
}
function noBallon() {} // functionsaufrufe abfangen


// Ballon kreieren und anzeigen
function showBallon(msg, dir, breite, bgcolor) {
	
	var b_Back;
	var relWidth, relHeight;

	if (Ballon == null) return;
	if (breite && breite>20) b_Breite = breite;
	else b_Breite=ballonBreite;
	if (bgcolor) b_Back=bgcolor;
	else b_Back=ballonBack;
	msg = '<table width=' + b_Breite + ' border=0 cellpadding=' + ballonBorder + ' cellspacing=0 bgcolor=\"' + ballonText + '\"><tr><td><table width=100% border=0 cellpadding=3 cellspacing=0 bgcolor=\"' + b_Back + '\"><tr><td><font face=\"'  + ballonFont + '\" color=\"' + ballonText + '\" size=-1>' + msg + '</font></td></tr></table></td></tr></table>';
	if (!dir) b_Dir = ballonDir;
	else b_Dir = dir;
	relWidth = crossInnerWindowWidth() + crossGetScroll("x");
	relHeight = crossInnerWindowHeight() + crossGetScroll("y");
	if (crossMouseX + b_Breite + ballonSpace > relWidth) 
		{b_Dir = 1;}
	else if (crossMouseX < b_Breite + ballonSpace) b_Dir = 0;
	b_VDir = ballonVDir;
	if (crossMouseY + ballonChangeVDir > relHeight) b_VDir = 1;
	else if (crossMouseY - ballonChangeVDir < 0) b_VDir = 0;
	crossWrite(Ballon, msg);
	ballonShow = true;
	crossShowObject(Ballon);
}

function hideBallon() {
	if (Ballon == null) return;
	crossHideObject(Ballon);
	ballonShow=false;
	crossMoveTo(Ballon, -200, 0);
}

// der Maus folgen
function cursorMove(e) {
	var posX, posY;
	
	//crossMousePosition(e);
	crossMousePosition();

	//if (ballonShow) {
		
		if (b_Dir==0) {
			posX = crossMouseX + ballonSpace; 
			if (b_VDir==0) {posY = crossMouseY + ballonSpace;}
			else {posY = crossMouseY - ballonChangeVDir;}
		}
		else {
			posX = crossMouseX-b_Breite-ballonSpace;
			if (b_VDir==0) {posY = crossMouseY + ballonSpace;}
			else {posY = crossMouseY - ballonChangeVDir;}
		}
		crossMoveTo(Ballon, posX, posY)
	//}
}

Und nun das Cross.js file. Es ist Dokumentiert und deshalb recht verständlich gemacht.
HTML:
// Browsertyp ermitteln (und in B_Type speichern)
var B_Type = new crossBrowserType();
function crossBrowserType() {
	this.IE = false;
	this.NS4 = false;
	this.NS6 = false;
	this.id = "";

	if (document.all) {this.IE = true; this.id = "IE";}
	else if (document.getElementById) {this.NS6 = true; this.id = "NS6";}
	else if (document.layers) {this.NS4 = true; this.id = "NS4";}
}

// Mausposition zurückgeben
var crossMouseX, crossMouseY;
if (B_Type.NS4) document.captureEvents(Event.MOUSEMOVE);

function crossMousePosition(e) {
	if (B_Type.IE) {
		crossMouseX=event.x + document.body.scrollLeft; 
		crossMouseY=event.y + document.body.scrollTop;
	}
	else {crossMouseX=e.pageX; crossMouseY=e.pageY;}
}


// browserspezifisches DHTML-Objekt anhand von ID zurückgeben
function crossGetObject(id) {
	var obj = null;
	if (B_Type.IE) obj=document.all[id];
	else if (B_Type.NS6) obj=document.getElementById(id);
	else if (B_Type.NS4) obj=document.layers[id];
	return obj;
}

// Text in DHTML-Objekt ausgeben
function crossWrite(obj, text) {
		
	if (B_Type.IE) obj.innerHTML = text;
	else if (B_Type.NS6) obj.innerHTML = text;
	else if (B_Type.NS4) {
		obj.document.open();
		obj.document.write(text);
		obj.document.close();
	}
}

// verfügbare Fensterbreite ermitteln
function crossInnerWindowWidth() {
	var val;
	if (B_Type.IE) val=document.body.clientWidth;
	else if (B_Type.NS6) val=window.innerWidth;
	else if (B_Type.NS4) val=window.innerWidth;
	return val;
}

// tatsächliche Fensterbreite ermitteln
function crossOuterWindowWidth() {
	var val;
	if (B_Type.IE) val=document.body.offsetWidth;
	else if (B_Type.NS6) val=window.outerWidth;
	else if (B_Type.NS4) val=window.outerWidth;
	return val;
}

// verfügbare Fensterhöhe ermitteln
function crossInnerWindowHeight() {
	var val;
	if (B_Type.IE) val=document.body.clientHeight;
	else if (B_Type.NS6) val=window.innerHeight;
	else if (B_Type.NS4) val=window.innerHeight;
	return val;
}

// Scroll-Position ermitteln, "y" = vertikal, "x" = horizontal
function crossGetScroll(achse) {
	var val;
	if (!achse || achse == "y") {  // vertikale Achse
		if (B_Type.IE) val=document.body.scrollTop;
		else if (B_Type.NS6) val=window.pageYOffset;
		else if (B_Type.NS4) val=window.pageYOffset;
	}
	else {  // horizontale Achse
		if (B_Type.IE) val=document.body.scrollLeft;
		else if (B_Type.NS6) val=window.pageXOffset;
		else if (B_Type.NS4) val=window.pageXOffset;
	}
	return val;
}

// Scroll-Position setzen
function crossSetScroll(x, y) {
	window.scrollTo(x, y);
}


// Objekt positionieren x/y
function crossMoveTo(obj, x, y) {
	if (B_Type.IE) {obj.style.pixelLeft=x; obj.style.pixelTop=y;}
	else if (B_Type.NS4) {obj.left=x; obj.top=y;}
	else if (B_Type.NS6) {obj.style.left=x+"px"; obj.style.top=y+"px";}
	//alert("x -> " + x + "\ny -> " + y); 
}

// Objekt-Position ermitteln
function crossGetPositionX(obj) {
	if (B_Type.IE) return obj.style.pixelLeft;
	else if (B_Type.NS4) return obj.left;
	else if (B_Type.NS6) return parseInt(obj.style.left);
}
function crossGetPositionY(obj) {
	if (B_Type.IE) return obj.style.pixelTop;
	else if (B_Type.NS4) return obj.top;
	else if (B_Type.NS6) return parseInt(obj.style.top);
}

// Objekt anzeigen
function crossShowObject(obj) {
	if (B_Type.IE || B_Type.NS6) {obj.style.visibility="visible";}
	else if (B_Type.NS4) {obj.visibility="show";}
}
// Objekt ausblenden
function crossHideObject(obj) {
	if (B_Type.IE || B_Type.NS6) {obj.style.visibility="hidden";}
	else if (B_Type.NS4) {obj.visibility="hide";}
}


// Hintergrund-Farbe setzen
function crossBackgroundColor(color, obj) {
	if (typeof obj == "undefined") {document.bgColor=color; return;}
	if (B_Type.IE || B_Type.NS6) {obj.style.backgroundColor=color;}
	else if (B_Type.NS4) {obj.document.bgColor=color;}
}


// Hintergrund-Bild setzen
function crossBackgroundImage(obj, img) {
	if (B_Type.IE || B_Type.NS6) {obj.style.backgroundImage="url(" + img + ")";}
	else if (B_Type.NS4) {obj.background.src = img;}
}

Ich danke allen die sich meinem Problem annehmen...

MFG
 
hat niemand Zeit sich darum zu kümmern oder weiss es niemand?

Ich weiss es ist recht viel verlangt. Währe aber sehr dankbar!

MFG
 
Beiträge zu pushen ist unerwünscht... dies gleich mal im Vorraus. Wenn dir niemand antwortet, finde dich damit ab... sonst läufst du Gefahr, dass dein Thema auch mal gelöscht wird.

Das Skript anzupassen hab ich keine Lust... hier mal nen anderes:
Code:
<script type="text/javascript">
<!--
//standardbreite der Tooltips
intDefaultWidth=200;

//Inhalt der Tooltips
//-Arrayschlüssel entspricht der ID des auslösenden Elementes
//-erstes Array-Element jeweils der Text... bei Bedarf auch mit HTML-Anteil(Singlequotes müssen escaped werden)
//-zweites Array-Element ist optional... die gewünschte Breite des Tooltips, falls abweichend von der Standardbreite


arrMsgs             = [];
arrMsgs['bild1']    = ['ein Bild zum Angucken',80];
arrMsgs['button2']  = ['ein Knopf zum Dr&uuml;cken',150];
arrMsgs['txt3']     = ['<b>ein \'fetter\' Text zum Lesen.</b>'];




intZ=1;
function weg(strId)
{
    document.getElementById(strId).style.display="none";
}

function da(objEvt)
{
   intZ++;
   blnIE=window.event;
   objEvt=(blnIE) ? window.event : objEvt;
   objTarget=(blnIE) ? objEvt.srcElement : objEvt.target;
   intScrollX=(blnIE)? document.body.scrollLeft : window.pageXOffset;
   intScrollY=(blnIE)? document.body.scrollTop : window.pageYOffset;
   intPosX=(blnIE) ? objEvt.clientX : objEvt.pageX;
   intPosY=(blnIE) ? objEvt.clientY : objEvt.pageY;
   document.getElementById('tip_'+objTarget.id).style.left=intPosX;
   document.getElementById('tip_'+objTarget.id).style.top=intPosY;
   document.getElementById('tip_'+objTarget.id).style.display='';
}

function vor(strId)
{
    intZ++;
    document.getElementById(strId).style.zIndex=intZ;
}


for(var k in arrMsgs)
    {
        if(document.getElementById)
            {
                try
                    {
                        document.getElementById(k).onclick = da;
                        document.getElementById(k).style.cursor='default';
                        intWidth =(arrMsgs[k].length>1)
                                    ? arrMsgs[k][1]
                                    : intDefaultWidth;

                        document.writeln('<table id="tip_'+k+'"style="z-index:'+intZ+';position:absolute;display:none;width:'+intWidth+'px;background-color:#717171">');
                        document.writeln('<tr><td style="text-align:right;background-color:#313131"onclick="vor(\'tip_'+k+'\')"><b style="cursor:pointer;color:red;"onclick="weg(\'tip_'+k+'\')">x </b></td></tr>')
                        document.writeln('<tr><td style="background-color:#c1c1c1;font:normal 11px Verdana,Geneva,Sans-Serif">'+arrMsgs[k][0]+'</td></tr></table>')
                    }
                catch(e)
                    {
                    }
            }
                
    }
//-->
</script>
Das Skript gehört ans Ende des <body>.
Test: Tooltips mit Javascript unt rotem x.
 
Tut mir leid für das pushen.
Habe die Frage auch schon in einem anderen Forum gepostet.

Nur da keiner schrieb, wusste ich nicht ob das Thema einfach übersehen wurde oder ob einfach niemand sich damit abgeben wollte. Wenn das zweite der Fall währe würde ich mich schon damit abfinden. Aber wenn es das erste ist Pushe ich den Thread lieber da ich doch eine Antwort möchte ;)

Das Script hat geholfen. Habe es etwas auf meine Bedürfnisse angepasst..
- Beim Klick auf den Button wird es geöffnet, und wenn man nochmals darauf klickt schlisst es sich wieder.
- Es ist nur ein Tooltip möglich. Wenn man auf eine Fläche klickt erscheint ein Tooltip und alle, die offen sind werden geschlossen.

Bei dem File fehlen einfach die Bilder. Es aber. (ihr müsst auf die erste Reihe mit Bildern klicken (delivery objects))

;)
 

Anhänge

Neue Beiträge

Zurück