Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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">
Grato.
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.
É pra aperecer no FF sim, verifique se você definiu altura, largura, etc...Qualquer coisa poste o código da div aqui.Abraço
Deu certo, precisava colocar no ar, local ele não quis funcionar.valeu.
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>
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