I need to create an image map using css so the coins are clickable. Can anyone help as I am completely stuck?!?
<style>
#feedback {
background-color: #ffffff;
background-image: url(<!-- m --><a class="postlink" href="http://www.paxton-access.co.uk/Image%20registry/Image%20web/004993.jpg">http://www.paxton-access.co.uk/Image%20 ... 004993.jpg</a><!-- m -->);
background-repeat: no-repeat;
width: 266px;
height: 171px;
float: right;
text-align: left;
}
#title2 {
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 20.22px; color: #000;
text-align: left;
margin-top: 14px;
padding-left: 15px;
border: none;
}
#comtext {
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 11px; color: #000;
text-align: left;
padding-top: 5px;
margin-left: 15px;
margin-bottom: 10px;
width: 200px;
border: none;
}
#quotetext {
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 11px; color: #000;
text-align: left;
padding-top: 5px;
margin-left: 15px;
width: 130px;
border: none;
}
</style>
<div id="feedback">
<div id="title2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="title2">How to buy</a></div>
<div id="comtext">There are many different ways to buy our products</div>
<div id="quotetext">Click <a href=http://www.webdeveloper.com/forum/archive/index.php/"#">here</a> to find the nearest authorized retailer near you</div>
</div>Make an image map in #feedback and position the text relative or absolute to #feedback.sorry for being dense, but how exactly do I do that? I am not too sharp on css as you can probably guess!Something like this:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>coins</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#feedback {position:relative; background-color: #ffffff; width: 266px; height: 171px; float: right; text-align: left; }
#feedback div {position:absolute; left:15px; color: #000; font-family: Verdana, Tahoma, Arial, sans-serif;}
#feedback img {border:0;}
#title2 {top:15px; font-size: 20.22px; }
#comtext {top:45px; font-size: 11px; color: #000; width: 200px;}
#quotetext {top:90px; font-size: 11px; color: #000; width: 130px;}
</style>
</head>
<body>
<div id="feedback">
<img alt="004993 (8K)" src=http://www.webdeveloper.com/forum/archive/index.php/"../Images/004993.jpg" height="171" width="266" usemap="#coins">
<div id="title2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="title2">How to buy</a></div>
<div id="comtext">There are many different ways to buy our products</div>
<div id="quotetext">Click <a href=http://www.webdeveloper.com/forum/archive/index.php/"#">here</a> to find the nearest authorized retailer near you</div>
</div>
<map name="coins">
<area shape="circle" coords="200,90,40" href=http://www.webdeveloper.com/forum/archive/index.php/"www.coins.com" alt="">
</map>
</body>
</html>Thank you. That has helped me enormously to understand positioning in css. You can see the results here: <!-- w --><a class="postlink" href="http://www.paxton-access.co.ukLooks">www.paxton-access.co.ukLooks</a><!-- w --> good, shame about the validation (<!-- m --><a class="postlink" href="http://validator.w3.org/check?verbose=1&uri=http%3A//www.paxton-access.co.uk/">http://validator.w3.org/check?verbose=1 ... ess.co.uk/</a><!-- m -->)
<style>
#feedback {
background-color: #ffffff;
background-image: url(<!-- m --><a class="postlink" href="http://www.paxton-access.co.uk/Image%20registry/Image%20web/004993.jpg">http://www.paxton-access.co.uk/Image%20 ... 004993.jpg</a><!-- m -->);
background-repeat: no-repeat;
width: 266px;
height: 171px;
float: right;
text-align: left;
}
#title2 {
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 20.22px; color: #000;
text-align: left;
margin-top: 14px;
padding-left: 15px;
border: none;
}
#comtext {
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 11px; color: #000;
text-align: left;
padding-top: 5px;
margin-left: 15px;
margin-bottom: 10px;
width: 200px;
border: none;
}
#quotetext {
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 11px; color: #000;
text-align: left;
padding-top: 5px;
margin-left: 15px;
width: 130px;
border: none;
}
</style>
<div id="feedback">
<div id="title2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="title2">How to buy</a></div>
<div id="comtext">There are many different ways to buy our products</div>
<div id="quotetext">Click <a href=http://www.webdeveloper.com/forum/archive/index.php/"#">here</a> to find the nearest authorized retailer near you</div>
</div>Make an image map in #feedback and position the text relative or absolute to #feedback.sorry for being dense, but how exactly do I do that? I am not too sharp on css as you can probably guess!Something like this:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>coins</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#feedback {position:relative; background-color: #ffffff; width: 266px; height: 171px; float: right; text-align: left; }
#feedback div {position:absolute; left:15px; color: #000; font-family: Verdana, Tahoma, Arial, sans-serif;}
#feedback img {border:0;}
#title2 {top:15px; font-size: 20.22px; }
#comtext {top:45px; font-size: 11px; color: #000; width: 200px;}
#quotetext {top:90px; font-size: 11px; color: #000; width: 130px;}
</style>
</head>
<body>
<div id="feedback">
<img alt="004993 (8K)" src=http://www.webdeveloper.com/forum/archive/index.php/"../Images/004993.jpg" height="171" width="266" usemap="#coins">
<div id="title2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="title2">How to buy</a></div>
<div id="comtext">There are many different ways to buy our products</div>
<div id="quotetext">Click <a href=http://www.webdeveloper.com/forum/archive/index.php/"#">here</a> to find the nearest authorized retailer near you</div>
</div>
<map name="coins">
<area shape="circle" coords="200,90,40" href=http://www.webdeveloper.com/forum/archive/index.php/"www.coins.com" alt="">
</map>
</body>
</html>Thank you. That has helped me enormously to understand positioning in css. You can see the results here: <!-- w --><a class="postlink" href="http://www.paxton-access.co.ukLooks">www.paxton-access.co.ukLooks</a><!-- w --> good, shame about the validation (<!-- m --><a class="postlink" href="http://validator.w3.org/check?verbose=1&uri=http%3A//www.paxton-access.co.uk/">http://validator.w3.org/check?verbose=1 ... ess.co.uk/</a><!-- m -->)