Jump to content


Photo

Legendas


  • Faça o login para participar
6 replies to this topic

#1 Alexx Ares

Alexx Ares

    Doutor

  • Usuários
  • 921 posts
  • Sexo:Masculino
  • Localidade:Santos - SP

Posted 24/07/2004, 09:18

Olá!

Estou usando o seguinte script:

<script language="javascript">
function show_tip(div) {
document.getElementById(div).style.visibility="visible";
document.getElementById(div).style.left=document.body.scrollLeft+event.clientX-150
document.getElementById(div).style.top=document.body.scrollTop+event.clientY-30
}
function hide_tip(div) {
document.getElementById(div).style.visibility="hidden";
}
</script>

Ele mostra uma legenda quando passa o mouse sobre um link!

O problema é que a legenda fica "fixa"... e eu gostaria que ela acompanhasse o movimento do mouse.

Como posso fazer isso!? :blink:

Valeu!!!!!!

(y)
||| PENSE NISSO ||| O ser humano, dizem, deve dormir 8 horas por dia. Isso equivale a 1 terço do seu dia dormindo. Agora imagine a seguinte situação: você, com 75 anos, prestes a morrer, olha para trás e percebe que dormiu 1 terço da sua vida, ou seja, 25 anos. Cara... 25 ANOS DORMINDO !!! Se você tem menos de 25 anos, simplesmente você vai dormir mais do que viveu até hoje!!! Pense nisso... e durma menos.

#2 Lengrat

Lengrat

    Mestre

  • Usuários
  • 638 posts
  • Sexo:Não informado

Posted 24/07/2004, 10:38

Veja se é isso que você quer
Tooltip
Usei na divulgação de um empreendimento lá da empresa.
Passe o mouse em " Conheça o Grupo Julio Bogoricin" ou em " Dúvidas ou sugestões"

Tenta isso:

CSS

<style type="text/css">
<!--
#dhtmltooltip{
position: absolute;
width: 150px;
border: 1px solid black;
padding: 2px;
background-color:#fff9bc;
visibility: hidden;
z-index: 100;
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
</style>

No Body

<div id="dhtmltooltip"></div>

<script type="text/javascript">

var offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=20 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function ddrivetip(thetext, thecolor, thewidth){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}

function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX : event.x+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.y+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20

var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000

//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
else if (curX<leftedge)
tipobj.style.left="5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetxpoint+"px"

//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}

function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}

document.onmousemove=positiontip

</script>

Na Imagem ( Eu prefiro colocar MAP na imagem e o codigo no area shape)

onMouseover="ddrivetip('TESTE.','', 200)"
onMouseout="hideddrivetip()";>

qqer coisa fala ae ^^

Edição feita por: Lengrat, 24/07/2004, 10:51.


#3 Lengrat

Lengrat

    Mestre

  • Usuários
  • 638 posts
  • Sexo:Não informado

Posted 24/07/2004, 10:49

Ou então você pode tentar esse efeito aqui ó:

Mais um exemplo de Tooltip

Vai em em exibir/codigo fonte e busque o código para ser inserido no bloco de CSS e o Script para ser inserido na sua imagem.


Mas para isto você precisará criar um arquivo chamado descricao.js, que eu vou postar aqui:


if (typeof border == 'undefined') { var border = "1";}

if (typeof offsetx == 'undefined') { var offsetx = 10;}

if (typeof offsety == 'undefined') { var offsety = 10;}

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

if (ie4) {
if (navigator.userAgent.indexOf('MSIE 5')>0) {
ie5 = true;
} else {
ie5 = false; }
} else {
ie5 = false;
}

var x = 0;
var y = 0;
var snow = 0;
var sw = 0;
var cnt = 0;
var dir = 1;
var tr = 1;
if ( (ns4) || (ie4) ) {
if (ns4) over = document.overDiv
if (ie4) over = overDiv.style
document.onmousemove = mouseMove
if (ns4) document.captureEvents(Event.MOUSEMOVE)
}

function drs(text) {
dts(1,text);
}

function drc(text, title) {
dtc(1,text,title);
}

function src(text,title) {
stc(1,text,title);
}

function dls(text) {
dts(0,text);
}

function dlc(text, title) {
dtc(0,text,title);
}

function slc(text,title) {
stc(0,text,title);
}

function dcs(text) {
dts(2,text);
}

function dcc(text, title) {
dtc(2,text,title);
}

function scc(text,title) {
stc(2,text,title);
}

function nd() {
if ( cnt >= 1 ) { sw = 0 };
if ( (ns4) || (ie4) ) {
if ( sw == 0 ) {
snow = 0;
hideObject(over);
} else {
cnt++;
}
}
}


function dts(d,text) {
txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=\""+backcolor+"\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\""+fcolor+"\"><TR><TD><FONT FACE=\"Arial,Helvetica\" COLOR=\""+textcolor+"\" SIZE=\"-2\">"+text+"</FONT></TD></TR></TABLE></TD></TR></TABLE>"
layerWrite(txt);
dir = d;
disp();
}

function dtc(d,text, title) {
txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=\""+backcolor+"\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD><SPAN ID=\"PTT\"><B><FONT COLOR=\""+capcolor+"\">"+title+"</FONT></B></SPAN></TD></TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\""+fcolor+"\"><TR><TD><SPAN ID=\"PST\"><FONT COLOR=\""+textcolor+"\">"+text+"</FONT><SPAN></TD></TR></TABLE></TD></TR></TABLE>"
layerWrite(txt);
dir = d;
disp();
}

function stc(d,text, title) {
sw = 1;
cnt = 0;
txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=\""+backcolor+"\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD><SPAN ID=\"PTT\"><B><FONT COLOR=\""+capcolor+"\">"+title+"</FONT></B></SPAN></TD><TD ALIGN=RIGHT><A HREF=../..//%22//%22 onMouseOver=\"cClick();\" ID=\"PCL\"><FONT COLOR=\""+closecolor+"\">Close</FONT></A></TD></TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\""+fcolor+"\"><TR><TD><SPAN ID=\"PST\"><FONT COLOR=\""+textcolor+"\">"+text+"</FONT><SPAN></TD></TR></TABLE></TD></TR></TABLE>"
layerWrite(txt);
dir = d;
disp();
snow = 0;
}

function disp() {
if ( (ns4) || (ie4) ) {
if (snow == 0) {
if (dir == 2) { // Centro
moveTo(over,x+offsetx-(width/2),y+offsety);
}
if (dir == 1) { // Direita
moveTo(over,x+offsetx,y+offsety);
}
if (dir == 0) { // Esquerda
moveTo(over,x-offsetx-width,y+offsety);
}
showObject(over);
snow = 1;
}
}
}

function mouseMove(e) {
if (ns4) {x=e.pageX; y=e.pageY;}
if (ie4) {x=event.x; y=event.y;}
if (ie5) {x=event.x+document.body.scrollLeft; y=event.y+document.body.scrollTop;}
if (snow) {
if (dir == 2) { // centro
moveTo(over,x+offsetx-(width/2),y+offsety);
}
if (dir == 1) { // direita
moveTo(over,x+offsetx,y+offsety);
}
if (dir == 0) { // esquerda
moveTo(over,x-offsetx-width,y+offsety);
}
}
}

function cClick() {
hideObject(over);
sw=0;
}

function layerWrite(txt) {
if (ns4) {
var lyr = document.overDiv.document
lyr.write(txt)
lyr.close()
}
else if (ie4) document.all["overDiv"].innerHTML = txt
if (tr) { trk(); }
}

function showObject(obj) {
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible"
}

function hideObject(obj) {
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden"
}

function moveTo(obj,xL,yL) {
obj.left = xL
obj.top = yL
}
function trk() {
if ( (ns4) || (ie4) ) {
nt=new Image(32,32); nt.src="http://www.nedstat.n...gif?name=ol2t";
bt=new Image(1,1); bt.src="http://www.bosrup.co...lib/o2/tr.gif";
refnd=new Image(1,1); refnd.src="http://www.nedstat.n...cument.referrer);

}
tr = 0;
}

#4 Alexx Ares

Alexx Ares

    Doutor

  • Usuários
  • 921 posts
  • Sexo:Masculino
  • Localidade:Santos - SP

Posted 24/07/2004, 17:37

Olá Lengrat!

O efeito é esse mesmo, obrigado!

Mas não um jeito mais "limpo" de se fazer?
Mais simplificado? :huh:

Valeu!!

(y)
||| PENSE NISSO ||| O ser humano, dizem, deve dormir 8 horas por dia. Isso equivale a 1 terço do seu dia dormindo. Agora imagine a seguinte situação: você, com 75 anos, prestes a morrer, olha para trás e percebe que dormiu 1 terço da sua vida, ou seja, 25 anos. Cara... 25 ANOS DORMINDO !!! Se você tem menos de 25 anos, simplesmente você vai dormir mais do que viveu até hoje!!! Pense nisso... e durma menos.

#5 Lengrat

Lengrat

    Mestre

  • Usuários
  • 638 posts
  • Sexo:Não informado

Posted 24/07/2004, 18:00

Hehehe..sabia que vc ia se espantar.
Eu também achei muito grande :P

Tanto o primeiro exemplo quanto o segundo,
eu retirei lá no Dynamic Drive

Tentei procurar algo mais Clean, mas não encontrei. ^^
Se vc encontrar, aproveita e me avisa (y)

Grande abraço camarada ^^"

#6 gURu

gURu

    Novato no fórum

  • Usuários
  • 24 posts
  • Sexo:Não informado

Posted 16/04/2005, 13:42

Alguem pode me dizer porque o meu não funciona?

#7 Alex Hiroshi

Alex Hiroshi

    Super Veterano

  • Ex-Admins
  • 4923 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP

Posted 16/04/2005, 18:58

deu erro? sim? qual?
para saber se deu erro no IE, basta olhar no canto inferior da pagina... vai ficar um icone amarelo.. é só clicar la e ver onde foi o erro..
Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq