Home/ Questions/Q 9075941
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T18:59:27+00:00

I’m currently using this current HTML markup with Javascript to create text links with

  • 0

I’m currently using this current HTML markup with Javascript to create text links with a inline image that “rolls over” on the text hover.

<div><a id="link" href="page.html"
        onmouseover="rollover(this.id,'over');"
        onmouseout="rollover(this.id,'out')"
     >Link</a><img id="linkButton" src="image.gif" /></div>

It’s important that the image is inline so I can easily create new text links with varying lengths of text.

I want to try and get this done without Javascript, and using a single image containing the over and out states of the rollover, so probably using the background position trick.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to use background-image (or just background) in CSS. Here is an example http://www.webvamp.co.uk/blog/coding/css-image-rollovers/

    The key is using pseudo classes on the link element. Eg:

    a:hover
a:active
a:visited

    You can also use inline-block so that the a isn’t completely a block element. You may want to set a width and a height to it. Keep in mind display:inline-block doesn’t work that great in IE7, if you still need to support that.

    Here’s some additional tips on using CSS Sprites

    • 0