Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Link Hover and Image Display



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

5+ Year Member

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.




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

10+ Year Member

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.


Featured Threads

Hot Threads This Week

Hot Threads This Month