View Full Version : css image hover or tool tip without linking

02-17-2011, 01:39 PM

I have a image which I want to change on mouseover. I don't want it to be a link. Is there any simple css code to do it. I am not finding anything that can help me do it without linking or making the cursor as normal.

But is there a simple way to do it. or if that is not possible can I show a tooltip (image) without linking?

help regarding any one way will be appreciated.

02-17-2011, 02:42 PM
You can have an image without wrapping it in a <a href> tag. Thats what creates a link on an image. Then for a tooltip, you would add a title attribute to the <img> tag:

<img src="myImage.jpg" alt="My Image" title="My Image">

02-17-2011, 04:58 PM
Hello kilthyspirit,
An anchor is probably the easiest way to get a hover affect so your image will change but it doesn't have to link to anything. Try replacing the url with a # like this <a href="#"><img src="your_image.jpg" alt="description" /></a>

02-17-2011, 09:58 PM
thanks for your reply guys. I am using this code for the hover effect. everything is fine just that IE is angry and does not display my effect, can you tell why?

in the stylesheet

.example.two a {display:block; width:148px; height:13px; overflow:hidden;}
.example.two a:hover img {margin-top:-14px;}
.example.two a:hover {zoom:1;}

in the html

<div class="example two">
<div class="wrapper">
<br /><a href="#"><img src="images/wronglane.png" border="0" alt="" /></a>

02-17-2011, 11:43 PM
That looks like a bit of divitis going on there. Is there any real need to nest that img in 2 div elements that really do nothing?

If there is or not, the CSS you have doesn't exactly point to an anchor inside <div class="example two">.
.example and .two are 2 seperate classes. You can address both with that styling but you would need a comma, like this - .example, .two {styling here} but there doesn't appear to be any reason to.

Try making your CSS look like this instead -

.example .wrapper a {display:block; width:148px; height:13px; overflow:hidden;}
.example .wrapper a:hover img {margin-top:-14px;}
.example .wrapper a:hover {zoom:1;}

Note the space btween the two classes. That CSS very specifically points to an anchor inside .wrapper which is inside .example.

02-18-2011, 01:48 AM
the code you gave is fine, but it still doesn't change the image in IE?

02-18-2011, 02:11 AM
the code you gave is fine, but it still doesn't change the image in IE?

We're probably going to need a link to the test site so we can see how your image and hover work. IE is famous for messing up negative margins, the nested divs/<br>/no img size... all that could be causing trouble. Who knows.. it could just be an IE/.png issue.