Tytuły linków

Dzisiaj będzie o tytułach linków, czyli o rzeczy bardzo prostej, o której jednak wcześniej nic pisane nie było. Ostatnio coś mi się o uszy obiło i postanowiłam, że pomysł jest ciekawy i można się tym nieco pobawić. Ale dzisiaj tylko teoria, praktyka w kolejnym poście. 

Jak wygląda link każdy wie, ale dla przypomnienia:

<a class="nav" href="http://graphical-thoughts.blogspot.com/">Link 1</a>

Elementy:

• czerwone to klasa linku. O tym już było przy okazji tworzenia bardzo prostego menu. Jest to po prostu pewien "coś", który definiuje nam wygląd linku;
• zielone to adres url, do którego przenosi nas link;
• niebieskie to nazwa linku, które nie należy mylić z tytułem.

A więc gdzie w tym wszystkim tytuł? A no tu:

<a title="przenieś" class="nav" href="http://graphical-thoughts.blogspot.com/">Link 1</a>

Link 1 Link 2 Link 3 Link 4 Powyżej podgląd live naszego małego dzieła.
Ten atrybut sprawi, że po najechaniu na link pojawi się tytuł, który wcześniej wpisaliśmy, czyli tutaj "przenieś". Proste? No ba, że proste!

***

To teraz wersja nieco trudniejsza, ale taka, która pozwoli nam na modyfikowanie wyglądu "boxu" ( albo raczej tytułu ), który wyskakuje. Pomysł i wykonanie znalezione tutaj.

A więc zacznijmy podobnie jak w przypadku dwulinijkowego menu:

<a href="#" class="tip">Link 1<span>Jestem taki magiczny!</span></a>

Tutaj naszym tytułem będzie "Jestem taki magiczny", który jest między elementami span.

Link 1Jestem taki magiczny!

Link jak link, nic nadzwyczajnego. W dodatku jeszcze jakiś taki nieładny i za długi, mający jakiś "ogonek". 

a.tip {
    border-bottom: 1px solid #ddd;;
    text-decoration: none
}
a.tip:hover {
    cursor: help;
    position: relative
}

O klasach trochę już wiecie, dlatego tutaj możecie tworzyć klasy linków, jakie tylko Wam się podobają. Mniej wymyśle, bardziej wymyśle - jakie chcecie! Tutaj główine skupimy się na elemencie span tego linku.

a.tip span {display: none}

Po wpisaniu tego kodu tekst "Jestem taki magiczny" zniknie i zostanie nam sama nazwa linku, czyli:

Link 1Jestem taki magiczny!

No to dalej, bo przecież ta nasza nazwa musi jakoś wyglądać:

a.tip:hover span {    border: #c0c0c0 1px solid;    padding: 5px 20px 5px 5px;    display: block;    z-index: 100;    letter-spacing:2px;    background:#f0f0f0;    left: 0px;    margin: 10px;    width: 220px;    position: absolute;    top: 10px;    font-family:cambria;    font-style:italic;    color:#F54D70;    text-decoration: none;}

Podkreślone elementy możecie swobodnie zmieniać, nie powodując problemów z wyświetlaniem. Oczywiście możecie dodawać też inne kody, wedle Waszego upodobania! Oto mój efekt:

Link 1Jestem taki magiczny!

Pomocne źródła: Link 1, Link 2