Fri, 2004-11-19 16:21
Hello to anybody that can help find a solution to my problem.
This is my first time trying to create pop-up images by rolling over links with CSS.
I'm just in the testing stage still, so I have nothing online, all I can offer you is my code:
I'm trying to create a navigation menu, whereby when you rollover the links a small arrow image will appear before the link. The image is a size 15 x14 px.
The Code I am using in my CSS is as Follows:
a.showpic {color: white;}
a span.pic {display: none;}
a:hover span.pic {display: block; margin-left: -23px; margin-top:1px; position: absolute; height: 14px; width: 15px; }
and my code on my page reads:
<a class="showpic" href="#"><span class="pic">
<img alt="" src="images/pointer.jpg" height="20" width="20" border="0"/></span>Hover
here </a>
The problem is the positioning of the image when I rollover the link. It appears it the position that I want in IE6 but in Firefox it appears below the link, or the link appears above the image. Also when I resize the browser window the position changes again?
Any Ideas?
Fri, 2004-11-19 22:25
#1
Image Rollovers on Links
Hi zonja,
As you are in the experimenting stage, you should also consider the list <UL> element and the items <li> for navigation.
You can style these elements horizontal or vertical and put some <a> tags around the menu labels. If you fit them exactly within the <li> you can make the :hover work in all browsers.
good luck with testing and learning. Leave a link if you got some more to show.
Sat, 2004-11-20 11:47
#2
Image Rollovers on Links
Add position:relative; to ~
a.showpic {color: white; position:relative;}
Then the picture can be positioned accurately using position:absolute;
I have a few examples of photograph albums on my site at
http://www.s7u.co.uk that might be of help.