Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Robson!

[Resolvido] album de fotos com imagem de lupa(mouse over).

Por , em Desenvolvimento frontend

Recommended Posts

Robson!    0

Robson!
Postado

Saudações pessoal do imasters, é uma honra estar aqui com vocês.

O problema é o seguinte:

Estou criando um album de fotos, o objrtivo é o seguinte, quando se passa o mouse sobre a imagem, aparece a imagem de uma lupa, se o usuario clicar vai ampliar a imagem. Consigo fazer isso com css somente?

Teria como dar uma mão?

obs: só falta a parte da lupa parecer.

 

desde já agradeço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Olha só, a propriedade para alterar o cursor é a cursor, mas não existe nenhum cursor "padrão" de lupa... Então, somente com CSS isso não será possível... Eu acho... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif O fato é que eu não pude investigar a fundo, mas veja este Lightbox:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Highslide JS

 

Observe que ele altera o cursor para uma lupa, mas, como falei, não sei se é feito mesmo com JavaScript, não estudei o código dele. Provavelmente seja com JS mesmo...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Existe como declarar um arquivo de imagem como icone do mouse.

mas só funciona no IE:

http://www.cenasordidas.hbe.com.br/exemplos/cursor.html

Compartilhar este post

Link para o post
Compartilhar em outros sites

Robson!    0

Robson!
Postado

acho que não fui muito claro, a lupa não aparece como cursor, ela é uma imagem que paracece por cima da outra. veja o exemplo:

normal:

Imagem Postada

hover:

Imagem Postada

 

assim acho que fica mais facil pra entender.

 

valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Poxa... muuuuuito mais fácil doque imaginávamos.. hauhauhau

Cara.. você pode conseguir isso por Javascript.. ou por :hover

 

Nos 2 casos, a lupa começa ai.. mas com um display: none, que é alterado no estado :hover, ou no mouseOver.

você já tentou desenvolver ? nem é difícil...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Robson!    0

Robson!
Postado

com javascript fica muito mais facil, sim. até consegui fazer com javascript, porém quero desenvolver com css.

já tentei fazer com o visibility:hidden/visible.

só que problema é que estou com a seguinte estrutura:

 

//se eu colocar no span pra mostrar ou esconder vai afetar toda estrutura, não?
<span class="thumbnail"><a href="#" title="nome do óculos" class="borda_interna"><img src="images/cat_produtos/img_miniatura.jpg" /></a></span>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Tentei fazer aqui com CSS puro, mas o IE6 não reconheceu.. mesmo usando do jeito que ele gosta.. veja.. tá perfeitinho no Firefox..

a imagem: lupa.jpg é apenas a lupa.. tem 26x26.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	border: 0;
}
.miniatura {
	position: relative; /* contexto */
}
.lupa {
	position: absolute;
	bottom: 0;
	left: 0;
	display: none;
}
.miniatura a:hover .lupa {
	display: block;
}

</style>
</head>
<body>
<div class="miniatura">
	<a href="#"><img src="img_miniatura.jpg" alt="" />
	<img src="lupa.jpg" alt="" class="lupa" /></a>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito