[Meatwad]

du kannst das mit php und javascript machen.

ich poste dir mal ein beispiel (basierend auf JS):

// Global variables
xMousePos = 0; // Horizontal position of the mouse on the screen
yMousePos = 0; // Vertical position of the mouse on the screen
xMousePosMax = 0; // Width of the page
yMousePosMax = 0; // Height of the page
infoElement= null; // node of the Div-Layer that shows the information
xFromMouse=0;
yFromMouse=0;
yUpFromMouse=100;
standardStyle='position:absolute;left:0px;top:0px;visibility:hidden;text-align:left;z-index:999;';
vars=new Object();
vars.tags=[ 'a' ]; // array of tag-names that should provide information
vars.infoAttributeName= 'info'; // in the tags the attribute that contains the text to show	
vars.infoElementCentered= true; // centered relative to mouse-pointer
vars.infoElementId=null; // use this div-Tag for the id to show information, null->create new one
vars.infoElementStyleClass=null; // use this CSS-class if no Id is defined, do not forget padding
vars.infoElementFontSize= '11px'; // use if no Id and no CSS-class is defined
vars.infoElementTextColor='#000000';
vars.infoElementBGColor= '#A8B5C8';// // use if no Id and no CSS-class is definded
function setVariables(){
	var settings= window.infoSettings;
	// infoSettings is optional object that contains user variables
	// insert infoSettings before adding link to this js-file
	if( settings==null ){
		// default values are used		
	} else {
		for( var varName in settings ){
			if( settings[varName]!=null )
				vars[varName]= settings[varName];	
		}
	}	
};
setVariables();	
begin();
function begin(){	
	attachInfoElement();
	installTagListeners();
	oldOnmousemove= document.onmousemove;
	if (document.all) { // Internet Explorer
		yFromMouse=-80;
		xFromMouse=2;
		document.onmousemove = captureMousePosition;
	} else if (document.getElementById) { // Netcsape 6 + Mozilla
		yFromMouse=-60;
		xFromMouse=2;
		document.onmousemove = captureMousePosition;
	}
}
function captureMousePosition(e) {
	if ( document.documentElement&& window.event&& document.documentElement.clientWidth>0 ){
	// IE6 (sometimes)
	xMousePos = window.event.x+ document.documentElement.scrollLeft; 
		yMousePos = window.event.y+document.documentElement.scrollTop;

		xMousePosMax = document.documentElement.clientWidth+document.docu
mentElement.scrollLeft;
		yMousePosMax = document.documentElement.clientHeight+document.doc
umentElement.scrollTop-12;			
   } else if (document.all) {
		// When the page scrolls in IE, the event's mouse position
		// reflects the position from the top/left of the screen the
		// user is looking at. scrollLeft/Top is the amount the user
		// has scrolled into the page. clientWidth/Height is the height/
		// width of the current page the user is looking at. So, to be
		// consistent with Netscape (above), add the scroll offsets to
		// both so we end up with an absolute value on the page, no
		// matter if the user has scrolled or not.		
	xMousePos = window.event.x+document.body.scrollLeft;
		yMousePos = window.event.y+document.body.scrollTop;
		xMousePosMax = document.body.clientWidth+document.body.scrollLeft
;
		yMousePosMax = document.body.clientHeight+document.body.scrollTop
;
	} else if (document.getElementById) {
		// Netscape 6 behaves the same as Netscape 4 in this regard
		xMousePos = e.pageX;
		yMousePos = e.pageY;
		xMousePosMax = window.innerWidth+window.pageXOffset;
		yMousePosMax = window.innerHeight+window.pageYOffset;
	}
	moveElements();	
	if( oldOnmousemove!=null ){		
		oldOnmousemove(e);
	}
}
function out( string ){
	var outDiv=document.getElementById('out')
	if(outDiv!=null) outDiv.firstChild.nodeValue+=string+" ";
}
function moveElements(){
	moveInfoElement();
}
function attachInfoElement( ){
	var str='<div style="'+standardStyle+'" id="';
	if(vars.infoElementId!=null &&vars.infoElementId.length>0){
		str+= vars.infoElementId+'" ';		
	} else {
		vars.infoElementId='infoElement';
		str+= vars.infoElementId+'"';	
		if(vars.infoElementStyleClass!=null && vars.infoElementStyleClass.length>0){
			str+= ' class="'+vars.infoElementStyleClass+'" ';			
		} else {
			str+=' class="'+vars.infoElementId+'" ';
			var sty='<style type="text/css"><!--';
			sty+=('#'+vars.infoElementId+' {');
			sty+=('background-color: '+vars.infoElementBGColor+';');	
			sty+='color:'+vars.infoElementTextColor+';';
			sty+=('border: 2px solid #940010;');
			sty+=('font-size: '+vars.infoElementFontSize+';');
			sty+=('font-family: Arial, Helvetica, sans-serif;');
			sty+='padding:2px;';
			sty+=('}	--></style>');			
			document.writeln( sty );
		}
	}	
	str+=' >&nbsp;</div>'	
	out(str);
	document.writeln( str );	
}
function installTagListeners( delayTime ){
	infoElement=document.getElementById( vars.infoElementId );
	if( infoElement==null ){} else {		
		for( var k=0; k<vars.tags.length; k++){		
			var links=document.getElementsByTagName(  vars.tags[k].toUpperCase() );
			for(var i=0;links!=null&&i<links.length;i++){				
				var node= links[i];
				var infoText=node.getAttribute( vars.infoAttributeName ); 
				if( infoText!=null && infoText.length > 0&& node.infoText_==null ){
						node.infoText_= infoText;
						// the _ is used to avoid name conflicts with the attributes of the user
						node.style.cursor='pointer';
						if( node.onmouseover==null ){
							node.onmouseover= showInfo;					
						} else {
							node.oldOnmouseover= node.onmouseover;
							node.newOnmouseover= showInfo;
							node.onmouseover= function(){
								this.newOnmouseover();
								this.oldOnmouseover();
							}
						}
						if( node.onmouseout==null ){
							node.onmouseout= hideInfo;					
						} else {
							node.oldOnmouseout= node.onmouseout;
							node.newOnmouseout= hideInfo;
							node.onmouseout= function(){
								this.newOnmouseout();
								this.oldOnmouseout();
							}
					   }
				}
			}
		}
	}	
	if( delayTime==null)
		delayTime=0;
	if( delayTime < 2 ){
		delayTime+=0.2;
	}	
	setTimeout('installTagListeners('+delayTime+')',delayTime*1000); 
}
function moveInfoElement(){	
	if( infoElement ==null ){
		//out('infoElement=null ');
		//alert('infoElement=null');
		//infoElement=1;
	} else if( infoElement.style.visibility != 'hidden'){		
		var x=xFromMouse+xMousePos;
		if(vars.infoElementCentered==true){
			x-=0.5*infoElement.offsetWidth;			
		}
		//out(' width: '+infoElement.offsetWidth+' x: '+x+' fx: '+(x+infoElement.offsetWidth)+' |||');
		if( xMousePosMax>0 && x+ infoElement.offsetWidth> xMousePosMax-20 ){
			x= xMousePosMax-20- infoElement.offsetWidth;			
		}
		if( x<5 ){
			x=5;
		}		
		var y=yFromMouse+yMousePos;
		if( yMousePosMax>0 && y+ infoElement.offsetHeight> yMousePosMax ){
			y-= yFromMouse+yUpFromMouse;
		}		
		infoElement.style.left=x+'px'; 
		infoElement.style.top=y+'px';		
	} 
}
function setInfoText( text ){
	var subtext='';
	for(var i=0;i<text.length;++i)
	{
		if(text.substr(i,4)=='<br>')
		{
			infoElement.appendChild(document.createTextNode(subtext));
			infoElement.appendChild(document.createElement('br'));
			subtext='';
			i+=3;
		}
		else
		{
			subtext=subtext+text.charAt(i)
		}
	}
	infoElement.appendChild( document.createTextNode(subtext));
}

function unsetInfoText(){
	while(infoElement.hasChildNodes()){
		infoElement.removeChild(infoElement.lastChild);
	}
}
function showInfo(){
	unsetInfoText();
	infoElement.left='0px';
	infoElement.top='0px';
	setInfoText( this.infoText_ );
	infoElement.style.visibility='visible';
	moveInfoElement();			
}
function hideInfo(){		
	infoElement.style.visibility='hidden';
	unsetInfoText();
}

damit kannst du das haben was du willst, alerdings musst du bei jedem wort dann id="info" machen, je nach configuration

[Floele]

Wenn PHP die Daten über irgendein Skript bekommt (also wenn du nicht nur die blanken HTMl Dateien hast sondern der Text von PHP verarbeitet wird) kannst du das relativ einfach mit str_replace() usw. erledigen. Die Javascriptlösung da oben sieht jedenfalls furchterregend aus

[Meatwad]

@floele: is nich von mir, ich behersche kein JS. jedenfalls funktionierts im FF und im IE

[hasch]

<?php
$var = 'text';
$var = str_replace('Suchwort', 'HTML-Code mit Unterstreichung -> Suchwort', $var);
?>

Rest dann mit DHML oder Java-Script bzw. Tooltips in HTML...

[ichbines]

Hallo

Ich finde eine CSS Lösung besser. Ist übersichtlicher. Und CSS hat kaum jemand abgeschalten im Browser.

