Re: FN-FORUM: Larger Image Pop UP - Mouse over

date posted 18th April 2008 13:34

On 18 Apr 2008, at 14:14, PuntersPower wrote:

>
> I like that Ian, althought the positioning is not exact.
>
> Are you using just the one image for that?
>
> Andrew
>

Yes, for each pop-up there is one image (in the example below,
cs5.jpg, 300px x 424px) that loads when the page loads and is
initially displayed just as a thumbnail (35px x 49px). On hover it
shows the full sized version.

The downside of this is that all of the images have to load as full-
sized when the page loads - a bit of a performance hit. The benefit
is that there is no delay in showing the image on hover.

Here is a typical bit of html:

Blue Boar Contracts bring top West Country tourist
attraction back to perfect conditiondownload case study (PDF)


Here is the css for hoverpic_cs5:

/* here are the thumbnails */
.hoverpic_cs5 a img,
.hoverpic_cs4 a img,
.hoverpic_cs3 a img,
.hoverpic_cs2 a img,
.hoverpic_cs1 a img {
border: 0;
position: static;
width: 35px;
height: 49px;
left: 5px;
}

/* here are the bigger pop-ups */
.hoverpic_cs5 a:hover img, .hoverpic_cs5 a:active img, .hoverpic_cs5
a:focus img,
.hoverpic_cs4 a:hover img, .hoverpic_cs4 a:active img, .hoverpic_cs4
a:focus img,
.hoverpic_cs3 a:hover img, .hoverpic_cs3 a:active img, .hoverpic_cs3
a:focus img,
.hoverpic_cs2 a:hover img, .hoverpic_cs2 a:active img, .hoverpic_cs2
a:focus img,
.hoverpic_cs1 a:hover img, .hoverpic_cs1 a:active img, .hoverpic_cs1
a:focus img {
width: 300px;
height: 424px;
left: 0;
position: relative;
z-index: 1;
background-color: #ffffff;
padding: 3px;
border: 1px solid #000000;
}

/* and here is the vertical positioning for just this pop-up */
/* Case study 5 specific settings */
.hoverpic_cs5 a:hover img, .hoverpic_cs5 a:active img, .hoverpic_cs5
a:focus img {
top: -100px;
}

There are five style sets, one for each image, because the client
wanted the pop-ups to load in slightly different positions.

Anyway, feel free to have a closer look at the CSS - there is a
little bit more to it but what you see here is the fundamental method.


Ian.
--