Welcome to WebmasterWorld Guest from 54.211.96.99

Forum Moderators: incrediBILL

Message Too Old, No Replies

Make a clickable link in a certain spot?

   
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">
<!--
body
{
background-image:url('app/web/img/login_logo.jpg'); background-position:center top;
background-repeat:no-repeat;
}
.center {
text-align: center;
}
-->
</style>
</head>

<body>

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



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

WebmasterWorld Senior Member topr8 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
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
4:46 pm on May 24, 2012 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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;
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">
<!--
body
{
background-image:url('app/web/img/login_logo.jpg'); background-position:center top;
background-repeat:no-repeat;
}
.center {
text-align: center;
#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 }

-->
</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'; ?>
5:17 pm on May 29, 2012 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
9:11 pm on May 29, 2012 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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?