homepage Welcome to WebmasterWorld Guest from 54.242.231.109
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Make a clickable link in a certain spot?
Scotty13




msg:4457136
 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

 

topr8




msg:4457143
 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




msg:4457350
 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




msg:4457465
 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




msg:4457502
 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'; ?>

rocknbil




msg:4459100
 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




msg:4459190
 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?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved