Mapear imagem css

Altair Julião · 06 de Maio de 2012, 22:55

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.html

Consegui fazer por o link certinho do facebook, mas o do Gimp não funciona, só quando ponho um nome entre as tags a.

Código Selecionar

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

Mapear imagem css

Altair Julião