Image Enlargen onMouseover In Table

[nasim.]

Hey there,

For a while now, I've been struggling with some CSS code I got off this site. The code works great, but once I apply it to a table I start to get problems.

I have a very large list of resource materials (mainly books) that I have in a table. What I want to do is make it so when you hover over any of them, a little info box pops up next to it, providing information on it.

I've been testing it in this simplified code:



<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
position: relative;
}


.thumbnail span{ /*CSS for enlarged image*/
position: relative;
visibility: hidden;
color: black;
text-decoration: none;
}

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

</style>

<div class="gallerycontainer">
<table width="100%" border="0" cellpadding="00" cellspacing="0">

<tr>
<td><a class="thumbnail" href="#thumb">Blah Blah<span>Auto indented due to "Blah Blah" title.<br />Additional lines will create more rows in table. </span></a></td>
</tr>

<tr>
<td><a class="thumbnail" href="#thumb">Blah Blah Blah<span>the next one.<br />SECOND LINE!</span></a></td>
</tr>
</table>
</div>

My problem is that I have to make the position relative. I have to do this since the list is long and you have to scroll down. When the position is relative the table entries are stretched out in height to the size of the pop up, since it's acting from within the table. With the size of the pop ups, it makes my table look real awkward. How can I keep my table looking normal and get a pop up to open positioned relative to its table entry? Thanks!

[auntnini]

Will this Eric Meyers on CSS help explain the basics http://meyerweb.com/eric/css/edge/popups/demo.html

As far as I can figure it: position: ABSOLUTE is taken out of normal HTML flow of document (you can give it Z-index to show on top of other elements) and it can be positioned relative to its "positioned ancestor" so you can position: RELATIVE for instance the link <a>

I've used this relative/absolute relationship at http://www.chanit.com/gallery/floral.htm http://www.auntnini.com (the link hover pop-up notation) http://artdemo.tripod.com/illustration/indexCSS.html

Since position:ABSOLUTE is taken out of normal HTML flow, I don't understand how that would impact <TABLE> cells. Nor why CSS rule for an element such as <a> position:relative would affect cell size ????

[nasim.]

Would it be possible for me to see the style sheet for the 'http://www.chanit.com/gallery/floral.htm' page? That's pretty much what I need my page to do, but from inside a table.

My problem, as I understand it, is that because I want the box to pop up beside each one of my table entries I have to make the position relative. Making it relative means the box acts relative from the link, which is inside the table, so naturally, the box appears inside the table as well. I was hoping there was a way I could force the cell height in my table or to force it to project the image outside the table, but to still appear from hovering over the table entry.

[auntnini]

This is a mess! I accidentally deleted my original CSS and mashed this together. Don't remember what I did or why I did it. I like to use a:hover pseudo class so IE will honor :hover.

The main thing, as I understand it, is you should make the HOVER/SPAN position:ABSOLUTE and give it a z-index:200 or such. The content in the cell, say a link <a href="#nogo">description</a> has position:RELATIVE.

I saw some other recent posts here discussing the same issue. Can you post a link to your page in question so someone else can give you suggestions. Good luck!



