|
||||
H1 mit Link: Image Replacement - Eure aktuelle Empfehlung?
Jens Meiert stellt in einem Artikel diverse Image-Replacement-Techniken vor.
Mich interessieren barrierearme Varianten, für die kein zusätzliches Markup nötig ist, kein PHP, möglichst kein JS. Es geht vorrangig um ein gewöhnliches Markup des Sitetitels. Code:
<h1><a title="Startseite" href="/">Lorem</a></h1> Die Phark-Methode scheidet unter anderem deshalb aus, weil dann das Logo nicht "klickbar" ist. Welche Methode würdet ihr mir empfehlen. IE-Versionen jünger als 7 sollen keine Rolle bei der Auswahl der Methode spielen. Danke.
__________________
Geändert von AndreasB (23.12.2010 um 10:03 Uhr) |
Sponsored Links |
Sponsored Links |
|
||||
Zitat:
Meinst Du mit "Bereichsüberschrift" sowas? HTML-Code:
<div id="site-title"> <h1><a title="Startseite" href="/">Lorem</a></h1> </div>
__________________
|
|
||||
Nein, z.B.
Code:
<h1>Küchencenter Berlin</h1> <h2>Navigation</h2> <ul id="nav"> <li>...
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
||||
Zitat:
In direkter Nachbarschaft zu H1 - wie in Deinem Beispiel - habe ich im Markup keine Bereichsüberschrift zur Verfügung. Schade, dass es keine andere empfehlenswerte IR-Methode gibt, die ohne "leeres Markup" auskommt. Davon unabhängig habe ich mal ein Testcase mit Gilder/Levin gebaut. Es erfüllt die Forderung "IR-Bild muss als Link benutzbar sein" nicht. Das Logo soll ja zur Startseite führen. Wie löst ihr sowas? Testcase: HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> h1 { height: 100px; position: relative; width: 400px; } h1 span { background: url(testbild-blau.png) no-repeat; height: 100%; position: absolute; width: 100%; } </style> </head> <body> <h1><span></span><a title="Startseite" href="/">Lorem</a></h1> </body> </html>
__________________
Geändert von AndreasB (23.12.2010 um 10:54 Uhr) |
|
||||
Zitat:
Mit einem verlinkten Element funktioniert das natürlich nicht (in einem solchen Falle muss das den Text überdeckende Element Nachfahre des Links sein, andernfalls wird natürlich auch dieser überdeckt), aber bei einem Logo stellt sich die IR-Frage doch eh nicht, da ein Logo imho immer ein img sein sollte (sofern es ein echtes Logo ist, und nicht nur der Name in spezieller Schrift o.ä.).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) Geändert von heiko_rs (23.12.2010 um 10:31 Uhr) |
|
||||
Zitat:
In meiner Sichtweise hat der Name den "höheren Rang", die höhere Wertigkeit. Das Logo dient als Alternative.
__________________
|
|
||||
Aber ein Logo ist keine Dekoration, sondern ein essentielles Erkennungsmerkmal einer jeden Firma, und daher viel wichtiger als das Foto des Teamleiters o.ä. Und daher sollte ein Logo imho auch immer im Markup stehen.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
Sponsored Links |
|
||||
Zitat:
Aber ein Logo einer Firma halte ich nicht für wichtiger als ihren Namen. Wirklich sympathisch ist mir die Notwendigkeit/Abhängigkeit von "leerem Markup" bzw. "Markup in der Nachbarschaft" bei der Methode Gilder/Levin nicht. Ich werde daher wohl aus diesem Grund das IMG ins Markup nehmen. HTML-Code:
<h1><a title="Startseite" href="/"><img alt="Lorem" src="logo.png" /></a></h1>
__________________
|
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
image replacement mit phark method | Timoslav | CSS | 4 | 16.06.2009 23:09 |
Imagemap Zugriff bei einer Gallery | Sarah14 | Javascript & Ajax | 3 | 12.11.2007 15:06 |
fahrner image replacement | alejandro | CSS | 1 | 19.08.2007 03:03 |
Input Button Image Replacement | Pablo | CSS | 0 | 17.08.2007 02:35 |