Ergebnis 1 bis 6 von 6
  1. #1
    sladaloose ist offline Grünschnabel
    registriert
    22-04-2005
    Beiträge
    4

    Balloon-Tips mit JS

    Hallo,

    ich google schon seit Tagen, aber ich finde nichts.

    Vielleicht hat jemand von euch eine Idee:

    Ich suche nach einer Möglichkeit per Javascript HTML-Felder mit Hilfe-Texten zu umschreiben. Am besten wäre, dass wenn der Focus auf einer Box ist eine Sprechblase erscheint (Windows XP lässt grüßen) wo dann ein passender Hilfe-Text drin steht.

    Bei ebay unter "Mein ebay" erscheinen solche Balloon-Tips, nur ist das ganze bestimmt Copyrightet etc.

    Weiß jemand, wo ich sowas als Open Source und GPL bekomme?

    Für andere Ideen wie man HTML-Felder mit Hilfe-Texten umschreiben kann bin ich auch offen. Muss nur ansprechend sein. Auffällig aber nicht störend.


    Gruß,
    Johannes

  2. #2
    gwittmann ist offline Grünschnabel
    registriert
    21-04-2005
    Beiträge
    6

    AW: Balloon-Tips mit JS

    Vielleicht hilft die das weiter.

    Ich habe ein Regalsystem programmiert wo bei MouseOver ein Layer angezeigt wird. Getestet unter IE 6 und Firefox.

    in den HTML-Tag:
    onMouseOver="RegalIn('$id', '$Beschreibung');"
    onMouseOut="RegalOut();"

    In die JS-Datei:

    function RegalIn(id, text) {
    var Eltern=document.getElementById(id).offsetParent;
    var i = 0;
    var j = 0;
    while (Eltern) {
    i = i + Math.floor(Eltern.offsetLeft);
    j = j + Math.floor(Eltern.offsetTop);
    Eltern=Eltern.offsetParent;
    }

    j = j + 20;
    document.FormRegalBeschreibung.RegalBeschreibung.value = unescape(text);
    document.getElementById('RegalInhalt').style.left = i;
    document.getElementById('RegalInhalt').style.top = j;
    document.getElementById('RegalInhalt').style.visibility = "visible";
    }

    function RegalOut () {
    document.FormRegalBeschreibung.RegalBeschreibung.value = "";
    document.getElementById('RegalInhalt').style.visibility = "hidden";
    }

    In die HTML-Datei:
    <div id="RegalInhalt" style="position:absolute; width:400px; height:210px; z-index:1; visibility: hidden;" class="RegalDiv" onClick="RegalOut();">
    <form action="" method="post" name="FormRegalBeschreibung" id="FormRegalBeschreibung">
    <textarea name="RegalBeschreibung" rows="15" class="transparentDiv" id="RegalBeschreibung" readonly="readonly"></textarea>
    </form>
    </div>

  3. #3
    DennjoOyola ist offline Grünschnabel
    registriert
    22-04-2005
    Beiträge
    4

    AW: Balloon-Tips mit JS

    Also ich habe das nun nicht mit Sprechblasen gemacht, aber ich habe mir auch solche Hilfeboxen anzeigen lassen, wenn ich z.B. über eine Grafik oder ein Fragezeichen gehe.

    Hier mal das JavaScript

    Code:
    <script language="JavaScript" type="text/javascript">
    function lib_bwcheck(){ //Browsercheck (needed)
    	this.ver=navigator.appVersion
    	this.agent=navigator.userAgent
    	this.dom=document.getElementById?1:0
    	this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
    	this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; 
    	this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
    	this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
    	this.ie=this.ie4||this.ie5||this.ie6
    	this.mac=this.agent.indexOf("Mac")>-1
    	this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
    	this.ns4=(document.layers && !this.dom)?1:0;
    	this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
    	return this
    }
    var bw=lib_bwcheck()
    messages=new Array()
    messages[1] = '<div class="clCaption">Überschrift eins</div><br>Text eins</div>'
    messages[2] = '<div class="clCaption">Überschrift eins</div><br>Text eins</div>'
    messages[3] = '<div class="clCaption">Überschrift eins</div><br>Text eins</div>'
    messages[4] = '<div class="clCaption">Überschrift eins</div><br>Text eins</div>'
    messages[5] = '<div class="clCaption">Überschrift eins</div><br>Text eins</div>'
    fromX = 50 //How much from the actual mouse X should the description box appear?
    fromY = -20 //How much from the actual mouse Y should the description box appear?
    function makeObj(obj){								
       	this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?document.layers[obj]:0;
    	if(!this.evnt) return false
    	this.css=bw.dom||bw.ie4?this.evnt.style:bw.ns4?this.evnt:0;	
       	this.wref=bw.dom||bw.ie4?this.evnt:bw.ns4?this.css.document:0;		
    	this.writeIt=b_writeIt;																
    	return this
    }
    var px = bw.ns4||window.opera?"":"px";
    
    function b_writeIt(text){
    	if (bw.ns4){this.wref.write(text);this.wref.close()}
    	else this.wref.innerHTML = text
    }
    var descx = 0
    var descy = 0
    function popmousemove(e){descx=bw.ns4||bw.ns6?e.pageX:event.x; descy=bw.ns4||bw.ns6?e.pageY:event.y}
    
    var oDesc;
    function popup(num){
        if(oDesc){
    		oDesc.writeIt('<div class="clDescription">'+messages[num]+'</div>')
    		if(bw.ie5||bw.ie6) descy = descy+document.body.scrollTop
    		oDesc.css.left = (descx+fromX)+px
    		oDesc.css.top = (descy+fromY)+px
    		oDesc.css.visibility = "visible"
        }
    }
    function popout(){
    	if(oDesc) oDesc.css.visibility = "hidden"
    }
    function setPopup(){
       	if(bw.ns4)document.captureEvents(Event.MOUSEMOVE)
        document.onmousemove = popmousemove;
    	oDesc = new makeObj('divDescription')
    }
    </script>
    Hier kannst du auch noch weitere Messages hinzufügen, aber ich brauchte halt nur fünf.
    So und nun der Rest

    Code:
    <div id="divDescription" class="clDescriptionCont">
    <!--Empty div-->        
    </div>
    <div id="divLinks" class="clLinks">
    <img src="img/background.jpg" width="714" height="562" border="0" usemap="#Map">
    <map name="Map">
      <area shape="poly" coords="258,328,260,451,268,448,275,452,314,439,316,433,312,431,310,318" href="aboutme.php" onmouseover="popup(1)" onMouseOut="popout()" cursor="pointer" target="about" onClick="window.open('aboutme.php','aboutme','width=500,height=280,left=0,top=0,resizable=no,scrollbars=no'); return false;">
      <area shape="poly" coords="345,501,346,463,349,457,357,453,378,446,388,452,393,466,393,481,393,500,367,508" href="mailto:blabla.de" onmouseover="popup(2)" onmouseout="popout()">
      <!-- <area shape="poly" coords="184,526,200,518,222,526,208,536" href="#" onmouseover="popup(3)" onmouseout="popout()"> -->
      <area shape="poly" coords="46,296,45,318,49,320,46,401,88,413,87,387,183,409,186,322" href="pictures.php" onmouseover="popup(4)" onmouseout="popout()" cursor="pointer" target="pictures" onClick="window.open('pictures.php','pictures','width=600,height=448,left=0,top=0,resizable=no,scrollbars=no'); return false;">
      <area shape="poly" coords="269,473,266,477,265,479,284,489,291,489,291,485" href="impressum.php" onmouseover="popup(5)" onmouseout="popout()" cursor="pointer" target="impressum" onClick="window.open('impressum.php','impressum','width=500,height=250,left=0,top=0,resizable=no,scrollbars=no'); return false;">
    </map>
    </div>
    <script type="text/javascript">setPopup()</script>
    Am besten du kopierst das mal in nen Editor.
    Ich hoffe du meintest sowas

  4. #4
    sladaloose ist offline Grünschnabel
    registriert
    22-04-2005
    Beiträge
    4

    AW: Balloon-Tips mit JS

    Vielen Dank für die schnellen Antworten!

    DennjoOyola: Die Lösung gefällt mir wirklich sehr gut, werde ich mir auf jeden Fall merken, nur passt es nicht gerade in mein jetziges Problem rein. Trotzdem stark!

    gwittmann: Ja, auf diese Funktionsweise hab ich schon gemeint, dass es funktioniert. Hätte gar nicht gedacht, dass es eigentlich so einfach ist :-D.
    Ich schau jetzt einfach mal, dass ich die Textarea so umgestalten kann, dass es wie ein Balloon-Tip von Win-XP aussieht.


    Danke nochmal! Habt mir echt weitergeholfen!

    Gruß,
    Johannes

  5. #5
    Avatar von ZeitGeist
    ZeitGeist ist offline Lounge-Member
    registriert
    26-04-2003
    Ort
    Outa Space
    Beiträge
    4.125

    AW: Balloon-Tips mit JS

    hier gibts nen super ToolTip Menü, ich benutze es auf einer meiner Seiten und bisher alles einwandfrei. Viele einstellmöglichkeiten und kannst auch html im tooltip verwenden.

    http://www.walterzorn.de/tooltip/tooltip.htm

  6. #6
    sladaloose ist offline Grünschnabel
    registriert
    22-04-2005
    Beiträge
    4

    AW: Balloon-Tips mit JS

    Hm, joa, auch nicht schlecht. Vor allem die Bilder gefallen mir gut.

    Mal schauen wie sich das anpassen lässt.

Ähnliche Themen

  1. Quality Tips for Webmasters
    Von dkdenz im Forum Allgemeines
    Antworten: 7
    Letzter Beitrag: 16-10-2004, 17:07
  2. Suche Notebook / Tips dazu
    Von bine im Forum Smalltalk
    Antworten: 14
    Letzter Beitrag: 25-08-2003, 16:10
  3. Meinungen Und Tips ?
    Von PRINZ im Forum Site-Check
    Antworten: 8
    Letzter Beitrag: 24-08-2002, 00:04
  4. tips zum leute nerven
    Von riddler im Forum Fun
    Antworten: 0
    Letzter Beitrag: 12-04-2001, 11:48
  5. Tips gesucht!
    Von Jenny im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 07-03-2001, 18:03

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •