Tooltip/Hoverbox Skript

Ein leicht anzuwendendes Ajax Tooltip Pop-up Box Script, mit dem man zusätzliche Informationen anbieten kann, wenn der Benutzer mit dem Cursor über dem Gegenstand schwebt, ohne ihn anzuklicken. Es ist eine kleine "Schwebebox" mit Informationen über den Gegenstand, über den man schwebt.

Features

  • Völlig kundengerechtes tooltip. Sie können die Hintergrundfarbe/die Breite der einzelnen tooltips weiter ändern.
  • Hoverbox Inhalt kann Bilder, Bilder mit Text und einen Untertitel sowie anderes reiches HTML umfassen.
  • Pop-up wird im Allgemeinen für die Lieferung einer Schnittstelle zwischen Zeiger und Druckknopf verwendet.
  • Stützt alle modernen Browser.

Vorschau

Downloads

Code Javascript Code
<!-- Script by hscripts.com -->
<!-- Copyright of HIOXINDIA -->
<!-- More scripts @www.hscripts.com -->
<style type = "text/css">
#bubble_tooltip{
width:210px;
position:absolute;
display: none;
}
#bubble_tooltip .bubble_top{
position:relative;
background-image: url(htooltip/bubble_top.gif);
background-repeat:no-repeat;
height:18px;
}
#bubble_tooltip .bubble_middle{
position:relative;
background-image: url(htooltip/bubble_middle.gif);
background-repeat: repeat-y;
background-position: bottom left;
}
#bubble_tooltip .bubble_middle div{
padding-left: 12px;
padding-right: 20px;
position:relative;
font-size: 11px;
font-family: arial, verdana, san-serif;
text-decoration: none;
color: red;
text-align:justify;
}
#bubble_tooltip .bubble_bottom{
background-image: url(htooltip/bubble_bottom.gif);
background-repeat:no-repeat;
height:65px;
position:relative;
top: 0px;
}
</style>
<script type="text/javascript" src="htooltip/ajax.js"></script>
<!-- Script by hscripts.com -->


HTML Code
<!-- Script by hscripts.com -->
<table id="bubble_tooltip" align=center border=0 cellpadding=0 cellspacing=0>
<tr class="bubble_top"><td></td></tr>
<tr class="bubble_middle"><td><div id="bubble_tooltip_content"></div></td></tr>
<tr class="bubble_bottom"><td colspan=5></td></tr>
</table>
<br><br><br> Bewegen Sie den Mauszeiger über die Schaltfläche oder das Bild <br><br><br>
<input type="button" id="b1" value="Taste" style='cursor:pointer;' onmouseover="showToolTip('htooltip/tooltip1.html','bubble_tooltip_content',event)" onmouseout="hideToolTip()"></input>
<br><br> <a href="#" onmouseover="showToolTip('htooltip/tooltip2.html','bubble_tooltip_content',event)" onmouseout="hideToolTip()"> LINK </a>
<div align=center style='font-size: 10px; color: #dadada;' id="dumdiv">
<a href="http://www.hscripts.com" id="dum" style='text-decoration:none; color: #dadada;'>Ã&copy; hscripts.com</a>
</div>
<!-- Script by hscripts.com -->
  • Veröffentlichungsdatum - 2011-03-28
  • Sie erhalten eine Gratisversion ohne Copyright Link für nur $5
  • Für die Benutzer spezifische Anpassung dieses Skripts oder Skriptentwicklungen setzen Sie sich bitte mit uns unter support@hscripts.com in Verbindung.

Nutzung

  • Laden Sie herunter und öffnen Sie die Akten. Sie erhalten die notwendigen Akten.
  • Kopieren Sie den oben genannten Code und kleben Sie ihn in Ihre Webseite.Die Datei enthält die Bilder, die in diesem Tooltip Script verwendet werden. Um Gebrauch von den Bildern zu machen, fügen Sie die nachfolgenden Zeilen in Ihren Code ein.
  • Sie können die Nachricht der Hoverbox in den tooltip1.html und tooltip2.html Dateien verändern./
  • HTML Inhalt /
  • Ihre Nachricht wird als Argument für die Javascript Funktion übergeben showtooltip('tooltip1.html','bubble_tooltip_content',eve
  • /
  • Wenn der Cursor über den Knopf oder Link fährt, wird die Funktion showtooltip('tooltip2.html','bubble_tooltip_content',eve
  • ausgelöst und die Pop-up Box wird angezeigt.

Lizenz

  • Diese Scripts Ajax / HTML-Code ist unter der GPL Lizenz gegeben.
  • Freie Benützung d. h. für diejenigen, die es benutzen, wie es ist.
  • Kostenlos, wenn Sie Ihre Änderungen nicht entfernen unsere Copyright-Informationen und Links.
  • Detaillierte Informationen License finden Sie hier.
  • Erwerben Sie das Skript, wenn Ihre Anforderungen nicht erfüllt GPL Lizenzbestimmungen.