|
|
Posted by Per W. on 09/05/05 22:06
Hi, i am trying to help someone with some code for a simple photoalbum, its
okey in IE and in FF, but in Opera the selected picture is not showing, in
both IE and FF the picture is showing in fullsize when hover over the
thumnails, but in Opera the picture is behind the background picture, i have
tried som z-index, but then FF is going bananas.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<style type="text/css">
a.slidea {background:url(pic/thumb1.jpg);}
a.slideb {background:url(pic/thumb2.jpg);}
a.slidec {background:url(pic/thumb3.jpg);}
a.slided {background:url(pic/thumb4.jpg);}
..info {position:absolute; top:0; left:0; padding-bottom:1em;}
..slidek {display:block; position:relative; width:415px; height:300px;
top:0px; left:0; padding:0; border:1px solid #000000;}
a.gallery {display:block; color:#111111; text-decoration:none; border:1px
solid #ffffff; width:75px; height:54px; margin:3px; float:left;}
a.gallery span {display:block;left:0px; top:0px; width:1px; height:1px;
overflow:hidden;}
a.gallery:hover {white-space:normal; border:1px solid #000000;}
a.gallery:hover img {border:0px solid #000000;}
a.gallery:hover span {display:inherit; position:absolute; width:402px;
height:288px; top:5px; left:2px; padding:5px;}
#scrollbox {width:415px; height:80px; background:#f4f4f4; overflow:auto;
border:1px solid #aaaaaa;}
#thumbs {width:1000px; height:60px;}
</style>
<body>
<div class="info">
<div class="slidek">
<img src="bilder.jpg" alt="Camera" title="Camera" width="415" height="300"
/>
</div>
<div id="scrollbox">
<div id="thumbs">
<a class="gallery slidea" href="#nogo"><span><img src="pic/fullsize1.jpg"
width="402" height="288"/><br />
<br /></span></a>
<a class="gallery slideb" href="#nogo"><span><img src="pic/fullsize2.jpg"
width="402" height="288"/><br />
<br /></span></a>
<a class="gallery slidec" href="#nogo"><span><img src="pic/fullsize3.jpg"
width="402" height="288" /><br />
<br /></span></a>
<a class="gallery slided" href="#nogo"><span><img src="pic/fullsize4.jpg"
width="402" height="288" /><br />
<br /></span></a>
</div>
</div>
</div>
</body>
</html>
Navigation:
[Reply to this message]
|