Make a clickable link in a certain spot?

Forum Moderators: open

Message Too Old, No Replies

Make a clickable link in a certain spot?

Scotty13

11:04 pm on May 23, 2012 (gmt 0)

I'm only a rookie, so I would appreciate any help and please don't answer with to complicated replies.

I know how to add an image and make it a link or add a link.

However, I have this background image on my website. All the images you see are one picture.

I want my members to be able to hover over any part of the “key hole” and be able to click and send them to my home page.

Is this even possible to do?

Script…

<?php
ob_start();
?>
<!doctype html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<style type="text/css">

</style>
</head>

<body>

{APP_TPL}
</body>
</html>
<?php include 'listings.php'; ?>

Thank you, Scott

topr8

11:38 pm on May 23, 2012 (gmt 0)

you need to look into html image map

although you can't do it with a background image, you'd need to put a transparent gif over the top of your background.

Scotty13

12:46 pm on May 24, 2012 (gmt 0)

With some adjusting to get it just right around the key hole picture, this worked for me. I hope this helps someone else.

<body>

<a href='http://example.com' style='display:bock; width:115px; height:215px; position:absolute; left:40px; top:15px'></a>

</body>

Thank you,
Scott

rocknbil

4:46 pm on May 24, 2012 (gmt 0)

Exactly what I would have done. (almost) :-) Imagemaps are fine in spite of the bad info about them floating around the 'net, but I'd only use them if there are more than two links. For a single or two links, I'd do what you've done - but make it a little more semantic and valid.

You should never have a bare element just floating around. Put it in a container. Second, an empty link says "you have nothing to say." :-) Using text-indent, you can make your link say something to the search engines. Of course, move all this to external css.

#keyhole, #keyhole a { display:block; width:115px; height:215px; margin:0; padding:0; border:none; outline:none; text-indent:-500000px; }

#keyhole { position:absolute; left:40px; top:15px }

<p id="keyhole"><a href="http://example.com">Adventures through the keyhole</a></p>

If you add more elements to this page, things might start to cover up #keyhole - adjust it's z-index, example, z-index: 1000;

Scotty13

6:11 pm on May 24, 2012 (gmt 0)

@rocknbil - I added about notes and this is my final result.
However, I'm not getting the Adventures through the keyhole message.

<?php
ob_start();
?>
<!doctype html>
<html>
<head>
<title>Rent A Vacation Home</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<style type="text/css">

</style>
</head>
<body>
<p id="keyhole"><a href="http://example.com">Adventures through the keyhole</a></p>
{APP_TPL}
</body>
</html>
<?php include 'listings.php'; ?>

rocknbil

5:17 pm on May 29, 2012 (gmt 0)

Isn't that what you want? A transparent anchor hovering over a keyhole?

The text is supposed to be invisible to users . . . hence the text-indent. It's just to describe to search engines what the link is about.

lucy24

9:11 pm on May 29, 2012 (gmt 0)

I've deliberately withheld this question until the formal How-To got answered. Just out of my own curiosity, since we can't see the site: Are we talking about Mystery Meat Navigation here?