Ir para conteúdo

POWERED BY:

Arquivado

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

Deep

tentando criar um ToolTip bem simples

Por , em Javascript

Recommended Posts

Deep    0

Deep
Postado

Estou tentando criar um ToolTip bem simples, não conheço muito javascript, mas estou tentando.

Vi alguns frameworks, mas achei muito complexo e tal.

 

O que eu fiz, quando colocar o mouse sobre uma imagem ele vai mostrar o conteúdo de uma DIV, se remover o mouse ele some, coloquei um hidden.

 

Mas agora, como eu faço para que quando eu colocar o mouse em cima da imagem, ele chama um .html externo, para ser algo mais dinâmico?

 

O que eu tenho até agora.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head><title>teste 10</title><style>.defaultStyle{font-size: 12px;font-family:tahoma;color:#FF6600;}.newStyle{font-size: 12px;font-family:arial;color:#CCCC00;text-decoration:underline;}#mostrar {width:300px;height: 300px;border:1px solid black;background:#FFF9D7;font:80% Verdana;123marging: 100px 100px 100px 100px;123padding: 100px 100px 100px 100px;position: relative;left: 32px;top: -24px;}</style><script>function toolTip_onMouseOver(){	var toolTipFC = document.getElementById("toolTipFC");	toolTipFC.className = "newStyle";	var mostrar = document.getElementById("mostrar");	mostrar.style.visibility = "visible";}function toolTip_onMouseOut(){	var toolTipFC = document.getElementById("toolTipFC");	toolTipFC.className = "defaultStyle"	var mostrar = document.getElementById("mostrar");	mostrar.style.visibility = "hidden";}</script></head><body><a name="" href="#" id="toolTipFC" class="defaultStyle" onmouseover="toolTip_onMouseOver()" onmouseout="toolTip_onMouseOut()"><img src="imagemTesteMouse.jpg" width="20" height="20" alt="#"/></a><div id="mostrar" style="visibility:hidden;">0123456789</div></body></html>

Grato.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eduardo Penna    0

Eduardo Penna
Postado

Bom dia amigo,

 

Para chamar um html externo basta você colocar um iframe dentro da div do tooltip:

 

<div><iframe src="externo.html"></iframe></div>
Só uma dica: no lugar de visibility, utilize display. O visibility deixa o objeto na tela como se fosse transparente, já o display "retira" o objeto da tela.

 

Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Deep    0

Deep
Postado

Valeu pela dica do dislplay.quando eu tento abrir o iframe pelo FF ele não mostra, ele só mostra no IE.Isso é algum Bug do FF?tem como arrumar?grato.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Deep    0

Deep
Postado

Me surgiu um novo problema.

Quando eu coloco duas imagens, minhas duas imagens mostram o mesmo arquivo na mesma posição, como eu poderia arrumar isso, tem como arrumar esse problema?

<html><head><title>teste 14</title><style>.defaultStyle{font-size: 12px;font-family:tahoma;color:#FF6600;}.newStyle{font-size: 12px;font-family:arial;color:#CCCC00;text-decoration:underline;}#mostrar {width:300px;height: 300px;border:1px solid black;background:#FFF9D7;font:80% Verdana;position: absolute;float:right;margin:0px 0px 15px 20px;}</style><script>function toolTip_onMouseOver(){	var toolTipFC = document.getElementById("toolTipFC");	toolTipFC.className = "newStyle";	var mostrar = document.getElementById("mostrar");	mostrar.style.display = "block";}function toolTip_onMouseOut(){	var toolTipFC = document.getElementById("toolTipFC");	toolTipFC.className = "defaultStyle"	var mostrar = document.getElementById("mostrar");	mostrar.style.display = "none";}</script></head><body><img src="imagemTesteMouse.jpg" width="20" height="20" id="toolTipFC" class="defaultStyle" onmouseover="toolTip_onMouseOver()" onmouseout="toolTip_onMouseOut()" /><div id="mostrar" style="display:none"><iframe src="exemploHTMLExterno2.htm" scrolling=no frameborder=no height="100%" width="100%"></iframe></div><hr /><img src="imagemTesteMouse.jpg" width="20" height="20" id="toolTipFC" class="defaultStyle" onmouseover="toolTip_onMouseOver()" onmouseout="toolTip_onMouseOut()" /><div id="mostrar" style="display:none"><iframe src="exemploHTMLExterno4.htm" scrolling=no frameborder=no height="100%" width="100%"></iframe></div></body></html>

Compartilhar este post

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

Informação importante

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

  Aceito