Onmouseover em imagem mapeada abrindo outra imagem: dúvida.

Ernesto Neto · Junho 26, 2012

Olá pessoal.

Não sou profissional, apenas criei um site em HTML usando o FrontPage para uma associação de amigos motociclistas.

Tenho procurado – sem sucesso – um script java que possibilite que ao clicar em uma área mapeada de uma imagem grande, apareça uma outra imagem menor no centro da página. Explicando melhor: tenho uma imagem 1200x900 com uma árvore genealógica com nomes, e desejo que ao clicar sobre um nome das pessoas da imagem da árvore, surja uma mini imagem da pessoa no centro da página.

O script DIV abaixo postado seria um exemplo, mas ele parte do clique sobre um texto e não sobre uma área mapeada:

<html>

<head>

<title>Criar uma DIV igual a uma janela Popup</title>

<style>

#pop{display:none;position:absolute;top:50%;left:50%;margin-left:-150px;margin-top:-100px;padding:10px;width:300px;height:200px;border:1px solid #d0d0d0}

</style>

</head>

<body>

<a href="#" onclick="document.getElementById('pop').style.display='none';">[Fechar]</a>

<br />

Agora coloque o estilo dessa div.

</div>

<a href="#" onclick="document.getElementById('pop').style.display='block';">Mostra</a>

</body>

Agradeço se puderem me ajudar.

fiote · Junho 27, 2012

Do mesmo jeito que você coloca o onclick no link, você pode colocar em qualquer outra coisa.

<div style='width:500px; height:500px; border:1px solid black; background:red; position:relative'>
    
    <div onClick="document.getElementById('pop').style.display='block';" style='position:absolute; top:300px; left:50px; width:50px; height:50px; background:white; cursor:pointer'>
        Clique aqui!
    </div>

    <div id='pop' style='display:none'>
        pushpop lol!
    </div>
    
</div>

Clique aqui pra ver o exemplo no fiddle.

;)

Ernesto Neto · Junho 27, 2012

Do mesmo jeito que você coloca o onclick no link, você pode colocar em qualquer outra coisa.

<div style='width:500px; height:500px; border:1px solid black; background:red; position:relative'>
    
    <div onClick="document.getElementById('pop').style.display='block';" style='position:absolute; top:300px; left:50px; width:50px; height:50px; background:white; cursor:pointer'>
        Clique aqui!
    </div>

    <div id='pop' style='display:none'>
        pushpop lol!
    </div>
    
</div>

Clique aqui pra ver o exemplo no fiddle.

;)

Obrigado fiote, vou tentar e posto o resultado aqui.

Ernesto Neto · Junho 28, 2012

Bom, não consegui :blush:

Se ajudar, a pagina que quero obter o efeito está aqui: http://spsr.hdfree.com.br/genealog.htm

Note que a imagem está mapeada, mas ao clicar sobre cada área coloquei um link que carrega outra página já com a miniatura da foto correspondente ao nome, simulando o efeito que eu queria obter (bem, 3 nomes ainda estão sem as fotos: colombo, coyote e anna).

Eu queria que a cada nome que fosse clicado surgisse a miniatura (pode ser num lugar fixo, tipo no centro da página) e a cada clique fosse trocando a foto.

Não sei como fazer e nem sei se é possível...

Entrar

Onmouseover em imagem mapeada abrindo outra imagem: dúvida.

Pergunta

Ernesto Neto

Link para o comentário

Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

fiote

Link para o comentário

Compartilhar em outros sites

Ernesto Neto

Link para o comentário

Compartilhar em outros sites

Ernesto Neto

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades