ilch Forum » Allgemein » HTML, PHP, SQL,... » MouseOver popup...

Geschlossen
  1. Di. 02.08.2011 14:12 Uhr #1
    User Pic
    Peter Mitglied
    Registriert seit
    16.12.2006
    Beiträge
    171
    Beitragswertungen
    0 Beitragspunkte
    Hi ich hätte gern den gleichen effekt (leaguecraft.com/item/Sheen) wenn man dort über das blid mit dem blauen schwert mit der maus geht..

    kommt ein popup wo alles drin erklärt wird..

    wie funktioniert das wie kann ich das am besten und einfachsten realisieren?

    am besten wäre, wenn es möglich ist diesem bild egal wo es auf der website ist immer mit diesem Popup zu versehen..

    PS.: hab schon im seitenquelltext der website geschaut aber leider nicht ganz rausgefunden wie das ganze funktioniert.. wäre für jede hilfe dankbar

    edit.: vll der begriff oder name für diesen effekt würde mich schon helfen um über google weiter zu kommen

    Vielen dank schonmal

    Gruß Peter


    Zuletzt modifiziert von Peter am 02.08.2011 - 14:18:49
    0 Mitglieder finden den Beitrag gut.
  2. Di. 02.08.2011 14:36 Uhr #2
    User Pic
    Fonsi1 Mitglied
    Registriert seit
    01.05.2010
    Beiträge
    455
    Beitragswertungen
    35 Beitragspunkte
    Schaumal hier
    externer Link
    Hier wurde es schonmal besprochen..
    externer Link
    1 Mitglieder finden den Beitrag gut.
  3. Di. 02.08.2011 16:28 Uhr #3
    User Pic
    Peter Mitglied
    Registriert seit
    16.12.2006
    Beiträge
    171
    Beitragswertungen
    0 Beitragspunkte
    vielen lieben dank genau sowas hatte ich gesucht.. werd jetzt erst mal das ein wenig ausprobieren..

    die ein oder andere frage:
    kann ich einfach dann dem bild eine id geben?
    und dann in einer extra datei (zB. tooltip.html) oder muss das in der gleichen datei stehen?

    ich seh gerade das mit der "8. Tooltip-Inhalt per JavaScript-Variable oder Funktionsaufruf " ist dafür gedacht.. (geht das in einer seperaten datei?)

    und muss ich dann für jedes bild das reinschreiben? 
    var txt1 = "Dies ist der Text des ersten Tooltips";

<a img="bild1.jpg" onmouseover="Tip(txt1)" onmouseout="UnTip()"></a>


    das mit dem Funktionsaufruf hab ich nicht ganz verstanden..

    und wenn ich das über die JAVA variable mach.. hab ich dann die möglichkeit das ganze in dem Tooltip mit Java zu gestalten?

    was wäre für mich die einfachste/beste möglichkeit

    vielen dank

    Gruß
    Peter


    Zuletzt modifiziert von Peter am 02.08.2011 - 16:31:52
    0 Mitglieder finden den Beitrag gut.
  4. Di. 02.08.2011 17:52 Uhr #4
    User Pic
    Fonsi1 Mitglied
    Registriert seit
    01.05.2010
    Beiträge
    455
    Beitragswertungen
    35 Beitragspunkte
    Sorry finde das Tool super..
    Aber stehe voll auf kriegsfuß damit, weil ich die Codes auch net rischtig eingebunden krieg zwinker
    Hat mir auch jemand geholfen...
    0 Mitglieder finden den Beitrag gut.
  5. Mi. 03.08.2011 10:46 Uhr #5
    User Pic
    Peter Mitglied
    Registriert seit
    16.12.2006
    Beiträge
    171
    Beitragswertungen
    0 Beitragspunkte
    vll findet sich noch jmd hier der mir die fragen beantworten kann..

    aber danke schonmal

    wer sich damit auskennt oder das zumindest schon soweit benutzt hat um mir meine fragen zu beantworten... bitee posten..

    danke

    Gruß Peter


    Zuletzt modifiziert von Peter am 03.08.2011 - 10:47:29
    0 Mitglieder finden den Beitrag gut.
  6. Mi. 03.08.2011 10:53 Uhr #6
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.629
    Beitragswertungen
    1192 Beitragspunkte
    Mit was hast Du denn Schwierigkeiten?
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
  7. Mi. 03.08.2011 12:59 Uhr #7
    User Pic
    Peter Mitglied
    Registriert seit
    16.12.2006
    Beiträge
    171
    Beitragswertungen
    0 Beitragspunkte
    naja so für 1 bild ist das ziemlich klar..

    aber ich bräuchte halt am besten das ganze "global" und immer wenn ich dem bild
    zB onmouseover="tooltip1" mitgebe, das dann dort auch angezeigt wird..

    und halt extern eine extra datei wo ich alle tooltips anlege und und auch gleich sage wie es ausehen soll etc..

    bei mir soll das dann genau so sein wie auf meiner beispiel seite und immer wenn das Item bild (entsprechnder link halt) wo ist.. dies auch mit einem tooltip versehen ist..

    ich hätte es halt gern extern damit der link relativ klein bleibt
    also zB so
    <a img="bild1.jpg" onmouseover="tooltip1" onmouseout="UnTip()"></a>
    und nicht:
    <a href="index.htm" onmouseover="Tip('Text mit <img src=&quot;pics/image.jpg&quot; width=&quot;60&quot;>Bild.')" onmouseout="UnTip()"> Homepage </a>

    oder noch länger


    Zuletzt modifiziert von Peter am 03.08.2011 - 13:05:32
    0 Mitglieder finden den Beitrag gut.
  8. Mi. 03.08.2011 13:51 Uhr #8
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.629
    Beitragswertungen
    1192 Beitragspunkte
    So zum Beispiel: 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
