Updates
04.12.2015: Mural Step

Affiliates

Dark-Passion-GFX Sugoi-Yuki Vanta Black Ryuuen Kizuna-Graphics

Welcome

to Vashuron, Kirons virtual playground! On this website you will find various graphics and resources as well as my fanlisting collective. Vashuron first went online on the 26th September 2014. Best view in Google Chrome with a screen resolution of 1366x768px. Please don't reupload/redistribute or alter my original content without my permission.

Navigation

Tooltips stylen




In diesem Tutorial geht es darum, bei Links die Tooltips anzupassen. Tooltips sind die kleinen Kästen, die auftauchen, wenn man länger auf einem Link hovert und beschreiben, wo dieser Link hinführt. Vor allem bei Icon- oder Bilderlinks werden sie oft verwendet.

Wir machen das, indem wir das title="" Attribut stylen. Anfangs sollte unser Linkhtml so aussehen:
<a href="http://linkurl" title="Linktitel, den wir in dem Tutorial stylen">Euer Link </a>


Ungestylt sieht das ganze so aus:


Um die Tooltips in eurem Stylesheet stylen zu können, müsst ihr euch erst mal dieses Script als qTip.js speichern. Dazu einfach alles in den Editor kopieren, die Datei bei Speichern unter... qTip.js nennen und (Wichtig!) von Textdateien (*.txt) zu alle Dateien (*.*) umstellen, wie beim erstellen von PHP Seiten auch. Ihr könnt außerdem gleich noch X und Y Offset in dieser Datei einstellen. ist aber nicht unbedingt nötig.


Das ladet ihr dann auf euren Server und fügt es mit diesem Code in die Tags ein:
<script language="JavaScript" src="Ordner, in dem das Script ist/qTip.js" type="text/JavaScript"></script>


Nun könnt ihr auch schon mit dem Stylen anfangen! Das macht ihr in eurem Stylesheet mit dem div#qTip { } Tag. Es ist wichtig, dass ihr die Position bei absolute lasst und sicher geht, dass die z-index Zahl die höchste eures Stylesheets ist. Das display:none; ist dafür da, dass das Kästchen nicht angezeigt wird, ohne dass ihr über etwas drüber hovert. So könnte es dann am Ende zum Beispiel aussehen:


div#qTip {
display:none;
z-index:1000;
position:absolute;
padding:3px;
max-width:100px;
text-decoration:none;
font-size:8px;
background-color:#000;
color:#fff;
text-transform:lowercase;
letter-spacing:2px;
font-style:italic; }


Ich hoffe, dass euch das Tutorial geholten hat! ★~(◡‿◕✿)
Wenn etwas unverständlich ist, könnt ihr mir jeder Zeit eine Frage stellen.





Kommentare

Bisher sind keine Kommentare vorhanden.


Kommentar hinterlassen

Name:
Homepage:
E-Mail:
fettgedruckter Text kursiver Text unterstrichener Text zentrierter Text Hyperlink einfgen E-Mail-Adresse einfgen Bild einfgen Zitat einfgen Liste erstellen CODE einfgen PHP-Code einfgen
         
    
Sicherheitscode:



Kiron ist momentan offline