homepage Welcome to WebmasterWorld Guest from 54.237.54.83
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Link Hover and Image Display
Saboi




msg:3289338
 7:03 am on Mar 22, 2007 (gmt 0)

Hi guys,

Am new to web development and enjoy reading postings.Need some assistance as well.

I have created on my test website links that give me an image background when hovered over.However when this happens the test is almost invisible thus cannot be seen clearly.Code am using is

#menu a:hover{display:block; text-decoration:none; background:url(picture.jpeg); width:100px; height:200px;}

However this does not produce desired outcomes.I would like a picture to display when a link is hovered over but not on the link but instead on the side of the link.

Please advice how that can be done.

Thanks.

Saboi

 

Moby_Dim




msg:3289490
 12:09 pm on Mar 22, 2007 (gmt 0)

You have to use other parameters of background property too. For example, if your link is a rectangular 100 px width and 200 px height, as you wrote, and suppose the image to display is 20 x 20 px, and you want to place it in the right upper corner of the link, you may use something like :#menu a:hover{display:block; text-decoration:none; background:url('./picture.jpeg') no-repeat top right; width:100px; height:200px; padding-right:25px;}

Did not understand this : "the test is almost invisible thus cannot be seen clearly." Do you see the image or not at all? If not, check the url above. Check earlier links declarations too, because in some cases they may interfere and affect that one.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved