2 replies [Last post]
Last seen: 11 years 39 weeks ago
Timezone: GMT+1
Joined: 2004-11-19
Posts: 80
Points: 8

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?

Last seen: 18 years 13 weeks ago
Joined: 2004-10-28
Posts: 71
Points: 0

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.

Stu's picture
Bristol uk
Last seen: 19 years 1 week ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

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.

It's not what you do it's the way that you do it.
So do it with STYLE