PDA

View Full Version : Text-Link over an Image

nick_p
04-18-2005, 01:55 AM
Hi!

Before I start, I did read the similar thread below but it didn't answer my question.

I am trying to put a simple email link over an image on my page. At the moment i have the link half over the image and and the other half on the normal background.

On rolling over the text link on the normal background it works fine but move the mouse over the link on the image and it stops working!

I'm Baffled!

Here's a link to the site, look halway down at the black email link...
http://www.mylinfield.com.au/contact.php

Hope you can help!

Cheers
Nick :)
_Aerospace_Eng_
04-18-2005, 04:49 AM
Okay so you have the image as a background now use margin-left:50px; in CSS to push the link over to the right so it will be on top of the background image. I dont know how many times I've told peeps not to use css positioning if you dont have, I believe your site, can be done with out it. Also, you have your closing body tag before 85% of the content, here check out what the validator (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.mylinfield.com.au%2Fcontact.php&charset=%28detect+automatically%29&doctype=Inline&verbose=1) has to say.
nick_p
04-18-2005, 05:13 AM
Hi _Aerospace_Eng_

Thanks for replying to my query.

First up, the <body> tag was a typo...whoops :rolleyes:

Secondly, yeah you're right about the margins, it's just that I'm new to CSS and wanted to see if I could do it all with Positioning techniques.

Lastly I did push it over with the margin left as you suggested but that is not what I was asking about. I had it positioned their so you could roll your mouse over the link in both situations, I.E roll over the left side and it works as a link with changing color during hover and all that, then rolling across to right and seeing the link not change in color or be clickable either. Is it possible to make the link work over the top of the image?

Do you think you could have another look for me, because I don't know what to do about it. Further down that transparent box I am putting a form in and am expecting the same problem.

http://www.mylinfield.com.au/contact.php

Thanks heaps for your help

Nick
_Aerospace_Eng_
04-18-2005, 05:21 AM
Make the image a background image, and type over it. Thats simple enough to do.
nick_p
04-18-2005, 05:27 AM
Aero,

I have tried the simple stuff, When I do put the image in the background, somehow I seem to lose my drop-shadow! Don't know why because it is a jpg with a built-in drop shadow.

Is it true that the z-index is only for Opera?

Surely there must be a way to use a link on top of an image!

Nick :)
_Aerospace_Eng_
04-18-2005, 05:31 AM
The zindex works but for items that are absolutely positioned. You may have to rethink your idea, and just use css to create an "image map" over your image with the drop shadow. You may want to have a look at this thread http://www.codingforums.com/showthread.php?t=57086
nick_p
04-18-2005, 05:33 AM
Ok

Thanks for your time Aero.

Nick :thumbsup: