WinFuture-Forum.de: Acronymsystem Als Php Script? - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

Acronymsystem Als Php Script?

#1 _BigTim_

  • Gruppe: Gäste

geschrieben 15. Januar 2006 - 11:45

Hallo!
Ich suche für meine Website ein Acronymsystem. Also das man bestimmte Wörter unterstreichen lassen kann oder sowas und wenn man dann über dieses Wort mit der Maus geht, kommt eine kleine Erklärung in Form eines kleinem Pop-Ups oder sowas, wie hier auf Winfuture die Werbung mit den grünen Links angezeigt wird...

Ich hoff jemand versteht, was ich suche und kennt da was...

Falls es wichtig sein sollte. Ich hab PHP 5 auf´m Server!

Grüße, BigTim
0

Anzeige

#2 Mitglied ist offline   Meatwad 

  • Gruppe: aktive Mitglieder
  • Beiträge: 784
  • Beigetreten: 07. August 04
  • Reputation: 0

geschrieben 15. Januar 2006 - 14:00

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
I am away to look for my self. If I am back before I return keep me here. | Mein Server
0

#3 Mitglied ist offline   Floele 

  • Gruppe: aktive Mitglieder
  • Beiträge: 919
  • Beigetreten: 22. Juni 04
  • Reputation: 0

geschrieben 15. Januar 2006 - 14:18

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 :D
0

#4 Mitglied ist offline   Meatwad 

  • Gruppe: aktive Mitglieder
  • Beiträge: 784
  • Beigetreten: 07. August 04
  • Reputation: 0

geschrieben 15. Januar 2006 - 15:08

@floele: is nich von mir, ich behersche kein JS. jedenfalls funktionierts im FF und im IE
I am away to look for my self. If I am back before I return keep me here. | Mein Server
0

#5 _BigTim_

  • Gruppe: Gäste

geschrieben 15. Januar 2006 - 15:13

Danke an euch beiden! Werd mir beide Möglichkeiten mal zu Gemüte führen! :D
0

#6 Mitglied ist offline   hasch 

  • Gruppe: aktive Mitglieder
  • Beiträge: 1.790
  • Beigetreten: 28. Januar 04
  • Reputation: 0

geschrieben 16. Januar 2006 - 12:53

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


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

#7 _BigTim_

  • Gruppe: Gäste

geschrieben 17. Januar 2006 - 14:57

Danke werd ich auch mal ausprobieren... ;)
0

#8 Mitglied ist offline   ichbines 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.725
  • Beigetreten: 06. Oktober 02
  • Reputation: 0

geschrieben 17. Januar 2006 - 17:07

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&uuml;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&uuml;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? ;)
0

#9 Mitglied ist offline   hasch 

  • Gruppe: aktive Mitglieder
  • Beiträge: 1.790
  • Beigetreten: 28. Januar 04
  • Reputation: 0

geschrieben 17. Januar 2006 - 17:57

Beitrag anzeigenZitat (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 :gähn:
Hat jemand Wissen darüber, ob man DHTML im Browser deaktivieren kann?
0

#10 Mitglied ist offline   ichbines 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.725
  • Beigetreten: 06. Oktober 02
  • Reputation: 0

geschrieben 17. Januar 2006 - 18:20

Beitrag anzeigenZitat (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 :cool:
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.
0

#11 Mitglied ist offline   hasch 

  • Gruppe: aktive Mitglieder
  • Beiträge: 1.790
  • Beigetreten: 28. Januar 04
  • Reputation: 0

geschrieben 17. Januar 2006 - 18:56

Beitrag anzeigenZitat (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 :cool:
Danke für die Aufklärung bezüglich meiner Fragen!
0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0