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
Seite 1 von 1
Acronymsystem Als Php Script?
Anzeige
#2
geschrieben 15. Januar 2006 - 14:00
du kannst das mit php und javascript machen.
ich poste dir mal ein beispiel (basierend auf JS):
damit kannst du das haben was du willst, alerdings musst du bei jedem wort dann id="info" machen, je nach configuration
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+=' > </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
#3
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
#4
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
#5 _BigTim_
geschrieben 15. Januar 2006 - 15:13
Danke an euch beiden! Werd mir beide Möglichkeiten mal zu Gemüte führen!
#6
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...
#8
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:
Verwendung:
<a class="info" href="index.html">Home<span>Das hier ist das Popup Menü.</span></a>
@Meatwad
Was ist übersichtlicher?
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?
#9
geschrieben 17. Januar 2006 - 17:57
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?
#10
geschrieben 17. Januar 2006 - 18:20
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?
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.
#11
geschrieben 17. Januar 2006 - 18:56
Thema verteilen:
Seite 1 von 1