This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > July 2007 > Problem With Image Gallery and CSS mouse over
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
Problem With Image Gallery and CSS mouse over
|
|
| mark.it.here@gmail.com 2007-07-18, 6:18 pm |
| Hi,
I'm putting together a dynamic image gallery that works like this:
1. Places the thumbnail;
2. Places a "zoom" button over the thumbnail;
3. Reveals large picture upon mouse over the "zoom" button.
It's working ok but it has two problems:
1. The enlarged picture is shown below the zoom buttons (i want it
over);
2. Doesn't work at all in IE5.
Any ideas why this happens? I've already tried z-index... didn't work.
I show below the code I use for you te get a notion of the problem.
You can try it locally to see what happens (it has absolute urls in
images). Thanks.
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
<!--
body {
color: #000000;
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-size: 10pt;
margin: 0px;
padding: 0px;
}
/* - x - x - x - x - x - x - x - x - x - */
/* OVER POPUP */
/* - x - x - x - x - x - x - x - x - x - */
..popup {
position: absolute;
z-index: 0;
float: left;
top: 0px;
left: 0px;
}
..popup:hover {
background-color: transparent;
z-index: 50;
}
..popup span{ /* CSS for popup */
position: absolute;
padding: 0px;
left: -4000px;
border: 1px solid #000000;
visibility: hidden;
background-color: #ffffff;
}
..popup span img{ /* CSS for enlarged image */
border-width: 0px;
}
..popup:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 30;
left: 5px;
}
..popthumb {
float: right;
position: relative;
}
..poptrigger {
float: left;
position: relative;
top: 0px;
left: 0px;
z-index: 100;
}
-->
</style>
</head>
<body>
<div style="padding-bottom: 8px;">
<table><tr>
<td>
<div class="popthumb">
<img src="http://assineja.edimpresa.pt/sroot/revistas/images/
fhm_260.jpg" height="260" class="magazine" alt=" FHM " />
</div>
<div class="poptrigger">
<a href="java script:void(0);" class="popup">
<img src="http://assineja.edimpresa.pt/sroot/site24/_images/
grl_button_zoom.gif" width="35" height="17" border="0" alt=" Zoom "
style="position: relative; left: 5px; top: 5px;" />
<span>
<img src="http://assineja.edimpresa.pt/sroot/revistas/images/
fhm_550.jpg" height="550" alt="" />
</span>
</a>
</div>
</td>
<td style="padding-left: 11px;">
<table>
<tr>
<td style="padding: 0px;">
<div class="popthumb">
<img src="http://assineja.edimpresa.pt/sroot/revistas/images/
fhm_id01_120.jpg" height="120" class="magazine" alt=" Pagina da FHM
" />
</div>
<div class="poptrigger">
<a href="java script:void(0);" class="popup">
<img src="http://assineja.edimpresa.pt/sroot/site24/_images/
grl_button_zoom.gif" width="35" height="17" border="0" alt=" Zoom "
style="position: relative; left: 5px; top: 5px;" />
<span>
<img src="http://assineja.edimpresa.pt/sroot/revistas/images/
fhm_id01_550.jpg" height="550" alt="" />
</span>
</a>
</div>
</td>
<td style="padding: 0px 0px 0px 11px;">
<div class="popthumb"">
<img src="http://assineja.edimpresa.pt/sroot/revistas/images/
fhm_id02_120.jpg" height="120" class="magazine" alt=" Pagina da FHM " /
>
</div>
<div class="poptrigger">
<a href="java script:void(0);" class="popup">
<img src="http://assineja.edimpresa.pt/sroot/site24/_images/
grl_button_zoom.gif" width="35" height="17" border="0" alt=" Zoom "
style="position: relative; left: 5px; top: 5px;" />
<span>
<img src="http://assineja.edimpresa.pt/sroot/revistas/images/
fhm_id02_550.jpg" height="550" alt="" />
</span>
</a>
</div>
</td>
</tr><tr>
<td style="padding: 19px 0px 0px 0px;">
<div class="popthumb">
<img src="http://assineja.edimpresa.pt/sroot/revistas/images/
fhm_id03_120.jpg" height="120" class="magazine" alt=" Pagina da FHM " /
>
</div>
<div class="poptrigger">
<a href="java script:void(0);" class="popup">
<img src="http://assineja.edimpresa.pt/sroot/site24/_images/
grl_button_zoom.gif" width="35" height="17" border="0" alt=" Zoom "
style="position: relative; left: 5px; top: 5px;" />
<span>
<img src="http://assineja.edimpresa.pt/sroot/revistas/images/
fhm_id03_550.jpg" height="550" alt="" />
</span>
</a>
</div>
</td>
<td style="padding: 19px 0px 0px 11px;">
<div class="popthumb">
<img src="http://assineja.edimpresa.pt/sroot/revistas/images/
fhm_id04_120.jpg" height="120" class="magazine" alt=" Pagina da FHM
" />
</div>
<div class="poptrigger">
<a href="java script:void(0);" class="popup">
<img src="http://assineja.edimpresa.pt/sroot/site24/_images/
grl_button_zoom.gif" width="35" height="17" border="0" alt=" Zoom "
style="position: relative; left: 5px; top: 5px;" />
<span>
<img src="http://assineja.edimpresa.pt/sroot/revistas/images/
fhm_id04_550.jpg" height="550" alt="" />
</span>
</a>
</div>
</td>
</tr>
</table>
</td>
</tr></table>
</div>
</body>
</html>
| |
| Jukka K. Korpela 2007-07-18, 6:18 pm |
| Scripsit mark.it.here@XXXXXXXXXX:
> I'm putting together a dynamic image gallery that works like this:
>
> 1. Places the thumbnail;
> 2. Places a "zoom" button over the thumbnail;
> 3. Reveals large picture upon mouse over the "zoom" button.
The usual robust technique is to make thumbnails links. Have you already
done this part of the job, to be used as backup if not otherwise? If not, do
it. Then post the URL.
> It's working ok
Hardly.
> <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Why do you invoke Quirks Mode?
> font-size: 10pt;
Misguided novice alert!
> <a href="java script:void(0);" class="popup">
Bosogity alert!
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|