Image hovers/rollovers?

Question

im trying to make a link that has this {http://i36.tinypic.com/fdttvp.jpg}

i can't use javascript because im using myspace. so it must be html/css. please help.

Answer 1

Without using javascript this won't work in all browsers, but you could set your first image as a background image to an element (example, a div or a table) and then use the :hover property to set the background image to your second image.

an example would be:

#myDIV { background-url: /path/to/image/ }

#myDIV:hover { background-url: /path/to/image2/ }

Again, this isn't going to work in all browsers, in fact - I think it will only work in IE 7 and FF 2+. Maybe Opera...if you're lucky...

Answer 2

Put this between your head tags:

<style type="text/css">

a { display: block; }

  a:link.mousie { width: 455px; height: 132px; border: 0; background: url(http://i34.tinypic.com/10ncapu.jpg%7D) no-repeat center scroll; }

  a:hover.mousie { background: url(http://i36.tinypic.com/fdttvp.jpg%7D) no-repeat center scroll; }

  </style>

This between the body tags for your links:

<a class="mousie" href="URL Path" title="Mouseover Description"><span>& nbsp ; </span></a>

Remove spaces for non-breaking space.  Must have as you can't have empty span tags.

Checked in Firefox and IE and works.  Would be better if you use an image preloader to eliminate flicker in some browsers.

Ron