---
title: "barrierefreie Headergrafik mit image replace und IE7"
url: "https://www.typo3.net/d/104510-barrierefreie-headergrafik-mit-image-replace-und-ie7"
source: "typo3.net"
tags: ["Frontend","Barrierefreiheit","Frage","HTML & CSS","Links"]
created: "2011-03-18"
last_reply: "2011-03-18"
replies: 2
solved: false
page: 1
pages: 1
lang: "de"
---

# barrierefreie Headergrafik mit image replace und IE7

Frontend › Barrierefreiheit · 2 Antworten · gestartet 2011-03-18

## Eröffnungsbeitrag

**Juergen_190** · 2011-03-18 · [Beitrag #1](https://www.typo3.net/d/104510-barrierefreie-headergrafik-mit-image-replace-und-ie7/1)

Hallo,

Ich versuche ein Headerbild in einen H1 Tag einzubinden, und möchte das ganze per Typolink auf die Stratseite verlinken lassen.
Das funktioniert auch, aber beim IE7 und dem kompatibilitätsmodus ändert sich der
Mauszeiger beim Überfahren der Grfaik nicht.
Beim IE8 und im FF geht es.

Kann mir da jemand helfen?

Hier meine Typoscript:

```typoscript
tempheader = COA
tempheader {
stdWrap.typolink.parameter = 2
  10 = IMAGE
  10.altText = meintext
  10.TitleText = meintext
  10.wrap = <h1 class="imageheader" style="background-image: url(fileadmin/templates/images/headerbild.jpg)">
  10.file = GIFBUILDER
  10.file {

     XY = 980, 130
     transparentColor = #ffffff
     backColor = #cccccc
  }

  20 = TEXT
  #20.current = 1
  20.wrap = Seite mit Image Ressource|</h1>
}

lib.header < tempheader
```

hier das css:

```css
#header h1.imageheader {

   overflow: hidden;
   height: 130px;
   width: 980px;
   background-repeat:no-repeat;
   text-indent: -999em;
   white-space: nowrap;

}
```

und hier noch der doctype:

```typoscript
#DOCTYPE auf XHTML 1.0 Strict setzen, für den IE wird die XML-Angabe umgedreht
config.locale_all = de_DE
config.doctype = xhtml_trans
config.htmlTag_langKey = de-DE
config.xhtml_cleaning = all

[browser = msie]
config.xmlprologue = none
[global]
```

Für Tipps bedanke ich mich.

## Antworten

### [#2](https://www.typo3.net/d/104510-barrierefreie-headergrafik-mit-image-replace-und-ie7/2) · igorshmigor · 2011-03-18

Ich würde den Link innerhalb des h1-Tags setzen, nicht umgekehrt.
Also

```html
<h1 class="imageheader"><a href="meinlink.html">Seite mit Image Ressource</a></h1>
```

statt

```html
<a href="meinlink.html"><h1 class="imageheader">Seite mit Image Ressource</h1></a>
```

Dann würde ich die ganzen CSS-Eigenschaften, die Du **#header h1.imageheader** zugewiesen hast stattdessen dem Link zuweisen. Also einfach **#header h1.imageheader a** draus machen.

### [#3](https://www.typo3.net/d/104510-barrierefreie-headergrafik-mit-image-replace-und-ie7/3) · Juergen_190 · 2011-03-18

Vielen Dank,

Aber wie kriege ich diese HTML Ausgabe  mit obigem Typoscript so hin?

---

Quelle: „barrierefreie Headergrafik mit image replace und IE7“, typo3.net, https://www.typo3.net/d/104510-barrierefreie-headergrafik-mit-image-replace-und-ie7
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.