• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

xplode_me

[Resolvido] Botões sobre imagem

8 mensagens neste tópico

Olá!

Tenho miniatures de imagens e gostava de fazer "overlay" de 3 imagens pequeninas (8x8) no fundo de cada miniatura, com links.

Alguém me pode dar uma mãozinha com o xhtml/css ?

Obrigado!

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Não tens nada de usar JavaScript, mais daqui a bocado posto um exemplo se ninguém o fizer antes.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Apeteceu-me brincar um bocadinho e adicionei uns extras, podes ver aqui um exemplo:

http://207.210.95.226/~nazgulle/img_overlay/

De qualquer forma deixo aqui o código relevante. Atenção que esta é uma maneira de fazer as coisas, devem existir outras e algumas das propriedades poderão nem ser preciso. Isto é só um exemplo.

img {
border: 0;
}

#image-container {
position: relative;
width: 256px;
margin: 100px auto;
}

#button-copy,
#button-cut,
#button-paste {
position: absolute;
background-color: #ffffff;
border: 1px solid #000000;
height: 16px;
padding: 2px;
}

#button-copy {
top: 50px;
right: 81px;
}

#button-cut {
top: 50px;
right: 51px;
}

#button-paste {
top: 50px;
right: 21px;
}

#buttons {
position: relative;
}

<div id="image-container">
<div id="buttons">
	<div id="button-copy">
		<a href="#"><img src="edit-copy.png" alt="" width="16" height="16" /></a>
	</div>
	<div id="button-cut">
		<a href="#"><img src="edit-cut.png" alt="" width="16" height="16" /></a>
	</div>
	<div id="button-paste">
		<a href="#"><img src="edit-paste.png" alt="" width="16" height="16" /></a>
	</div>
</div>
<img src="image.png" alt="" width="256" height="256" />
</div>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Thanks.

jQuery for president :D

Eu fiz isto porque daqui a uns tempos tenciono fazer algo parecido para mim, assim já fica o exemplo feito lol. O código JavaScript talvez possa ser optimizado e tal, mas pronto, foi só para mostrar um efeito engraçado sem perder muito tempo com isto, até porque eu estou com fome e vou jantar ;)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Nazgulled Muito obrigado! Excelente!

Era mesmo isto que andava à procura!

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora