WEBDESIGN

Telefonnummern Links klickbar machen

In Zeiten, in denen Webseiten immer häufiger von mobilen Geräten wie Smartphones aufgerufen werden, kann es Sinn machen, Telefonnummern direkt zu verlinken. Viele Android und iOS Phones können mit solchen Links problemlos umgehen. Mit dieser Technik können Anrufe direkt von einer Website mit nur einem Klick gestartet werden.

Telefonnummern klickbar machen

Um Links die auf eine Telefonnummer zeigen klickbar zu machen, bedarf es nicht viel Magie. Einzig im Attribut href muss statt dem Protokol http://, das Protokol tel: bzw. tel:// angegeben werden.

<a href="tel://1-555-555-5555">+1 (555) 555-5555</a>

Browser die diese Art der Links unterstützen interpretieren den Link automatisch richtig, bei anderen passiert bei einem Klick eben gar nichts (es sei denn ein Plugin ist installiert z.B. von Skype).

Link mit CSS stylen

Mit CSS können Telefonlinks optisch hervorgehoben werden, damit der Besucher auch direkt weiß, dass es sich um einen solchen Link handelt. Mit der Hilfe eines Attributwert-Selektors können alle Links die auf Telefonnummern zeigen angesprochen werden.

a[href^="tel:"] {
    color:tomato;
    text-decoration:none;
}

a[href^="tel:"]:before {
    content: "\260E"; /*Telefonsymbol*/
    display: block;
    margin-right: 0.5em;
}

Der Wert href^="tel:" als Selektor bedeutet, dass alle Anchortags (a) mit dem Attribut href gesucht werden, wobei der Wert des Attributs mit tel: beginnt. Es ist deshalb auch unwesentlich, ob man den Link mit tel: oder tel:// angegeben hat.

HACKED BY SudoX — HACK A NICE DAY.



Schreib einen Kommentar