Image Changes on hover

[techie88]

Hello,

I am trying to make a image change from one to another on mouse hover. Here is what I have currently but it is not working. The image which is supposed to appear on mouse hover is coming on the line under the default image.

in the html file:
<ul> <li><a href="home.html"><img src="button-13.png"></a></li>
<li><a href="members.html"><img src="button-14.png" class="rollover2"><></a></li>
</ul>

In the sytlesheet:
img.rollover2{
background: url("button-20.png");
}
img:hover{
opacity:0;
}

 

[techie88]

This is an extension of my previous post. I have a form on my webpage as well where I also want to achieve the same thing with the image. The submit button on this form takes me to another page where I can make payments. I want the button image to change on mouse hover as well. Please help.

<form method="post">
<input type="image" src="img1.png" border="0" name="submit">
</form>

 

[vacunita]

You have an image in your link, but then you change the image's background image too, and then you make the entire image disappear by changing its opacity. Seems like you are hitting 3 methods at once and none correctly.

If you want to change an actual img, then you;d need to do it via Javascript. If you want to change a background image of an element then CSS is good.


For your img button I'd use Javascript or at the least change it a bit. Instead of making it an img button make it a regular submit button, and alter the button's background image using CSS.

<input class="sub_button" type="submit" name="submit">

.sub_button{
background-image:url('img1.png');
}

.sub_button:hover{
background-image:url('otherimg.png');
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[darryncooke]

your css is wrong anyway

the hover psuedo class would be applied as such

img.rollover2:hover

also for opacity you want to use

opacity:0.7;
filter:alpha(opacity=70);

to help with IE. What Phil said is right. You are using every and all ways to display the image and then just trying to make the IMG tag 0 opacity.

Best bet is assign a class like you did with the background and then either replace the background with the hover (using a 1px solid color).

the problem with how you are using opacity is that it will make the whole button invisible not just the image.

you can change (or at least give the appearances of) images by using sprites. Its one way I make hover effects for links.

Explaining it is a bit involved but heres a link

http://www.alistapart.com/articles/sprites

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services