homepage Welcome to WebmasterWorld Guest from 107.20.129.212
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Visit PubCon.com
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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved