nicht angemeldet
Ich habe in einem div ein Bild als Hintergrundbild geladen und möchte dieses nun durch anklicken vergrößern. Ich habe das mit :focus geschaft. Dies funktioniert aber nur unter firefox. Ich musste auch noch eine verweissensitive Graphik (map Befehl) benutzen, da ich nicht das gesamte div als anklickbaren Bereich haben wollte. Da ich barrierefrei arbeiten möchte, kann ich kein Javaskript verwenden. Das Problem ist nun, das das ganze im IE nicht funktioniert. Auch wenn ich statt focus aktiv verwende funktioniert das nicht. Ich habe eine vereinfachte Version der Seite beigefügt. Wenn jemand eine Idee hat währe ich sehr dankbar. Ich verwende übrigens auf der Originalseite (www.haus-martinus.de) eine Browserweiche, sodas ich für firefox eine andere css nutzen kann als für den IE.
Css Datei funtioniert in firefox:
body {
font-family: Arial, Helvetica, sans-serif;
}
#bild1
{
position:absolute;
cursor:pointer;
width:360px;
height:240px;
z-index:13;
}
#bild1 a {
position:absolute;
width:360px;
height:240px;
background-image:url(../photos/wohnzimmertrans.gif);
background-repeat:no-repeat;
}
#bild1 a:focus
{
position:absolute;
width:360px;
height:240px;
background-image:url(../photos/wohnraumgr.jpg);
background-repeat:no-repeat;
}
Dazugehörige Html Datei:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<link href="../css/bild.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="bild1">
<a id="hier" name="hier" href="#" tabindex="18"><map id="bild" name="bild"><area shape="rect" coords="105,70,255,170" href="#hier" alt="Wohnzimmer" /></map>
<img src="../photos/trans.gif" width="360" height="240" border="0" alt="Bild des Wohnzimmers. Man sieht einen großen Raum mit einer Sitzgruppe vor einem alten Kamin." usemap="#bild" />
</a>
</div>
</body>
</html>