Linking Table Cells (With Different Background Images)

[Demiscient]

This sounds a lot more complicated than it is, so I'm going to make reference to a diagram to make it easier to get: Okay so I want to have a different image in every one of the table cells (4 different images). I want to use it as my site menu, so I want those images to link places. Only thing is that the images all have very different color schemes in them so I the images will be greyscale when you look at them but when the mouse hovers over them, they change into the original colors. I should really know how to do this but I don't, so I need someone's help! Can I do this using tables or do I have to do it some other way?

[Drycodez]

Goto: www.w3schools.com/css/css_image_sprites.asp

[Demiscient]

Alright I've given that a shot but I can't seem to put two pictures at the top and two at the bottom, they all line up on one line.

[Drycodez]

Create one pix, with two logos (coloured and gray) for the 1st column and do the rest the same way.

[Demiscient]

Welp nevermind I was styling it wrong. Thanks for the help!

[dsonesuk]

Just use a anchor element and convert to a block element, and set the height so only the grey scale image shows. Now assuming you have the greyscale above the coloured combined into one image to create a sprite (1 x grayscale, 1 coloured both 100px width and height combined into 200px height , 100px wide sprite image). it would like this

 <table id="mytable"><tr><td><a href="#" id="image_1" class="sprite"></a></td><td><a href="#" id="image_2" class="sprite"></a></td><tr><tr><td><a href="#" id="image_3" class="sprite"></a></td><td><a href="#" id="image_4" class="sprite"></a></td><tr></table> 

using css style similar to below

#mytable a.sprite {background-position: left top; background-repeat: no-repeat; height: 100px; width:100px; display:block;}a#image_1 {background:url(image1.jpg);}a#image_2 {background:url(image2.jpg);}a#image_3 {background:url(image3.jpg);}a#image_4 {background:url(image4.jpg);}#mytable a.sprite:hover {background-position: left bottom;}