/* special HOVER/SPAN 2-column layout & DL */
a span { display: none; }
a:hover span { display: block; position: absolute; top: -400px; z-index: 100; text-align: center; font: 1.5em/1.25em Georgia, "Times New Roman", Times, serif; color:#006666; background: #fff; padding: 200px; margin: 100px; }
#colLeft a { position:relative; display:block; } #colLeft a:hover span { left: 100px; }
#colRight a { position:relative; display:block; } #colRight a:hover span { right: 100px; }
#colLeft { background:transparent; width:35%; height:auto; margin:2px;
font: Verdana, Arial, Helvetica, sans-serif; font-size:.85em; text-align: left;
padding: 0; border: 0; position: relative; float:left; display: inline; overflow: visible; }
#colRight { /*fix IE doubling flost-side margin with display:INLINE; */
background: transparent; width: 35%; height: auto; margin: 2px;
font: Verdana, Arial, Helvetica, sans-serif; font-size:.85em; text-align: right;
padding: 0; border: 0; position: relative; float:right; display: inline; overflow: visible; }
#colLeft dl { margin: 5px; padding: 5px; text-align: left; float: left; width: 85%; overflow: visible; }
#colLeft dt { float: right; width: 10em; margin: 0; padding: 0; font-size: 1em; line-height: .5em; text-align: left; color: #00FFFF; }
#colLeft dd.thumb img { float: left; margin: 10px 5px 2em 5px; padding: 20px; background: #fff; width: 50px; height:75px; display: block; }
#colLeft dd.text { margin: 5px; padding: 10px; text-align: left; float: left;
width: 45%;} /*#colLeft dd.pix img { float: left; margin: 10px; padding: 5px; background: #fff; }*/
#colRight dl { margin: 5px; padding: 5px; text-align: left; float: right;
width: 85%; overflow: visible; }
#colRight dt { float: left; width: 10em; margin: 0; padding: 0; font-size: 1em; line-height: .5em; text-align: right; color: #00FFFF; }
#colRight dd.thumb img { float: right; margin: 10px 5px 2em 5px; padding: 20px; background: #fff; width: 50px; height:75px; display: block; }
#colRight dd.text { margin: 5px; padding: 10px; text-align: left; float: left;
width: 45%; }
/*#colRight dd.pix img { float: right; margin: 10px; padding: 5px; background: #fff; }*/
/* fix IE hacks */
/*dl { margin: 5px 0; padding: 5px; width: 95%; }*/
dl:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; } /*clear float*/
dl { display: inline-table; } /*inline-table for IE/Mac*/
/* include \ to hide from IE5/Mac \*/
* html dl { height: 1%; } /*for IE/Win*/
dl { display: block; } /*for other browsers & end hide from IE/Mac*/

[auntnini]

See DynamicDrive CSS Image Gallery http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/#thumb.
or code I used at http://artdemo.tripod.com/illustration/indexCSS.html#top



.thumbnail span{ /*CSS for enlarged image*/
position: absolute; ... }

[nasim.]

Wow, I can't really follow the above code, but thanks. I'm just trying to sort this issue out for a page I have to soon make. I illustrated the issue very simply in the example I left in my first post. If the position is made absolute, then when people scroll down the list and hover over a link, the box will appear at the top of the page, and they won't be able to see it. The only problem I'm having with this, is the fact that my links are inside a table and every positioning option seems to mess up the height of my cells or place the box out of view.
I need position relative, but without changing the height of my cells. How do I have the enlarged image appear outside of my table but relative to words inside the table?

[auntnini]

I decided to try this out in a <TABLE> format at http://artdemo.tripod.com/sketch/tableTestCSS.html


<style type="text/css">
td a { position: relative; display: block; line-height: 1.5em; background-color:#993399; font: 1em/2 italic Verdana, Arial, Helvetica, sans-serif; text-align: center; }
td a span {display: none; }
td a:hover span { display: block; position: absolute; top: 0; left: 20em; float: right; width: 50px; height: 75px; padding: 0 2px; margin: 0 2px; z-index: 200; }
</style>

The <td><a><span> in the individual cells link to large images of different sizes. When the <TABLE> width was set to 90%, it jumped around. When set to specific width (600PX), it did not jump around. Depending on your page layout, hover/span image sizes, etc., you might get better results with the whole <TABLE> (instead of the individual <a> links) as your position:RELATIVE reference point.

For instance, the DynamicDrive CSS Image Gallery http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/#thumb used the "container area" as their reference. I left the code used at http://artdemo.tripod.com/illustration/indexCSS.html in my table example so you could compare them. DD used VISIBILITY: visible / hidden, while I used DISPLAY: block / none.

Using the individual <a> links as a reference point made sense for pop-up annotations to the navigation buttons at http://www.auntnini.com.

In either case, you'll have to fuss around with the margin settings for the hover/span pop-up images. But the main point with all of this hover/span stuff is that the SPAN has to be position:ABSOLUTE.

I hope this helps, but there are far better people than I at DD so (if in fact you are using the DD CSS Image Gallery script) you might want to put another inquiry under the "Dynamic Drive scripts help" category.