Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    css image hover or tool tip without linking

    Hello,

    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.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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">
    Teed

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Feb 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

    Code:
    .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

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

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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 -
    Code:
    .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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Feb 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    the code you gave is fine, but it still doesn't change the image in IE?

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by killthyspirit View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •