Olá pessoal, estou criando um template para uma Igreja aqui, algo que nunca fiz, estou tendo dificuldades para mapear os links da imagem. No rodapé, por exemplo, temos uma imagem do logo do facebook para por o link da fan page e uma imagem do Gimp, que quiz colocar para referenciar que fiz o template nele, onde eu pretendo por o link da página oficial do Gimp.
Encontrei esse site:
http://www.criarweb.com/artigos/mapear-imagem-apenas-com-css.htmlConsegui fazer por o link certinho do facebook, mas o do Gimp não funciona, só quando ponho um nome entre as tags a.
<style type="text/css">
body {
margin-bottom:50px;
margin: 0;
padding: 0;
}
a {
position: absolute;
display: block;
text-decoration: none;
}
a span {display:none}
a.gimp {
widht: 63px;
height: 55px;
right: 22.5%;
top: 132.5%;
background: transparent url(nada.jpg) no repeat;
}
a.face {
width: 47px;
height: 60px;
left: 23%;
top: 132.5%;
}
a:hover {
border: none;
}
#tudo {
background-color: silver;
width: 100%;
margin: 0 auto;
}
#header {
background-image: url("images/header.png");
background-repeat: no-repeat;
margin: 0 auto;
width: 781px;
height: 176px;
}
#main {
background-image: url("images/main.png");
background-repeat: repeat-y;
margin: 0 auto;
width: 781px;
height: 100%;
}
#footer {
clear: both;
position: relative;
background-image: url("images/footer.png");
background-repeat: no-repeat;
background-position: bottom;
widht: 781px;
height: 112px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="tudo">
<div id="header">
</div>
<div id="main">
</div>
<div id="footer">
</div>
<a href="http://www.gimp.org" target="_blank" class="gimp"></a>
<a href="http://www.facebook.com/IgrejaDeNossaSenhora" target="_blank" class="face"></a>
</div>
</body>
</html>Desde já agradeço a todos.
Tópico: Mapear imagem css (Lida 2523 vezes)