mouseover HTML text and image appears

[lstein]

Hi,

I have a huge timeline in HTML with css. I want to mouseover the date and have 1) the link change color - I have this handled with simple css - and 2) an image to appear next to the date. Is there javascript for this? Or do I need to venture into the land of layers? The site is for a university, so I'd like it to be simple and easily accesible.

Thanks.

[Bernard Marx]

Is there javascript for this? Or do I need to venture into the land of layers?

That's hard to call, as they're not mutually exclusive.

It's not entirely outside the realms of pure CSS, using links & pseudo classes. So accessibilty gains a point by not using JS, but loses on backward compatibility.

Give us a snippet of the *timeline's HTML. There will be somewhere around 106 ways of doing it, all of them vulnerable to criticism.

(*I'm assuming you don't mean a Dreamweaver Timeline)

[lstein]

Thanks for the quick response.

No, this isn't a dreamweaver timeline- it's just very simple HTML with a linked stylesheet. The links are empty below and the image called "arrow" is what I want to appear when the date is moused-over.

<td width=100 valign="top">
<a href=""><img src="images/italyantwerp.jpg" width=100 height=110 border=0 alt="ITALY/ANTWERP"></a>
<br>
<span class=title>ITALY/ANTWERP
<br>1600-1610
<br><!-- start -->
<br><a href="">1600</a>
<br><a href="">1601</a>
<br><a href="">1602</a>
<br><a href="">1603</a>
<br>
<br><a href="">1605</a>
<br><a href="">1606</a><img src="images/arrow.gif" alt="" width="21" height="12" border="0">
<br><a href="">1607</a>
<br><a href="">1608</a>
<br><a href="">1609</a>
</span></td>

[Bernard Marx]

Here's a quick go at a totally CSS version (shh - we might get moved)
It works for me, and should be OK in all V5+ browsers, but you'll need to play to get it right for you.

[pre]
<script>
/* Preload arrow.
 This cam be avoided too,
 but this makes the idea simpler.
*/
var arrowImage = new Image()
arrowImage.src = "arrow.gif"
</script>
<style>
A.arrow
{
 display:inline-block; /*for standards browsers*/
 width: 150px;
 height: 50px;
 background-repeat: no-repeat;
 background-position: right middle;
}
A.arrow:link,
A.arrow:visited
{color:green;}
A.arrow:hover
{
 color:red;
 background-image:url(arrow.gif);
}
</style>
---the html-----
<br><a class="arrow" href="">1600</a> 
<br><a class="arrow" href="">1601</a>
[/pre]

If you'd prefer a JavaScript solution (probably more HTML involved),...

[lstein]

Thanks! I'll try it.