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?
|
|
