PDA

Click to See Complete Forum and Search --> : css pop up image viewer

bulletuk
12-30-2007, 05:30 PM
been using css in the header of my html website file to make an image of a file appear larger when the user hovers their mouse over the thumbnail. everything works fine except once the image appears it appears behind the thumbnails.!!!! ive tried changing the z index of the thumbnails on the actual page and changing the z index in the css script in the header but it still isn't working.

i have the thumbnails in layers as the whole of the page was made in photoshop and put into a table and then to allow absolute positioning to occur without problems i put the table into two div tags(layers) i don't know if it is because i have done it like this that it is not working... i would be be very grateful if anyone could help me with this. i have posted the script for the css and correspnding html below.
bulletuk
12-30-2007, 05:31 PM
CSS

}


.thumbnail{
position: relative;
z-index: 2;
}

.thumbnail:hover{
background-color: transparent;
z-index: 2;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}
#Layer2 {
position:absolute;
left:109px;
top:522px;
width:104px;
height:110px;
z-index:2;
}
#Layer3 {
position:absolute;
left:276px;
top:527px;
width:157px;
height:119px;
z-index:3;
}
#Layer4 {
position:absolute;
left:145px;
top:657px;
width:91px;
height:119px;
z-index:4;
}
#Layer5 {
position:absolute;
left:459px;
top:525px;
width:174px;
height:120px;
z-index:23;
}
#Layer6 {
position:absolute;
left:276px;
top:657px;
width:155px;
height:112px;
z-index:24;
}
#Layer7 {
position:absolute;
left:459px;
top:657px;
width:155px;
height:126px;
z-index:25;
}
#Layer8 {
position:absolute;
left:109px;
top:792px;
width:155px;
height:89px;
z-index:31;
}
#Layer9 {
position:absolute;
left:289px;
top:792px;
width:170px;
height:120px;
z-index:32;
}
#Layer10 {
position:absolute;
left:459px;
top:792px;
width:164px;
height:122px;
z-index:33;
}
#Layer11 {
position:absolute;
left:149px;
top:927px;
width:84px;
height:102px;
z-index:34;
}
#Layer12 {
position:absolute;
left:334px;
top:927px;
width:170px;
height:107px;
z-index:35;
}
bulletuk
12-30-2007, 05:33 PM
HTML


<body onload="MM_preloadImages('Images Set/images-about-selected.jpg','Images Set/images-portfolio-selected.jpg','Images Set/images-home-selected.jpg','Images Set/images-contact-selected.jpg','Images Set/images-image-selected.jpg')">




<div style="width:100%"> <!-- create container div -->
<div style="position:relative; width:1000px; margin:0 auto;"> <!-- center inner div within the container div -->

<div id="Layer2"><a class="thumbnail" href="#thumb"><img src= "Images4imagepage/Thumbnails/Boxing-punching-bag.jpg" alt="Punching Bag" width="155" height="120" border="0" /><span><img src="Images4imagepage/Normal/Boxing-punching-bag.jpg" width="700px" height="543px" /></span></a></div>

<div id="Layer3"><a class="thumbnail" href="#thumb"><img src= "Images4imagepage/Thumbnails/Boxing-Ring.jpg" alt="Boxing Ring" width="170" height="120" border="0" /><span><img src="Images4imagepage/Normal/Boxing-Ring.jpg" width="700px" height="494px" /></span></a></div>

<div id="Layer4"><a class="thumbnail" href="#thumb"><img src="Images4imagepage/Thumbnails/City-Life.jpg" alt="City Life Illustration" width="84" height="120" border="0" /><span><img src="Images4imagepage/Normal/City-Life.jpg" width="843px" height="1200px" /></span></a></div>

<div id="Layer5"><a class="thumbnail" href="#thumb"><img src="Images4imagepage/Thumbnails/Opposites.jpg" alt="Surreal Opposites" width="170" height="120" border="0" /><span><img src="Images4imagepage/Normal/Opposites.jpg" width="700px" height="494px" /></span></a></div>

