Viewing Thread:
"Help with an image rollover"

Back in the day, I used to be really good at this, but I haven't made a site in ages and have forgotten my JavaScript.

So my questin is "How do i do it?" and this is what I want to do:

I have a table 5 cells wide and 1 cell high. Each cell uses the same image as its background. I want that image to change on mouse over, then return to the original image on mouse out. The same mouse over image will be used for each cell, so only two images need to be pre-loaded.

Remember that these images are table cell backgrounds.

Ta very much. :)

Ta very much. Works now.

I haven't written a website in ages and I think I was using redundant code.

From what i remember, horizontal alignment is declared using left, center or right, while vertical alignment is done using top, middle or bottom.

That was back when I used IE though. *shudder*

Try changing the keyword middle to center in your CSS background declarations. I'm pretty sure middle isn't an officially recognised keyword for the background property, and if an unrecognised keyword is present, the whole declaration is ignored.

*sigh*

Done, what's it's problem now? It's just really hacking me off.

This is my code now, and all it does is change the text colour as intended, not the background which I really want:

<style type="text/css">
<!--

body {
font-family: "Arial";
}

tr#links td {
background: #181818 url(links_background.png) middle center repeat-x;
color: #e0e0e0;
}

tr#links td:hover {
background: #c00000 url(links_hover.png) middle center repeat-x;
color: #000000;
}

-->
</style>

and further down:

<table width="800" height="40" bgcolor="#000000" background="links_background.png" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr id="links">

<td width="160" align="center">
Test Link
</td>

<td width="160" align="center">
Test Link
</td>

<td width="160" align="center">
Test Link
</td>

<td width="160" align="center">
Test Link
</td>

<td width="160" align="center">
Test Link
</td>

</tr>

</tbody>

</table>

If you retry the link, is that what you're after?

That is achieved by making use of an id (you could use a class instead) for the <table>'s row (<tr>) in the HTML and CSS code.

Yes, that's what I want. In fact, that's perfect, but won't that affect every single table in the page? I only need it for one row of links at the top.

Twain wrote
"Remember that these images are table cell backgrounds."

Is this what you're after? If so, you can set a <td> cell background using CSS, and then using the CSS td:hover to change it when the cell is moused over.

The only trouble is I'm pretty sure IE 6 doesn't support :hover on non-hyperlink elements.

Have you set the :link and :visited selectors? You will need all four set in the correct order. For example:


.example {
font: bold 12px serif;
}
a.example, a.example:link, a.example:visited {
background-color: #000080;
}
a.example:hover, a.example:active {
background-color: #B41B5C;
}


I am familiar with CSS, yes. I have tried copying and pasting the CSS from Freeola's source and editing it to make it work with my own site, but I still can't get it to work and am not sure what i did wrong.

Here is the Freeola version:
a.topbuttons-unselected:hover, a.topbuttons-unselected:active { font: bold 12px arial; text-decoration: none; text-align: center; color: white; background: orange url(http://images.freeola.co.uk/pagestructure/tab-lit2.gif) bottom; background-repeat: repeat-x; padding: 9px; padding-top: 6px; padding-bottom: 5px; display: inline-block; } .topbuttons-unselected-gad { font: bold 12px arial; text-decoration: none; text-align: center; color: black; background: url(http://images.freeola.co.uk/pagestructure/tab2.gif) bottom; border: 1px solid #999999; background-repeat: repeat-x; padding: 9px; padding-top: 6px; padding-bottom: 5px; margin-bottom: 2px; display: inline-block; }

And this is mine:
.links { text-decoration: none; text-align: center; color: #e0e0e0; background: url(links_background.png) middle; background-repeat: repeat-x; padding: 0px; display: inline-block; }
a.links:hover, a.links:active { text-decoration: none; text-align: center; color: black; background: #e00000 url(links_hover.png) middle; background-repeat: repeat-x; padding: 0px; display: inline-block; }

Hmm, I'm not sure how you'd get that to work with cell backgrounds.

As I don't know Javascript, the easiest way for me would be to do a CSS mouseover. I'd have the background image set in a Psuedo Class which would applied to an element within each of the five cells (be it a text link, or an image). Then it's easy to assign a different background when the element is active or a mouseover activates the 'hover' selector. That's the way the Freeola menu buttons are created.

Are you familiar with CSS?

Back in the day, I used to be really good at this, but I haven't made a site in ages and have forgotten my JavaScript.

So my questin is "How do i do it?" and this is what I want to do:

I have a table 5 cells wide and 1 cell high. Each cell uses the same image as its background. I want that image to change on mouse over, then return to the original image on mouse out. The same mouse over image will be used for each cell, so only two images need to be pre-loaded.

Remember that these images are table cell backgrounds.

Ta very much. :)