Eine Blase Informationen über Links in CSS
Hier ist, wie Sie Informationen Blasen in CSS. Diese Blasen haben den gleichen Stil wie die websnapr Diese Website nimmt Screenshots von Anwendungen ist es empfängt, dann hat er Aktien in einer Datenbank . Sie haben eine feste Höhe und Breite, die die Anzahl der Zeichen begrenzt einzufügen.
Ein Beispiel für diese Blasen
Was für eine köstliche Komposition Körper ist ein grafisches Diagramm, und folgt man weiß nie, was du willst. ?
Hier ist, was das PNG-Bild für die Erstellung dieser Informationen Blase aussieht. Diese Vorschau wurde direkt in Photoshop übernommen.
Klicken Sie hier zum Download des realen Bildes
Nun, hier ist der Code für die Erstellung dieser Informationen bubble
Der HTML-
<a href="votreDestination" class="info"> Der Name Ihres Link <span> Beschreibung Ihrer Verbindung mit einem Maximum von 130 Charakter in diesem Fall, wenn </ span> </ a>
Die CSS
wurde. info ( position: relative; / * Sehr wichtig * / Hintergrund: none; / * Wichtig für die Wirkung auf IE * / z-index: 10; ) { wurde. Info: hover ( z-index: 20; ) wurde. span info ( display: none; ) span { /*la tag SPAN apparaitra avec l'effet hover*/ wurde. Info: hover span (/ * * SPAN-Tag wird angezeigt mit dem Hover-Effekt / display: block; position: absolute; top: 18px; links: 10px; / * Elemente in die Position des Textes in der Blase * / / * Verwenden Sie können auch padding: 24px 25px 5px 8px; * / padding-left: 25px; padding-top: 24px; padding-bottom: 5px; padding-right: 8px; width: 205px; height: 45px; / * Style des Charakters in die Blase * / ; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-style: italic; font-size: 10px; ; color: # 999999; text-decoration: none; text-align: justify; ) / * * Um einen schönen Hintergrund von Blasen mit PNG Transparenz / >span { wurde. Info: hover span> ( images/bgInfo .png ) ; background-image: url (images / BGInfo. png); ) span { wurde. Info: hover span ( ( src= "/images/bgInfo.png" , Filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (src = "/ images / bgInfo.png" ; sizingMethod = 'crop'); )
Nun, ich hoffe, dass mit diesem Tutorial werden Sie in der Lage, diese Blase Effekt auf 2,0 schaffen. Wenn Sie Fragen haben, zögern Sie nicht uns fragen, auf forum . Viel Glück!
Tags: Bubble Info , CSS , Links , Tutorials
9. Februar 2008 um 00.07 Uhr
Interessant, ich danke Ihnen Bookmark den Schlauch!
9. Februar 2008 um 0.09
Super bequeme diesem Tutorial ... Ich versuche es heute abend!
Wenn es funktioniert, füge ich Ihnen eine Mark (tutmarks.com) sofort
9. Februar 2008 um 00.10 Uhr
Schade, daß die Höhe nicht berücksichtigen, den Inhalt und die Begrenzung der Nutzung dieser Ballon eines sympathischen Design Sicht.
9. Februar 2008 um 00.11 Uhr
Es ist großartig, um die Höhe nach dem Text, aber das erfordert mehr Zeilen Code dafür. Der Code ist so einfach wie möglich. Aber ich beabsichtige, eine komplexere Version mit automatischer Anpassung vorzunehmen.
9. Februar 2008 um 00.13 Uhr
Es ist eine gute Sache für ein Objekt verwendet werden, von so vielen Menschen wie möglich, es in möglichst wenig (muss rein leichter gesagt als getan:)).
Bravo für Ihre Arbeit
9. Februar 2008 um 00.13 Uhr
sehr schön, sehr klar, sehr gut
9. Februar 2008 um 00.15 Uhr
Tutorial ist wirklich schön danke beaucaup seinen Autor
9. Februar 2008 um 00.15 Uhr
Wunderbar, ich danke Ihnen.
28. März 2008 at 8:12
Perfekt!
Das einzige Problem für mich ist, dass auch mit text-decoration: none; ich Inneren der Blase, die unterstrichen durch einen Schlaganfall in der gleichen Farbe wie der Link (besucht wird oder nicht)
28. März 2008 um 12:39
Testen eines border: 0px; oder was anderes! Wichtige Zeile in Ihrer text-decoration: none ...
Beispiel:
text-decoration: none! important;
29. März 2008 um 9:35
Keine der beiden Vorschläge nicht funktioniert, wird über die Blase an den Rand meines Behälter schneiden, sogar mit einem z-index von 20 auf die Blase und 2 auf dem Behältnis.
29. März 2008 20.50 Uhr
Können Sie mir die URL, damit ich den Code sehen können?
30. März 2008 at 6:59
Die Webseite ist in der Regel nur lokal aber ich habe eine verkürzte Version online: xttp: / / xxxxxxx.xxx / Forderungen /
Sie klicken direkt auf "Verbindung", dann links auf "garantiert" dann haben Sie ein Beispiel für die Blase an der rechten Seite zu verlinken auf dem Handy.
Vielen Dank für eure Hilfe;)
31. März 2008 um 15:30 Uhr
Ich schaute auf das Problem Ihres Tooltips in Ihrem CSS Problem, wodurch die overflow-y: auto; in der Klasse. Home
Ich nahm es und es scheint gut zu funktionieren, wenn Sie einen Überlauf bringen, all das ist in dem Tag gefunden wird, nicht überlaufen und wird versteckt gefunden werden.
Ich hoffe, dass meine Antwort auf Ihr Problem.
Guten Tag!
17. Juli 2008 at 7:55
Genial Ihrem Tutorial, aber ist es möglich, diese tooltip auf ein Bild setzen? Ich habe versucht, aber der Werkzeugspitze bleibt im Bild, so will ich sie einrastet unten rechts ... ist das möglich?
Danke
20. Oktober 2008 um 11:25
Hallo, super tutau, aber ich habe ein Bar-Menü mit ul und li und so wollte ich die Info-Blase verwenden, aber es wird geschnitten, wenn es erscheint! Plötzlich sehe ich nicht ein Spiel!
26. Oktober 2008 um 15:04
Dank
30. Oktober 2008 bei 8:14
Hallo
wie man die Blase (bubble mit einem anderen in die andere Richtung gestellt) über den Link-Text, bitte die Art und Weise Facebook in der Leiste am unteren Rand?
Danke ...
Heve
6. November 2008, 12:48
coooooooooooool! Danke
17. Dezember 2008 um 12:06
(Topic - Display-Blase)
Hallo
Ist es möglich, den Link zu einem Bild Karte setzen?
Vielen Dank und das tolle Tutorial!
Guten Tag!