Bild bei Mausberührung vergrössern
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bildergalerie
dank
ende
galerie
grad
http
nachfolgendem code
opus
parameter
sachverhalt
schnelle reaktion
sonnigen thailand
vers
version
wollen
-
Bei nachfolgendem Code wird die Vergrösserung bei Firefox und Opera angezeigt,
Im IE Vers. 8 dagegen nicht:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Bildergalerie</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<style type="text/css">
body
{
background-color: #fff;
font-family: Verdana, Arial, sans-serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0
font-size: 100.01%;
}
#container
{
margin: 20px 0;
padding: 10px;
font-size: 0.9em;
}
#galerie li
{
list-style-type: none;
float: left;
margin: 0 10px 10px 0;
text-align: center;
font-weight: bold;
position: relative;
}
#galerie img
{
width: 180px;
height: 125px;
display: block;
padding: 3px;
border: 1px solid #8B0000;
}
#galerie a .gross
{
display: none;
}
#galerie a:hover .gross
{
width: 328px;
height: 228px;
display: block;
position: absolute;
top: -50px;
left: -50px;
z-index: 1;
background: #fff;
}
/*--Spezialangaben für den Internet Explorer 7--*/
*+html #galerie a:hover { z-index: 1;}
*+html #galerie li{position: static;}
*+html #galerie a {position: relative;}
/*--Spezialangaben für den Internet Explorer 6--*/
*html #galerie a:hover {display: block; z-index: 1;}
*html #galerie li{position: static;}
*html #galerie a {position: relative;}
</style>
<!--Parameter Suchfunktion-->
<script src="../searchhi.js" type="text/javascript"></script>
<!--Ende Parameter Suchfunktion-->
</head>
<body>
<div id="container">
<h3 align="center">Bildergalerie mit Vergrößerung bei Mausberührung</h3>
<div id="galerie">
<ul>
<li>
<a href="#"><img src="test/01DSC_4083_klein.jpg" alt="klein"><img class="gross" src="test/01DSC_4083_gross.jpg" alt="gross"></a>
</li>
<li>
<a href="#"><img src="test/02DSC_4084_klein.jpg" alt="klein"><img class="gross" src="test/02DSC_4084_gross.jpg" alt="gross"></a>
</li>
<li>
<a href="#"><img src="test/03DSC_4094_klein.jpg" alt="klein"><img class="gross" src="test/03DSC_4094_gross.jpg" alt="gross"></a>
</li>
<li>
<a href="#"><img src="test/04DSC_4095_klein.jpg" alt="klein"><img class="gross" src="test/04DSC_4095_gross.jpg" alt="gross"></a>
</li>
</ul>
</div> <!--Ende galerie-->
<br style="clear: both;">
Wer hat eine Lösung?
wolle-joy -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hi
Ich habs grad in meinen Browsern getestet, bei mir funktionierts. Der IE 8 funktioniert vieles wie im FF oder Opera, villeicht bindest du deine <IE8 Versionen per Browserweiche ein oder fügst bei onHover eine Hilfsklasse ein.
Mit der Hilfsklasse wäre dann auch :hover unnötig und die Browserweiche und Javascript braucht man so oder so überall.
Grüsse -
Hallo glitzerglas,
danke für Deine schnelle Reaktion, ich werde den Sachverhalt überprüfen und denke, dass das Thema damit erledigt ist
Liebe Grüsse aus dem sonnigen Thailand
wolle resp.: wolle-joy -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
