Imagem sobreposta a outra com link?

[Bruno Ramos]

Boa noite!

Seguinte, um cliente me passou um layout que me deixou meio intrigado. Ele requer algo como no seguinte exemplo: http://i.imgur.com/ScIyY.jpg
Nisso, cada imagem terá seu link próprio e os fundos serão dinâmicos (providos de um banco de dados, pois vai usar para o portfolio o mesmo esquema).

Eu fiz a sobreposição das imagens normalmente com margin, porém o problema é: como fazer o link funcionar para cada triângulo? Eu tentei usando maps mas mesmo assim a área de intersecção dos dois "retângulos" das imagens fica sem link.
Alguém alguma ideia?

Valeu!
[]s

Bruno C. Ramos
http://www.brunoramos.eti.br

[Gabriel Gottgtroy Zigolis]

Não entendi sua dúvida, 

Cocê colocou duas imagens que seus caminhos estão vindo de forma dinâmica, ou seja cada imagem tem seus respectivo link (a href="..."), logo, qual seria o problema se você já tem duas imagens e cada uma delas com seu link?

Também não consegui compreender por que vc está usando maps para colocar link.

Atenciosamente;

Gabriel Gottgtroy Zigolis
Senior Front-End Developer
zigolis.com

--
Você está recebendo esta mensagem porque se inscreveu no grupo "TABLELESS - GOOGLE" dos Grupos do Google.
Para postar neste grupo, envie um e-mail para tablele...@googlegroups.com.
Para cancelar a inscrição nesse grupo, envie um e-mail para tablelessgoog...@googlegroups.com.
Para obter mais opções, visite esse grupo em http://groups.google.com/group/tablelessgoogle?hl=pt-BR.

[Bruno Ramos]

O problema é que a imagem (arquIvo) é um retangulo, então quando em hover ele não vai pegar separado, mas sim priorizar a imagem que estiver por cima.

--

[Gabriel Gottgtroy Zigolis]

Não seria mais simples você cortar as duas imagens como png com fundo transparente no formato tringular?

Atenciosamente;

Gabriel Gottgtroy Zigolis
Senior Front-End Developer
zigolis.com

[Tarcisio Castro]

Muita gente não gosta do map mas ele resolve facilmente seu problema, se é este o que entendi.

Veja: http://jsfiddle.net/N6zhE/

[Luan Garcia]

O que acontece é que nao importa se recortar um triangulo com fundo transparente, na hora de encaixar as imagens, elas vao ficar sobrepostas, afinal, qualquer imagem tem o formato de um quadrado ou retangulo.

Luan Garcia
Desenvolvedor Web
http://luangarcia.com

[Gabriel Gottgtroy Zigolis]

Pois é,
Não tinha me ligado nisso, tem razão Luan, cara, nesse caso utiliza a linda tag map, só cuidado com os atributos que vc está utlizando, para xHTML e HTML5 as formas são diferentes das utilizadas em HTML4.

Atenciosamente;

Gabriel Gottgtroy Zigolis
Senior Front-End Developer
zigolis.com

[Thiago Hernandez Vieira]

Pois é, já tentei usar hexágonos e não consegui implementar os links neles devido a sobreposição.

Não estudei muito o canvas ainda, mas dando um "firebugada" nesse site :  http://beta.rallyinteractive.com/  e sobrepondo os elementos também não funciona legal. A sensação que dá é que são retangulos, apesar de suas formas triangulares. 

Parece que usar o map é o mais funcional

Thiago Hernandez

(11)9431-7959

portfólio: www.thiagohernandez.com.br

coletivo literário: www.prascucuias.com.br

[Luan Garcia]

Uma solução nada crossbrowser, é voce usar css3 pra fazer o link ter o formato da forma geometrica que voce quer... aplicando um overflow hidden, ficara xuxu beleza.

[Bruno Ramos]

Gabriel, era exatamente esse o problema que estava tentando explicar ;)

Tarcisio, usando maps dessa forma funcionaria se os dois triângulos fossem uma imagem só, mas cada triângulo precisa ser uma imagem diferente pois os fundos serão diferentes e puxados de um bd (o nome do arquivo), sem contar que ainda deverão possuir efeito em hover.

Thiago, o exemplo do site usa triangulos mas não sobrepõe, então acaba caindo no mesmo problema de cima.

Luan, quem dera poder não ser crossbrowser, mas nesse caso precisa :(

Uma outra opção que pensei também foi de usar js para ver a posição do mouse e mudar o z-index de acordo.. mas isso me parece um tanto "forçado" haha

Alguém mais com alguma sugestão?

Bruno C. Ramos
http://www.brunoramos.eti.br

2012/10/9 Luan Garcia <con...@luangarcia.com>

[Eduardo Bohrer]

No caso das duas imagens um position:absolute e você consegue alinhar facinho.

Agora quanto ao link, acho que só com map mesmo.

Enfim.

2012/10/9 Bruno Ramos <brun...@gmail.com>

[Luan Garcia]

Bom, o que vc pode fazer, é tentar solucionar isso com js (das gambis, acho que é a menos pior).

Dentro do box, vc verifica a poisicao do ponteiro do mouse. Se estiver menor que a metade da largura total, vc aumenta o z-index da imagem da esquerda. Se a posicao for maior que a metade da largura total, vc aumenta o z-index da imagem que estiver a direita...

Fazendo uma estrutura html bem "generica" vc pode resolver esse problema com um unico script e bem simples por sinal.

abs!

[Bruno Ramos]

Luan, eu pensei nessa possibilidade, como comentei anteriormente, mas e no caso de mobiles que não há ponteiros? Talvez se chamar a função de verificação em cada clique naquela contexto, mas realmente é a única solução que eu vejo haha

[Gabriel Gottgtroy Zigolis]

Meu querido,
Se você estiver pensando em dar suporte para mobiles em geral, deveria conversar com o designer para rever essa solução, até porque ela não passa a sensação de ser uma área de clique ao usuário, além de estar te dando essa pequena dor de cabeça para encontrar uma solução.

Atenciosamente;

Gabriel Gottgtroy Zigolis
Senior Front-End Developer
zigolis.com

[Luan Garcia]

Concordo com o Gabriel.

Mas dando suporte a mobiles, vc pode usar o css3  e apresentar a primeira solucao que disse la em cima.

abs!

[Thiago Hernandez Vieira]

Luan, vou te confessar que não entendi como seria usando CSS3.

Seria usando canvas?

[Luan Garcia]

Não.

http://felipenmoura.org/pt/articles/creating-geometric-forms-using-divs-and-css3/

deem uma olhada.

[Luan Garcia]

Cara, sinceramente acho que isso tb nao funcionaria... mas vale tentar heim.

[Bruno Ramos]

Bom, eu convenço o cara a criar outro layout para mobiles.. hahaha vai ser melhor
Mas obrigado a todos pelas dicas! E não conhecia essas formas geométricas do CSS3, valeu pelo share ;)

Abraço!