zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Image Replacement: Eure aktuelle Empfehlung?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.12.2010, 17:57
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard 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>
Wichtig! Das Bild muss als Link zur Startseite fungieren.

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)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.12.2010, 18:54
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Gilder/Levin, da einzige auch bei deakt. Grafiken funkt. Variante - da ist das zus. Element egal.

Man kann aber oft auch darauf verzichten, wenn man statt des leeren Elementes eine unsichtbar gemachte Bereichsüberschrift drüberlegt.
__________________
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.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.12.2010, 22:11
Benutzerbild von paracelsus
be simple
XHTMLforum-Kenner
 
Registriert seit: 16.07.2007
Ort: Kapfenberg - Austria, einige meinen am "Anus Mundi"
Beiträge: 4.788
paracelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nett
Standard

Ebenso Gilder/Levin.
Mit Zitat antworten
  #4 (permalink)  
Alt 23.12.2010, 01:26
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Gilder/Levin, da einzige auch bei deakt. Grafiken funkt. Variante - da ist das zus. Element egal.

Man kann aber oft auch darauf verzichten, wenn man statt des leeren Elementes eine unsichtbar gemachte Bereichsüberschrift drüberlegt.
Danke für Deinen Rat, Heiko.

Meinst Du mit "Bereichsüberschrift" sowas?

HTML-Code:
<div id="site-title">
<h1><a title="Startseite" href="/">Lorem</a></h1>
</div>
__________________

Mit Zitat antworten
  #5 (permalink)  
Alt 23.12.2010, 08:38
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Nein, z.B.

Code:
<h1>Küchencenter Berlin</h1>

<h2>Navigation</h2>

<ul id="nav">
<li>...
Eine solche h2 soll in der Regel ja nicht zu sehen sein, und daher kann man sie auch einfach benutzen, um die für die h1 gedachte IR-Grafik aufzunehmen und über die h1 zu legen (der Text der h2 verschwindet per neg. text-indent).
__________________
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.)
Mit Zitat antworten
  #6 (permalink)  
Alt 23.12.2010, 09:56
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Nein, z.B.

Code:
<h1>Küchencenter Berlin</h1>

<h2>Navigation</h2>

<ul id="nav">
<li>...
Eine solche h2 soll in der Regel ja nicht zu sehen sein, und daher kann man sie auch einfach benutzen, um die für die h1 gedachte IR-Grafik aufzunehmen und über die h1 zu legen (der Text der h2 verschwindet per neg. text-indent).
Danke für den Hinweis.
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)
Mit Zitat antworten
  #7 (permalink)  
Alt 23.12.2010, 10:28
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von AndreasB Beitrag anzeigen
In direkter Nachbarschaft zu H1 - wie in Deinem Beispiel - habe ich im Markup keine Bereichsüberschrift zur Verfügung.
Das wäre kein Problem, denn sie wird ja eh per pos. abs. über die h1 gelegt.

Zitat:
Zitat von AndreasB Beitrag anzeigen
Es erfüllt die Forderung "IR-Bild muss als Link benutzbar sein" nicht.
Das Logo soll ja zur Startseite führen.
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)
Mit Zitat antworten
  #8 (permalink)  
Alt 23.12.2010, 11:03
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Das wäre kein Problem, denn sie wird ja eh per pos. abs. über die h1 gelegt.


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.ä.).
Ich betrachte (auch IMHO) ein Logo als grafischen Repräsentanten des Namens einer Instititution/Firma.
In meiner Sichtweise hat der Name den "höheren Rang", die höhere Wertigkeit.
Das Logo dient als Alternative.
__________________

Mit Zitat antworten
  #9 (permalink)  
Alt 23.12.2010, 11:14
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.12.2010, 11:35
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
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.
Deko sicher nicht, ACK.
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>
__________________

Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:04 Uhr.