<div id="Layer6"><a class="thumbnail" href="#thumb"><img src="Images4imagepage/Thumbnails/Slavery-8-.jpg" alt="Slavery" width="170" height="120" border="0" /><span><img src="Images4imagepage/Normal/Slavery-8-.jpg" width="700px" height="495px" /></span></a></div>

<div id="Layer7"><a class="thumbnail" href="#thumb"><img src="Images4imagepage/Thumbnails/Slavery-Image-4.jpg" alt="Slavery Picture" width="167" height="120" border="0" /><span><img src="Images4imagepage/Normal/Slavery-Image-4.jpg" width="700px" height="503px"/></span></a></div>

<div id="Layer8"><a class="thumbnail" href="#thumb"><img src="Images4imagepage/Thumbnails/Slavery-Image-7.jpg" alt="Slavery Image" width="155" height="120" border="0" /><span><img src="Images4imagepage/Normal/Slavery-Image-7.jpg" width="700px" height="495px"/></span></a></div>
<div id="Layer9"><a class="thumbnail" href="#thumb"><img src= "Images4imagepage/Thumbnails/Slavery-Picture-2.jpg" alt="Slavery Image " width="168" height="120" border="0" /><span><img src="Images4imagepage/Normal/Slavery-Picture-2.jpg" width="700px" height="501px"/></span></a></div>

<div id="Layer10"><a class="thumbnail" href="#thumb"><img src="Images4imagepage/Thumbnails/Slavery-Picture-10.jpg" alt="Slavery Image" width="170" height="120" border="0" /><span><img src= "Images4imagepage/Normal/Slavery-Picture-10.jpg" width="700px" height="495px"/></span></a></div>

<div id="Layer11"><a class="thumbnail" href="#thumb"><img src="Images4imagepage/Thumbnails/wallpapeer.jpg" alt="Slavery image" width="84" height="120" border="0" /><span><img src= "Images4imagepage/Normal/wallpapeer.jpg" width="396px" height="569px"/></span></a></div>

<div id="Layer12"><a class="thumbnail" href="#thumb"><img src="Images4imagepage/Thumbnails/city-life-collage.jpg" alt="City Life Collage" width="261" height="120" border="0" /><span><img src= "Images4imagepage/Normal/city-life-collage.jpg" width="870px" height="400px"/></span></a> </div>

<table width="200" border="0" align="center">
<tr>
<th scope="row"><img src="Images Set/Images-final.jpg" alt="Images Page" name="Image1" width="1000" height="1100" border="0" usemap="#Map" id="Image1" /></th>
</tr>
</table>

</div> <!-- close div.inner -->
</div> <!-- close div.container -->


sorry i know its alot of code....
THANKyou very much
WebJoel
12-30-2007, 06:28 PM
Probably your 'large images' require a "display:none;" declaration, which when the thumbnails are hovered-over, the image in the "<span>~larger image~</span>" becomes "display:block;", and visible. This is typically how this is done. Some minor positioning might be called for as well.
I started to re-build your code from what you posted and quickly decided it might be easier if this were hosted online somewhere, so I/we/anyone can examine it 'in the live'. Without absolute-path URLs to the images, it's anyone's guess whether changes to your code worked or not..

In order to get the pseudo-class for ":hover" to work for IE, the thumbnail will have to an "a" ("anchor"). This is soley for IE, which fails to use pseudo-class for anything other than anchor..

Also:.thumbnail:hover{
background-color: transparent;
z-index: 2;
} "z-index:foo;" requires the element to be either "position:relative;" or "position:absolute;". The default (when not stated, it is default) "position:static;" will not allow the z-index to function.
bulletuk
12-30-2007, 06:39 PM
okay thankyou

i will try the changing the display function and anchoring the images. i currently dont have it uploaded onto a website i will have it uploaded within the week. i mite jus scrap the css and try having the image display over the webpage. it might be easier as i have issues with positioning of images in correlation to the browser window

thankyou again
WebJoel
12-30-2007, 06:46 PM
Actually, you wouldn't be that far off. By 'minor positioning of the larger image', I mean that via CSS, you might offset the larger images from their parent anchor-images, with one small line of code.

