Css Help

[Boswell]

Does anyone know how to manipulate images within spliced tables? I need to manipulate them with CSS so that that bottom half of the image is revealed only when it is clicked or hovered over?

<!-- Save for Web Slices (BannerEdit.psd) -->

<table id="Table_01" width="974" height="220" border="0" cellpadding="0" cellspacing="0">

	<tr>

		<td colspan="6">

			<img src="images/SpliceBanner_01.jpg" width="974" height="137" alt=""></td>

	</tr>

	<tr>

		<td rowspan="3">

			<img src="images/SpliceBanner_02.jpg" width="78" height="83" alt=""></td>

		<td rowspan="3">

			<img src="images/Home.gif" width="208" height="83" alt=""></td>

		<td colspan="4">

			<img src="images/SpliceBanner_04.jpg" width="688" height="1" alt=""></td>

	</tr>

	<tr>

		<td rowspan="2">

			<img src="images/Services.gif" width="207" height="82" alt=""></td>

		<td colspan="3">

			<img src="images/SpliceBanner_06.jpg" width="481" height="1" alt=""></td>

	</tr>

	<tr>

		<td>

			<img src="images/Contact.gif" width="205" height="81" alt=""></td>

		<td>

			<img src="images/Gallery.gif" width="198" height="81" alt=""></td>

		<td>

			<img src="images/SpliceBanner_09.jpg" width="78" height="81" alt=""></td>

	</tr>

</table>

<!-- End Save for Web Slices --> 

[Muel]

At a guess you'd need to use jQuery or Javascript to do this, but it'll be made more difficult because you're using a table. Also, have a quick search on "tables for layout", people have written massive articles on why you should avoid them.

If you were using a div based layout, then jQuery has this kind of functionality built in, it would only take a few lines of code.

[JD™]

I'd say "Ew, tables, are we in the 90's again?" except I was still using them up until mid last year... Get rid, use DIVs

[tomturd]

what you want to look into is 'css sprites'.

Basically set the background for one of the cells:

td {

  background: url('path/to/image.png');

   background-position: 0 0;

}[/code]




then you want to shift that image upwards when the cell is being hovered over:



[code]td:hover {

  background-position: -200px 0; /** I can never remember which way these positions work, so play around in firebug until its right **/

}

pretty straight forward. and yeah.. try not to use tables

[Danny]

Rule #1 - Don't use tables for layouts.

Whats the website look like?