Thread: Custom CSS for RSS feeds
View Single Post
hintofsilence
Guest
2009-03-30, 11:51 AM
Quote:
Originally Posted by narmada View Post
How to hover over an HTML table cell and have it pop up an image (larger than the cell) using only CSS ? I know there must be a way to do this. Basically I have an empty table cell (though I can put text or a blank image or something in it), and when the user hovers over it, I want an image to pop up over the cell (and nearby cells if it's larger than the cell size). So the top left of the image will appear to be in the top left of the table cell and the overflow will cover cells to the right and below as appropriate.
narmada,

I don't know if you've already found a solution for this, but it's actually quite simple and fairly logical. CSS allows a TON of flexibility on this. Here's how you can "skin" table cells and add a hover state at the same time.

Code:
table#TableName {
    width: 600px;
    height: 600px;
}

td.cell1 {
    width: 150px;
    height: 40px;
    font-size: 12px;
    color: #000;
}

td.cell1 a {
    color: #000;
    text-decoration: none;
}

td.cell1 a:hover {
    color: #333;
}

td.cell1 a span {
    display: none;
}

td.cell1 a:hover span {
    /*background-image: url(images/YourImage.jpg) no-repeat;*/
    width: 200px;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}
So then the HTML generating the table would look something like this...

Code:
<table id="TableName" cellspacing="0" cellpadding="0"><!--Spacing, positioning, padding and colors can all be defined in the CSS, so it's unnecessary to do it here, too-->
    <tr>
        <td class="cell1" valign="top"><a href="">Your Cell Data Here<span>Details to appear in the hover state.</span></a></td>
        <td class="cell1" valign="top"><a href="">Your Cell Data Here<span>Details to appear in the hover state.</span></a></td>
        <td class="cell1" valign="top"><a href="">Your Cell Data Here<span>Details to appear in the hover state.</span></a></td>
    </tr>
</table>
So the normal "a span" we want to be invisible, unless someone is actively hovering over the cell data within the table. The "a:hover span" is where the actual floating image/text box is going to appear, and what CSS rules it should obey. I hope this at least gets the ball rolling for you. I've used this method many times, and it's very effective.
Post 3