Basically, if the small image is "position:relative;" and the '<span>larger image</span>' is absolute, you might position them ALL, with one line like "top:5px;, left:100px;" in your CSS, which this will affect ALL the pop-over images. -Very sleek, this method of revealing larger-on-hover.

Since the site in not online, -can you ZIP al the files & images and attach to the post? I think this could be re-done, easily.
I'd get rid of the DW bloat of a DIV-layer for every image instance, and do either a series of anchor, a UL or defintion list at least, and reduce the code & complexity of this fifty-fold. This is really not as complex as it first appears.. :)
bulletuk
12-30-2007, 07:32 PM
okay thankyou

i was just in the process of removing the css, but i will put it back in. sorry about the newbie errors.

ok i was in the process of putting the css back in from the file where i saved it and it is now not working at all il just fix it then send it shud take a few minutes thanks for ur help also the zip file will be about 7.5 megs big
Centauri
12-30-2007, 07:34 PM
The tables and all that absolute positioning are not required. Have a look at some of the galleries on Stu Nicholls' site (http://www.cssplay.co.uk/menu/).
bulletuk
12-30-2007, 08:03 PM
here it is, i have put the css for the hover image on there the page with css image pop ups is the image page. because i saved the css script in a separate file just incase i needed to copy and paste and use it again when i put it back into the html of the image page it is acting a bit dodgy with the actual positioning once loaded in a browser please excuse, jus wanting to sort out the main problem as soon as possible

thankyou very much again! :)

i have just noticed the maximum upload size is 100kb because my website is soo big i have uploaded it oonto my google webpage thing the link is:

http://bulletuk.googlepages.com/Onlineportfolio.zip

cheers
bulletuk
12-30-2007, 08:06 PM
the table is for my actual webpage that i made in photoshop it is put into layers then a table and centred

the thumbnails of the images are put in separate layers on top of the webpage

i have used absolute positioning because i have put the "main page" in two divs to make the browser measure the absolute positioning from the div and because it is easier :)

cheers
Centauri
12-30-2007, 09:00 PM
Not to sound too discouraging here, but, although the site looks good, there are so many problems associated with the way you have implemented it, you really need to rethink the whole thing.....

Starting with the issue at hand, as each thumbnail and associated larger image is absolutely positioned, each has its own stacking order, and thumbnails listed later in the html will be rendered above elements declared earlier - the problem is caused by the absolute positioning of the thumbnails.

The next issue is size - there is not enough space available to do what you want. The thumbnails themselves take up too much room (and they are overlapping content anyway), and there is no designated area for the larger image to appear. At the moment, depending on screen size, the larger images go off the edge of the page and invoke the horizontal scollbar - but any attempt to access the scrollbar to scoll across to see the image results in both the image and the scrollbar dissappearing, making viewing the images impossible. Smaller thumbnails would help, but there is still not enough room to display the larger images, and this is due to the next point....

Although it looks nice, making a site with just one image in a table is the wrong way to do it. There is no actual CONTENT in the site at all, which means search engines have nothing to index on, people who need to use assistive technologies (screen readers etc) cannot read about you, and people who browse the web with images turned off (due to slow internet connections or personal preference) will see absolutely nothing on your site. Another major issue is the one of space as mentioned above - the site cannot expand to cater for additional content. Even if you did manage to fit smaller thumbnails and images in there now, you would still have the problem of no more room if you decided to add more. Any time you wanted to make a small adjustment to the site, even just to correct a spelling error or update some info, you need to recreate 6 entire site graphics for every page !!!..

This can all be fixed, but a lot more emphasis needs to be placed on the content and meaning (and purpose) of the site before restarting..
bulletuk
12-30-2007, 09:39 PM
thank you for you're critical appraisal, i do know that i have completely put accessibility aside when creating this website which is not very good at all, and i was debating whether to have the text written in html but i decided to do it in illustrator as i felt the fonts were more attractive... it wud not take to long to change it as i stil have the basic blank pages but i really just want to use this for a limited time, it is only for an industrial placement.


i will try fix the images first then move onto fixing other issues :)

cheers
WebJoel
12-31-2007, 08:40 AM
I'm away from the pc today and probably tomorrow too, but will re-visit this one. :)