CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-tablehover
user686605
user686605

Reputation:

Display image in td on hover

Here is what I am trying to achieve (not sure if it's even possible):

Hover the mouse over a td, and in the bottom right corner of that td (perhaps overlapping the cell border), show a small image.

I'm okay with jQuery, so I can handle the hovering, but the CSS kills me. How do I position the image? Would I have the image in every cell, and only show it on hover? Or is there a better way?

I'm on IE7. I appreciate any guidance.

Upvotes: 0

Views: 5082

Answers (3)

Peter Nixey
Peter Nixey

Reputation: 16565

To avoid putting an image into every single td in the page you could also use a background image:

td{
  background-image: url('/yourImage.png');
  background-position: -2000px -2000px;
}

td:hover{
  background-position: right bottom;
}

The reasoning for using the initial offset is that it makes sure that the image is pre-loaded with the page and so there's no lag during the first mouseover.

Browser support issues

I'm not sure how well supported the positioning directions are for different browsers and you may also want to check out this article to make sure that the :hover pseudo class works correctly for your target browsers. IE7+ will support the :hover pseudo class but they need the correct doctype (and a good prevailing wind) http://www.bernzilla.com/item.php?id=762

Using jQuery instead

If you don't want to use :hover you can stick to jquery to add and remove a class. The equivalent CSS for that would be:

td{
  background-image: url('/yourImage.png');
  background-position: -2000px -2000px;
}

td.hoverclass{
  background-position: right bottom;
}

where ".hoverclass" is the classname that you add to the td during the mouseover period.

Upvotes: 3

Jared
Jared

Reputation: 4615

To do the positioning, what you want to use is absolute positioning. The CSS would be:

#id-of-td {
    position: relative;
}

#id-of-image {
    position: absolute;
    right: 0;
    bottom: 0;
}

The HTML should be similar to:

<td id="id-of-td">
    <img id="id-of-image" src="path/to/image" />
</td>

Upvotes: 1

TJHeuvel
TJHeuvel

Reputation: 12608

Something along the lines of this will show and hide images in a td.

td img
{
 display:none;
}

td:hover img
{
 display:block;
}

Upvotes: 1

Related Questions