Eine Blase Informationen über CSS Links
Hier ist, wie Sie Informationen Blasen in CSS. Diese Blasen haben den gleichen Stil wie die websnapr Diese Website nimmt Screenshots von Anwendungen die sie erhält, dann speichert in einer Datenbank. Sie haben eine Höhe und Breite fest, die die Anzahl der Zeichen Grenzen einzufügen.
Hier ist ein Beispiel für diese Blasen
Was für ein köstliches Körperzusammensetzung ist eine grafische Tabelle, die folgt man weiß ja nie, was Sie können.?
Hier ist, was das PNG-Bild, diese Informationen zu erstellen Blase aussieht. Diese Vorschau wurde direkt in Photoshop übernommen.
Klicken Sie hier, um das wirkliche Bild
Nun, hier ist der Code, um diese Informationen zu erstellen Blase
HTML
<a href="votreDestination" class="info"> Der Name Ihres Link <span> Beschreibung Ihrer Verbindung mit einem Maximum von 130 Zeichen in diesem Fall, wenn </ span> </ a> Die CSS
a. info ( position: absolute; / * Sehr wichtig * / background: none; / * Wichtig für das Funktionieren auf IE * / z-index: 10; ) { a. Info: hover ( z-index: 20; ) a. Infos span ( display: none; ) span { /*la tag SPAN apparaitra avec l'effet hover*/ a. Info: hover span (/ * span-Tag wird angezeigt, mit dem Rollover-Effekt * / display: block; position: absolute; top: 18px; left: 10px; / * Elemente, um den Text Position in der Blase * / / * Sie können auch padding: 24px 8px 5px 25px; * / padding-left: 25px; padding-top: 24px; padding-bottom: 5px; padding-right: 8px; width: 205px; height: 45px; / * Style der Charakter in der Blase * / ; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-style: italic; font-size: 10px; ; color: # 999999; text-decoration: none; text-align: justify; ) / * Für einen schönen Hintergrund von Blasen mit PNG Transparenz * / >span { a. Info: hover> span ( images/bgInfo .png ) ; background-image: url (Bilder / BGInfo. png); ) span { a. Info: hover span ( ( src= "/images/bgInfo.png" , Filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (src = "/ images / bgInfo.png" ; sizingMethod = 'crop'); )
Nun hoffe ich, dass mit diesem Tutorial werden Sie in der Lage, diese Blase Wirkung auf 2,0 zu schaffen. Wenn Sie Fragen haben, zögern Sie auf unserem Forum fragen. Viel Glück!
Tags: Bubble Info, CSS, Links, Tutorials
Februar 9, 2008 at 0:07
Interessant, ich danke Ihnen Bookmark den Tipp!
Februar 9, 2008 at 0:09
Super bequeme diesem Tutorial ... Ich versuche es heute abend!
Wenn es funktioniert, füge ich Ihnen eine (tutmarks.com) unmittelbar Marke
Februar 9, 2008 at 0:10
Schade, daß die Höhe nicht berücksichtigen, den Inhalt und die Begrenzung der Nutzung dieser Ballon freundlich gestalterischer Sicht.
Februar 9, 2008 at 0:11
Es ist großartig, um die Höhe nach dem Text anzupassen, aber es erfordert mehr Zeilen Code dafür. Der Code ist so einfach wie möglich. Aber ich will eine komplexere Version mit automatischer Anpassung vorzunehmen.
Februar 9, 2008 at 0:13
Es ist eine gute Sache für ein Objekt verwendet werden, die von so vielen Menschen wie möglich, so müssen wir so wenig wie möglich Einhalt zu gebieten (leichter gesagt als getan:)).
Bravo für Ihre Arbeit
Februar 9, 2008 at 0:13
sehr schön, sehr klar, sehr gut
Februar 9, 2008 at 0:15
tuto ist wirklich schön danke beaucaup hat der Verfasser
Februar 9, 2008 at 0:15
Wonderful, thank you.
März 28, 2008 at 8:12
Perfekt!
Das einzige Problem für mich ist, dass selbst mit text-decoration: none; ich in der Blase geht von einem Hub von der gleichen Farbe wie der Link hervorgehoben (besucht oder nicht)
März 28, 2008 at 12:39
Test ein border: 0px; oder machen ein! Wichtiger Zeile in Ihrer text-align: none ...
Beispiel:
text-decoration: none;
März 29, 2008 at 9:35
Nein keine dieser Methoden funktioniert, ist der größte Teil der Blase an den Rand meines Container geschnitten, sogar mit einer z-index von 20 auf die Blase und 2 auf dem Behältnis.
März 29, 2008 at 20:50
Können Sie mir die URL, damit ich den Code sehen können?
März 30, 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 können klicken Sie direkt auf "Verbindung", dann auf "garantiert" dann haben Sie ein Beispiel für die Blase auf der rechten Seite auf den Link, um das Telefon links.
Vielen Dank für Ihre Hilfe;)
März 31, 2008 at 15:30
Ich sah das Problem Ihrer Tooltips in Ihrem CSS dazu führen, dass Problem ist die overflow-y: auto; in der Klasse. Home
Ich nahm es und es scheint gut zu funktionieren, wenn Sie legte einen Überlauf, alles, was in den Tag gefunden wird, wird nicht überlaufen und wird am Ende versteckt.
Ich hoffe, dass meine Antwort auf Ihr Problem.
Guten Tag!
Juli 17, 2008 at 7:55
Genial Ihr Tutorial, aber ist es möglich, diese Ballons auf einem Bild zu bekommen? Ich habe versucht, aber der Tooltip wird in das Bild, während ich es, über die unten rechts ... Ist das möglich?
Danke
Oktober 20, 2008 at 11:25
Hallo, super tutau, aber ich habe ein Bar-Menü mit ul und li und so wollte ich um die Info-Blase verwenden, aber es wird geschnitten, wenn es scheint! So sehe ich nicht ein Spiel!
Oktober 26, 2008, 15:04
Danke
Oktober 30, 2008 at 8:14
Hallo,
wie die Blase gesetzt (mit einem anderen Blase in die andere Richtung) über den Link-Text, wie Facebook in der Leiste am unteren bitte?
Thank you ...
Heve
November 6, 2008, 12:48
coooooooooooool! Danke
Dezember 17, 2008 at 12:06
(Subjekt - Display-Blase)
Hallo
Ist es möglich, die Verknüpfung zu einem Bild Karte setzen?
Vielen Dank und die große Tutorial!
Guten Tag!