willst du es "Barrierefrei" Lösen, so wie es auf der Battlepage ist? Also nur mit CSS oder mit Javascript?
Den Code für die CSS-Variante hier:
Code:
<html>
<head>
<title>hover-Marco</title>
<style type="text/css">
body{
font-family:Verdana,Tahoma,Arial;
font-size:12px;
color:#333333;
background-color:#F1F1F1;
margin:10px;
}
#wechsel a {
background: url(orginal_Name.jpg) no-repeat;
display:block; width:334px; /* Linkbereich begrenzen */
}
#wechsel img {
display:block; width:334px; height:500px; border:0;
}
#wechsel a:hover img {
visibility: hidden;
}
#wechsel a:hover { /* Workaround fuer IE 5.5 und 6 */
border:0;
}
* html #wechsel a {
margin-right:1px;
}
* html #wechsel a:hover {
width:334px; margin-right:0; /* Workaround fuer IE 5.01 */
}
</style>
</head>
<body>
<h1>Name des Bildes</h1>
<p id="wechsel">
<a href="#" target="_blank"><img src="Bild_NEU.jpg" alt="Name" /></a>
</p>
<p>Für das Original mit Maus über das Bild fahren</p>
</body>
</html>
Was du ändern mußt:
background: url(orginal_Name.jpg) no-repeat; Den Bildnamen angeben
display:block; width:334px; die Breite des Bildes einstellen bzw, darunter auch die Höhe
<h1>Name des Bildes</h1>
<p id="wechsel">
<a href="#" target="_blank"><img src="Bild_NEU.jpg" alt="Name" /></a>
</p>
<p>Für das Original mit Maus über das Bild fahren</p>
Sachen entsprechend ergänzen, Bilder in den gleichen Ordner und es müßte klappen
Wenn nicht schick mir den Link einfach mal per PN/ICQ