Hallo,
ich habe im Netz eine css-Fotogalerie gefunden, die ich in meine HP einbauen möchte. Generell funktioniert sie, habe nur ein Problem mit dem Internet Explorer. Klickt man mit der Maus auf eine kleines Bild, wird dieses korrekt als Großes Bild weiter unten angezeigt. Muß man aber (z.B. bei kleinem Monitor oder Laptop Display) den Scrollbalken des Browsers benutzen, verliert das "Bild" den Fokus und der Scrollbalken erhält den Fokus, so dass das Bild wieder ausgeblendet wird. Beim FireFox gibt es das Problem nicht.
Hat von Euch jemand eine Ahnung was getan werden muss, dass es auch im IE funktioniert?
Anbei ist der Quellcode dazu. Vielen Dank schon mal & viele Grüße,
Cosimax
Quellcode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Bildershow</title>
<style type="text/css">
.a, .a:visited {color:#000;}
#container {position:relative; width:600px; height:700px; background:#123456; border:1px solid #fff000; margin:10px auto;}
#container b {font-weight:normal; width:600px; text-align:center; position:absolute; bottom:250px; left:0; color:#123456; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; letter-spacing:1px; line-height:1.7em; z-index:1;}
a.gallery, a.gallery:visited {display:inline; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:75px; float:left; margin:7px 21px; position:relative; cursor:default;}
a.slidea {background: url(b1_klein.jpg);}
a.slideb {background: url(b2_klein.jpg);}
a.slidec {background: url(b3_klein.jpg);}
a.slided {background: url(file:///D|/web/WebSites/Simone1/html/spole/sph4.jpg);}
a.slidee {background: url(file:///D|/web/WebSites/Simone1/html/spole/sph5.jpg);}
a.slidef {background: url(file:///D|/web/WebSites/Simone1/html/spole/spv1.jpg);}
a.slideg {background: url(file:///D|/web/WebSites/Simone1/html/spole/spv2.jpg);}
a.slideh {background: url(file:///D|/web/WebSites/Simone1/html/spole/spv3.jpg);}
a.slidei {background: url(file:///D|/web/WebSites/Simone1/html/spole/spv4.jpg);}
a.slidej {background: url(file:///D|/web/WebSites/Simone1/html/spole/spv5.jpg);}
a.gallery span {visibility:hidden; display:block; position:absolute; width:580px; height:500px; top:189px; left:9px; color:#000; background:#f1f1f2; text-align:center; border:1px solid #fff; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; letter-spacing:1px; cursor:default;}
a.slidea span {left:-13px; top:180px;}
a.slideb span {left:-132px; top:180px;}
a.slidec span {left:-251px; top:180px;}
a.slided span {left:-370px; top:180px;}
a.slidee span {left:-489px; top:180px;}
a.slidef span {left:-13px; top:89px;}
a.slideg span {left:-132px; top:89px;}
a.slideh span {left:-251px; top:89px;}
a.slidei span {left:-370px; top:89px;}
a.slidej span {left:-489px; top:89px;}
a.gallery:hover {white-space:normal; border:1px solid #fff; z-index:100;}
a.gallery:hover span {visibility:visible; z-index:100;}
a.gallery:hover span img {margin:10px; border:1px solid #000; position:relative; z-index:100;}
a.gallery:active, a.gallery:focus {border:1px solid #666666; z-index:10;}
a.gallery:active span, a.gallery:focus span {visibility:visible; z-index:10;}
a.gallery:active span img, a.gallery:focus span img {border:1px solid #000; position:relative; margin:10px; z-index:10;}
</style>
</head>
<body>
<div id="container"> <b><br />
hier kommen die Bilder rein<br />
</b>
<a class="gallery slidea" href="#nogo"><span><img src="file:b1.jpg" alt="Warm to Cold" title="Warm to Cold" /><br />Irgendwo in Asien...</span></a>
<a class="gallery slideb" href="#nogo"><span><img src="file:b2.jpg" alt="Wheels" title="Wheels" /><br />Irgendein Ding</span></a>
<a class="gallery slidec" href="#nogo"><span><img src="file:b3.jpg" alt="Urban Squirrel" title="Urban Squirrel" /><br />Schmuckes Teil</span></a>
<a class="gallery slided" href="#nogo"><span><img src="file:///D|/web/WebSites/Simone1/html/spole/simonh4.jpg" alt="Mother and Daughter" title="Mother and Daughter" /><br />Mother and Daughter</span></a>
<a class="gallery slidee" href="#nogo"><span><img src="file:///D|/web/WebSites/Simone1/html/spole/simonh5.jpg" alt="River Junk" title="River Junk" /><br />River Junk</span></a>
<a class="gallery slidef" href="#nogo"><span><img src="file:///D|/web/WebSites/Simone1/html/spole/simonv1.jpg" alt="Portrait One" title="Portrait One" /><br />Portrait One</span></a>
<a class="gallery slideg" href="#nogo"><span><img src="file:///D|/web/WebSites/Simone1/html/spole/simonv2.jpg" alt="Portrait Two" title="Portrait Two" /><br />Portrait Two</span></a>
<a class="gallery slideh" href="#nogo"><span><img src="file:///D|/web/WebSites/Simone1/html/spole/simonv3.jpg" alt="Portrait Three" title="Portrait Three" /><br />Portrait Three</span></a>
<a class="gallery slidei" href="#nogo"><span><img src="file:///D|/web/WebSites/Simone1/html/spole/simonv4.jpg" alt="Bow and Fiddle rock" title="Bow and Fiddle rock" /><br />Bow and Fiddle rock</span></a>
<a class="gallery slidej" href="#nogo"><span><img src="file:///D|/web/WebSites/Simone1/html/spole/simonv5.jpg" alt="The Pose" title="The Pose" /><br />The Pose</span></a>
</div>
</body>
</html>
ich habe im Netz eine css-Fotogalerie gefunden, die ich in meine HP einbauen möchte. Generell funktioniert sie, habe nur ein Problem mit dem Internet Explorer. Klickt man mit der Maus auf eine kleines Bild, wird dieses korrekt als Großes Bild weiter unten angezeigt. Muß man aber (z.B. bei kleinem Monitor oder Laptop Display) den Scrollbalken des Browsers benutzen, verliert das "Bild" den Fokus und der Scrollbalken erhält den Fokus, so dass das Bild wieder ausgeblendet wird. Beim FireFox gibt es das Problem nicht.
Hat von Euch jemand eine Ahnung was getan werden muss, dass es auch im IE funktioniert?
Anbei ist der Quellcode dazu. Vielen Dank schon mal & viele Grüße,
Cosimax
Quellcode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Bildershow</title>
<style type="text/css">
.a, .a:visited {color:#000;}
#container {position:relative; width:600px; height:700px; background:#123456; border:1px solid #fff000; margin:10px auto;}
#container b {font-weight:normal; width:600px; text-align:center; position:absolute; bottom:250px; left:0; color:#123456; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; letter-spacing:1px; line-height:1.7em; z-index:1;}
a.gallery, a.gallery:visited {display:inline; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:75px; float:left; margin:7px 21px; position:relative; cursor:default;}
a.slidea {background: url(b1_klein.jpg);}
a.slideb {background: url(b2_klein.jpg);}
a.slidec {background: url(b3_klein.jpg);}
a.slided {background: url(file:///D|/web/WebSites/Simone1/html/spole/sph4.jpg);}
a.slidee {background: url(file:///D|/web/WebSites/Simone1/html/spole/sph5.jpg);}
a.slidef {background: url(file:///D|/web/WebSites/Simone1/html/spole/spv1.jpg);}
a.slideg {background: url(file:///D|/web/WebSites/Simone1/html/spole/spv2.jpg);}
a.slideh {background: url(file:///D|/web/WebSites/Simone1/html/spole/spv3.jpg);}
a.slidei {background: url(file:///D|/web/WebSites/Simone1/html/spole/spv4.jpg);}
a.slidej {background: url(file:///D|/web/WebSites/Simone1/html/spole/spv5.jpg);}
a.gallery span {visibility:hidden; display:block; position:absolute; width:580px; height:500px; top:189px; left:9px; color:#000; background:#f1f1f2; text-align:center; border:1px solid #fff; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; letter-spacing:1px; cursor:default;}
a.slidea span {left:-13px; top:180px;}
a.slideb span {left:-132px; top:180px;}
a.slidec span {left:-251px; top:180px;}
a.slided span {left:-370px; top:180px;}
a.slidee span {left:-489px; top:180px;}
a.slidef span {left:-13px; top:89px;}
a.slideg span {left:-132px; top:89px;}
a.slideh span {left:-251px; top:89px;}
a.slidei span {left:-370px; top:89px;}
a.slidej span {left:-489px; top:89px;}
a.gallery:hover {white-space:normal; border:1px solid #fff; z-index:100;}
a.gallery:hover span {visibility:visible; z-index:100;}
a.gallery:hover span img {margin:10px; border:1px solid #000; position:relative; z-index:100;}
a.gallery:active, a.gallery:focus {border:1px solid #666666; z-index:10;}
a.gallery:active span, a.gallery:focus span {visibility:visible; z-index:10;}
a.gallery:active span img, a.gallery:focus span img {border:1px solid #000; position:relative; margin:10px; z-index:10;}
</style>
</head>
<body>
<div id="container"> <b><br />
hier kommen die Bilder rein<br />
</b>
<a class="gallery slidea" href="#nogo"><span><img src="file:b1.jpg" alt="Warm to Cold" title="Warm to Cold" /><br />Irgendwo in Asien...</span></a>
<a class="gallery slideb" href="#nogo"><span><img src="file:b2.jpg" alt="Wheels" title="Wheels" /><br />Irgendein Ding</span></a>
<a class="gallery slidec" href="#nogo"><span><img src="file:b3.jpg" alt="Urban Squirrel" title="Urban Squirrel" /><br />Schmuckes Teil</span></a>
<a class="gallery slided" href="#nogo"><span><img src="file:///D|/web/WebSites/Simone1/html/spole/simonh4.jpg" alt="Mother and Daughter" title="Mother and Daughter" /><br />Mother and Daughter</span></a>
<a class="gallery slidee" href="#nogo"><span><img src="file:///D|/web/WebSites/Simone1/html/spole/simonh5.jpg" alt="River Junk" title="River Junk" /><br />River Junk</span></a>
<a class="gallery slidef" href="#nogo"><span><img src="file:///D|/web/WebSites/Simone1/html/spole/simonv1.jpg" alt="Portrait One" title="Portrait One" /><br />Portrait One</span></a>
<a class="gallery slideg" href="#nogo"><span><img src="file:///D|/web/WebSites/Simone1/html/spole/simonv2.jpg" alt="Portrait Two" title="Portrait Two" /><br />Portrait Two</span></a>
<a class="gallery slideh" href="#nogo"><span><img src="file:///D|/web/WebSites/Simone1/html/spole/simonv3.jpg" alt="Portrait Three" title="Portrait Three" /><br />Portrait Three</span></a>
<a class="gallery slidei" href="#nogo"><span><img src="file:///D|/web/WebSites/Simone1/html/spole/simonv4.jpg" alt="Bow and Fiddle rock" title="Bow and Fiddle rock" /><br />Bow and Fiddle rock</span></a>
<a class="gallery slidej" href="#nogo"><span><img src="file:///D|/web/WebSites/Simone1/html/spole/simonv5.jpg" alt="The Pose" title="The Pose" /><br />The Pose</span></a>
</div>
</body>
</html>
