Help on Link using image with an hover image

Hi

How do you create an hover image on a link that uses an image ?

For example: The link image is the homeup.gif, and hover image is the homedown.gif.

<a href=" index.html"><img src="home.gif" /></a>

any clues on how I can implement this using css?

Thank you

 

Try this:

<a href="index.html"><img src="firsimage.gif" onmouseover="this.src = 'secondimage.gif';" onmouseout="this.src = 'firstimage.gif'; /"> </a>

 

You can implement a img class if you wanna use CSS. Just add something like

img.home:hover {add properties here}

Code (markup):

and

img.home {add properties here}

Code (markup):

to your css file and specify exactly what you want it to look like when hovered over, and what it looks like normally. Probably just add the background property with a no repeat after it.

Then add the class to the <img> in the html file by doing

<a href="index.html"><img src="home.gif" class=home></a>

Code (markup):

 

Here's what I did:

<p class="go"><a href=" index.html" ><img src="home.gif" class="home" /></a></p>

p.go img.home{
position: relative;
top: 0;
letf: 0;
}

p.go img.home:hover {
background: url(homedown.gif) no repeat 0 0;
}

I tried and it doesn't work.

 

Well for starters you spelled left wrong in the normal state properties. Secondly I told you wrong

.home a:hover {background:home.gif top left no-repeat;}

Use <a href="link" class="home">

 

The best way I have found to do this is to create 1 image that has both images in it. I have attached the image so you can see what I am talking about. Notice that the top portion of the image is a bit darker than the bottom.

Then I use CSS to 'slide' the position of the background image on hover. See the code below:

a.searchbutton {
         width: 63px;
         height:33px;
         background: url(../images/search-button2.png) no-repeat top;
         cursor:pointer;
}

a.searchbutton:hover {
         background-position: bottom;
}

Code (markup):

Then I use the below HTML.

<a class="searchbutton "></a>

Code (markup):

REMEMBER: IE 6 doesn't like to apply hover styles to any elements other than the anchor tag.

 

If you're doing what I think you're doing (making an image based menu) that's not going to be the best (or semantically correct) way of going about it.

Again, assuming that's what you're making, you're going to want to look into an image substitution technique for menus, such as the one used here: http://www.pmob.co.uk/temp/navimagereplace.htm

Please note that while Paul O'Brien uses EM for the background image container that SPAN is a perfectly acceptable and semantically neutral way of doing this as well (that, and I don't support Mac-IE anyway).

 

I'm not doing imaged based Menu (that part has already done). Right now, I just want to add some buttons on the content page and it has to have default button with and hover image. I tried with the css method and some how it does not work.

 

^ then you might want what Foo said. If this is a form-style button (a submit) then you could use
<input type="image" src="transparent.gif" width="whatyouwant" height="ditto" />
input type="image" is nearly identical to type="submit" except it can have an image associated with it. But because you want it to change on hover, you put a transparent placeholder to set the size and then slide a background image which has both your normal and hover states.

You're using a <p> though, so you want pretty much what Foo did... though I'd be more specific about placement than "bottom" (it depends how you made your image).

Post your code. It should be easy to figure out what's not working. Post the image as well (or a link to it).

 

Here's the code for link:

<a href="gallery.php" class="gallery"><img id="gal" src="images/buttons/galleryUp.gif" border="0" /> 

Code (markup):

CSS Code:

img#gal{
  position: relative;
  top: 10px;
  left: 0px;
  width: 72px;
  height: 19px;
}
a.gallery:hover{
  position:relative;
  top: 10px;
  left: 0;
  width:72px;
  height: 19px;
  display:block;
  background-image:url(images/buttons/galleryhover.gif);
  background-repeat: no-repeat;
  
}

Code (markup):

right now the problem is when I move the mouse over the galleryup.gif, the galleryhover.gif appears under the galleryup.gif. Any clue?

 

Probably because it is a background-image. This means that the image in the <img> tag will be in front of the background-image, because the definition of a background image is that it is in the um...background.

Seriously, if you want to use an image as a button, and apply hover styles, you would be better off using the code I posted earlier. It is quite easy to do once you wrap your brain around what is happening. It took me a while to understand it.

If you want to see a live example. You can look at www pool-zone com. The search button is styled using this exact process.

BTW - You only need to define styles that will CHANGE when you :hover.

Did you define a height and a width in the CSS for the <a> tag? If you have an empty <a> tag, you MUST define a height and width.

 

I solved the problem by taking out both <img> tag in the html file and used background images in the css file. the idea was same as Foo, but I used two images. Thank you all for the support.

 

Yeah, you can do two images. The advantage to one is that the browser only has to load one. Then you can change the position using background-position: coord coord;

Google "CSS Sprites Meets Sliding Doors"