Mouse Hover + Icon Aparece + Texto também

[AnarchY 1]

Olá Pessoal =D

 

Estou precisando de uma ajuda "gigantesca". Fui convidado para desenvolver um Atlas de Imagenologia (Raio-X) da Faculdade de Odontologia onde estudo.

 

O Atlas será para alunos, então a ideia é forçar eles a descobrirem as estruturas que estão no raio-x. Ela quer fazer da seguinte forma:

 

- Você tem uma imagem semelhante a que está abaixo, o usuário vai passar o mouse em uma determinada região da imagem, e ao passar sobre esta região, vai surgir um ícone (seta vermelha) e um texto (sem div sem nada) descrevendo o que é aquela região.

 

Como eu não manjo muito de CSS, até achei alguns modelos que mexem com <area> do html, mas não consegui produzir nada palpável.

 

** Preciso de um código simples, que eu possa inserir em aproximadamente 80 imagens. Vou ter mais ou menos 2~3 ícones (seta, círculo, quadrado,...).

 

 

ESQUEMA DE COMO EU PRECISO QUE O CÓDIGO SEJA:

http://imgur.com/kXq9Xww

 

Na imagem abaixo, já está inserido as setas e o quadrado vermelho. Isso não deverá aparecer de cara, somente após o aluno passar o mouse por cima.

[leonardo de andrade baessa 16]

Seria algo parecido com isso

http://davidlynch.org/projects/maphilight/docs/

mas ao passar o mouse além de marcar a região ainda aparece um divulgação?!

[AnarchY 1]

Seria algo parecido com isso

http://davidlynch.org/projects/maphilight/docs/

mas ao passar o mouse além de marcar a região ainda aparece um divulgação?!

 

Isso mesmo, eu inclusive já tinha salvo esse site.

 

Você tem alguma ideia de como posso inserir esse código ? Estou confuso =D

[leonardo de andrade baessa 16]

olha esse aqui!

http://red-team-design.com/image-map-with-css3-jquery-tooltips/

 

acho que vai ser bem mais pratico pra você só vai marcar dentro de cada div a distancia correta

Ex.:

data-xpos="450" data-ypos="110"

essa é a distancia dentro de uma das divulgações quando passa o mouse o tooltip ativa.

cria as divulgações contendo as informações e bota correto o lugar de cada uma dentro da imagen em distancia.

[AnarchY 1]

olha esse aqui!

http://red-team-design.com/image-map-with-css3-jquery-tooltips/

 

acho que vai ser bem mais pratico pra você só vai marcar dentro de cada div a distancia correta

Ex.:

data-xpos="450" data-ypos="110" [/size]

essa é a distancia dentro de uma das divulgações quando passa o mouse o tooltip ativa.[/size]

[/size]

cria as divulgações contendo as informações e bota correto o lugar de cada uma dentro da imagen em distancia. [/size]

 

Isso eu já consegui com um plugin pra wordpress que uso, o problema é que eu quero que além do texto, saia também uma imagem na posição próxima ao texto, lembrando que eu não quero uma div, apenas o texto.

 

Preciso :

 

1 - Que apareça um ícone de uma seta na posição onde está a estrutura

2 - Simultaneamente apareça também um tooltip sem a div

 

btw, vou ver se consigo fazer algo com esse código =~

 

 

+ Alguém pode me ajudar?!!!

[stromdh 15]

aqui tem uma resposta só com css. ele vai aparecer no lado direito, mas tu pode posicionar onde tu quiser com css, faz os testes pelo console. te liga:

<a href="#">teste</a>

css:

a {
    display: block;
    text-decoration: none;
    width: 55%;
    margin: 0 auto 20px;
    font: 12px arial, tahoma, sans-serif;
    color: #000;
}

a::after {
    
    vertical-align: middle;
    color: #000;
    background: #4679bd;
    padding: 5px;
    margin-left: 10px;
    width: 150px;
	height: 60px;
    float: right;
    color: #FFF;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
}

a:hover::after {
    background-image: url("http://forum.imasters.com.br/public/style_images/imasters-2014/logo.png");
	background-repeat: no-repeat;
	content: "teste";
    color: yellow;
	font-size: 26px;
}