Changing many/multiple tables cells background images when mouse pointer is over -CSS

Hello all!
I'm kind of rookie with CSS and this is my first post here.
I just couldn't find ready example anywhere and I don't even know is it even possible to do. I try to change two tables cells background images when mouse pointer is over each of those.

<table width="200" height="100">
<tr>
<td id="cell1" background="cell_bg_mouseout.gif"></td>
<td id="cell2" background="cell_bg_mouseout.gif"></td>
</tr>
</table>

Now question1; Is it possible to change BOTH of those 'cell_bg_mouseout.gif' -bg-images to example 'cell_bg_mouseover.gif' SAME TIME when mouse pointer is over EACH OF those cells?

And question2; Is it possible to make a link of those tables cells with CSS?
(When I click cell -> page changes to something else)

I hope what I wrote makes any sense to you...

-Ville

 

Hey i'm not too sure on how to do this, are you going to have text within these cells, or simply just a background image?
And also you want each of the cells to link to a different page?

 

Yes, there will be text. Links actually. I would like to find a way to change links font style too when mouse pointer is over tables cells. And same page from every link.

 

Flash is not an option in this case.

 

hey do u have css knowledge , then it will be possible, i have css code

 

OK, well you could try this:

This would be the HTML and would go withing the Body of the Document:

<div class="cellwrap">
<div class="cell1"><a href="http://[B]LINKTOSITE[/B].com">[B]TEXT YOU WANT TO BE LINKED HERE[/B]</a></div>
<div class="cell2"><a href="http://[B]LINKTOSITE[/B].com">[B]TEXT YOU WANT TO BE LINKED HERE[/B]</a></div>
</div>

Code (markup):

This is the CSS that would go within your external stylesheet if you have one, or if not then it can go within your HEAD section of the page:

<style type="text/css" media="screen">
.cellwrap { width:800px; background-color:#0099FF; }
.cell1, .cell1 a { 
float: left; 
display:block;
text-decoration: none; 
background-image: url([B]LINK TO IMAGE FOR CELL 1[/B].gif);; /*background image of cell1*/ 
color:#FF00FF;  /*font colour of cell1*/ 
font-size:20px; /*font size of cell1*/ }
.cell2, .cell2 a { 
float: left; 
display:block; 
text-decoration: none;
background-image: url([B]LINK TO IMAGE FOR CELL 2[/B].gif); /*background image of cell2*/ 
color:#FF00FF; /*font colour of cell1*/ 
font-size:20px; /*font size of cell1*/}

/*BELOW WE CHANGE WHAT HAPPENS ON HOVER */

.cell1 a:hover { 
font-weight: bold;  /* makes text bold on hover */
background-image: url([B]LINK TO IMAGE FOR CELL 1 ON HOVER[/B].gif); /*the background image you want on hover*/
color: #FF9900; /*the colour of the text on hover */
text-decoration:underline; /*adds underline on hover */}

.cell2 a:hover { 
font-weight: bold;  /* makes text bold on hover */
background-image: url([B]LINK TO IMAGE FOR CELL 2 ON HOVER[/B].gif); /*the background image you want on hover*/
color: #FF9900; /*the colour of the text on hover */
text-decoration:underline; /*adds underline on hover */}
</style>

Code (markup):

 

Zombay, flash should always be an option. And depending on what you want id suggest rollovers... but im guessing you would of used that if you could. I've never seen BG images changing.. but if it's possible tell adobe to add it to next dreamweaver! would be more useful than rollovers

 

It is possible to have BG images changing astarwebdesigns via CSS, i have explained this in the previous post, whereby you set the background image for the id in question, and then set another background image for the id a:hover so that when the mouse hovers over it the bg image changes.

 

thnx for this suggestion thnx all

 

Thank you wd_2k6 for your answer. However, I don't see how's your code is going to change BOTH bg-images at SAME TIME when mouse pointer is over EACH OF those cells...

That is the trick I try to do and it's quite difficould to explain. Sorry about my poor articulation...

-Ville