CSS-Skript 1
Skript 2

Ich verwende selber auf meiner Seite diesen CSS Code:

/* Tooltip */
a.info {
cursor: normal;
border-bottom: 0px dashed #999;
text-decoration:none;
}
a.info span { display: none; }
a.info:hover span { /* diese Anweisung für Geckos u. Opera */
display:block;
 position:absolute; 
top:24px;left:0em; 
width:30em;
 border:2px solid black;
padding:2px; 
background:#aac; color:#000;
text-align: left;
font-size:81%;
}
a.info:hover { /* für die Anzeige im Internet Explorer */
z-index:25;
background: #aac;
}
a.info { /* relativ zum Elternelement positionieren */
position: relative;
z-index:24;
}

Verwendung:

<a class="info" href="index.html">Home<span>Das hier ist das Popup Menü.</span></a>

@Meatwad
Was ist übersichtlicher?

[hasch]

Zitat (ichbines: 17.01.2006, 17:07)

Ich finde eine CSS Lösung besser. Ist übersichtlicher. Und CSS hat kaum jemand abgeschalten im Browser.

Ja ist sicher auch eine gute Möglichkeit, allerdings kann im Browser auch niemand PHP abstellen, da es ja Serverseitig ist
Jemand, welcher sehr gute Kenntnisse in Javascript hat, wird mit dem oben angewandten Code auch keine Probs haben.

Aber mal eine Frage, diese Tooltips in CSS sind doch auch nur HTML Tooltips, welcher in einer CSS Datei gespeichert und interpretiert werden, oder?

Ebenfalls bin ich ein Fan von DHTML, allerdings habe ich dort überhaupt keine Erfahrung, aber damit kann man auch tolle Sachen machen
Hat jemand Wissen darüber, ob man DHTML im Browser deaktivieren kann?

[ichbines]

Zitat (hasch: 17.01.2006, 18:57)

Ebenfalls bin ich ein Fan von DHTML, allerdings habe ich dort überhaupt keine Erfahrung, aber damit kann man auch tolle Sachen machen
Hat jemand Wissen darüber, ob man DHTML im Browser deaktivieren kann?

Hallo

DHTML bedeutet Dynamic HTML. Bezeichnet wird damit das Kombinieren von drei Techniken: HTML, clientseitige Skriptsprache(Javascript) und einer Schnittstelle zum Änderung und Erweiterung des HTML-Dokuments (Document Object Model)

Weil Dhtml Javascript verwendet, kann man es natürlich abschalten.

Zitat

Ja ist sicher auch eine gute Möglichkeit, allerdings kann im Browser auch niemand PHP abstellen, da es ja Serverseitig ist

Das ist mir natürlich klar. Ich meinte da natürlich die Javascripte.

Zitat

Aber mal eine Frage, diese Tooltips in CSS sind doch auch nur HTML Tooltips, welcher in einer CSS Datei gespeichert und interpretiert werden, oder?

HTML: strukturieren von Texten ohne zu die Elemente zu formartieren
CSS: die Darstellug (den Stil) festlegen.

Also die Tooltips werden logisch mit HTML strukturiert. Dabei werden auch eindeutige Namen verwendet (class, IDs), sodass man das aussehen danach mit CSS festlegen kann.

[hasch]

Zitat (ichbines: 17.01.2006, 18:20)

Das ist mir natürlich klar. Ich meinte da natürlich die Javascripte.

Ja wollte PHP Möglichkeit nur noch als Alternative vermerken
Danke für die Aufklärung bezüglich meiner Fragen!