<!--
function MyTip(arg)
{
    switch(arg)
    {
    	case "bild_1": return Tip("Tooltip-Text für Bild 1", SHADOW, true);
    	case "bild_2": return Tip("Tooltip-Text für Bild 2", SHADOW, true);
    	case "bild_3": return Tip("Tooltip-Text für Bild 3", SHADOW, true);
    }
}
//-->
</script>
</head>
<body>
<script type="text/javascript" src="wz_tooltip.js"></script>
<script type="text/javascript" src="tip_balloon.js"></script>

<a href="link" onmouseover="MyTip('bild_1')" onmouseout="UnTip()"><img scr="bild1.jpg" alt="bild1" border="0" /></a>
<a href="link" onmouseover="MyTip('bild_2')" onmouseout="UnTip()"><img scr="bild2.jpg" alt="bild2" border="0" /></a>
<a href="link" onmouseover="MyTip('bild_3')" onmouseout="UnTip()"><img scr="bild3.jpg" alt="bild3" border="0" /></a>

</body>
</html>


    Wobei natürlich der JS Anteil, also die Funktion (MyTip) in eine Datei gespeichert und überall dort wo benötigt in den Header gesetzt werden kann.
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
  9. Mi. 03.08.2011 14:15 Uhr #9
    User Pic
    Peter Mitglied
    Registriert seit
    16.12.2006
    Beiträge
    171
    Beitragswertungen
    0 Beitragspunkte
    perfekt kann ich dann auch in dem 
    function MyTip(arg)
{
   switch(arg)
   {
        case "bild_1": return Tip("Tooltip-Text für Bild 1", SHADOW, true);
        case "bild_2": return Tip("Tooltip-Text für Bild 2", SHADOW, true);
        case "bild_3": return Tip("<img scr="bild3.jpg" alt="bild3" border="0" />", SHADOW, true);
   }
}


    wo kann ich da css einfügen und bilder.. kann ich da zb einfach wie bei "bild_3" ein bild einfügen oder wie geht das?


    Zuletzt modifiziert von Peter am 03.08.2011 - 14:16:30
    0 Mitglieder finden den Beitrag gut.
  10. Mi. 03.08.2011 15:18 Uhr #10
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.629
    Beitragswertungen
    1192 Beitragspunkte
    case: Bild_1 steht für das "Tooltip-aufrufende-Wort" dahinter im Tooltip-Text kommt dein Inhalt rein!

    Schau auch nochmal auf die Beschreibung der von Fonsi1 genannten Seite, hier speziell Punkt 7 "Tooltips mit CSS-Klassen gestalten"!


    Zuletzt modifiziert von Lord|Schirmer am 03.08.2011 - 15:21:50
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten