Ir para conteúdo

POWERED BY:

Arquivado

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

Fixx

ToolTip

Por , em Javascript

Recommended Posts

Fixx    0

Fixx
Postado

BOA TARDE!PRECISO SABER COMO FAÇO PARA AO PASSAR O MOUSE SOBRE UM LINK(TEXTO)APARECER UMA IMAGEM EM DETERMINADA POSIÇAO NA PÁGINA...SEM REFRESH!ABRAÇOS!

Compartilhar este post

Link para o post
Compartilhar em outros sites

benck    2

benck
Postado

Ai vai um exemplo feito no DreamWeaver

 

<html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script language="JavaScript" type="text/JavaScript"><!--function MM_reloadPage(init) {  //reloads the window if Nav4 resized  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {	document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();}MM_reloadPage(true);function MM_findObj(n, d) { //v4.01  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);  if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_showHideLayers() { //v6.0  var i,p,v,obj,args=MM_showHideLayers.arguments;  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];	if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }	obj.visibility=v; }}//--></script></head><body><div id="Layer1" style="position:absolute; left:244px; top:42px; width:191px; height:100px; z-index:1; visibility: hidden;"><img src="http://www.terra.com.br/logo.gif"></div><a href="#" onMouseOver="MM_showHideLayers('Layer1','','show')" onMouseOut="MM_showHideLayers('Layer1','','hide')">Link Teste</a></body></html>

Espero que seja isto que você queira...

 

Valeu!!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carlos Vital    0

Carlos Vital
Postado

Caso queira que seja com JavaScript...

A um tempo atrás pequei um script na net e dei uma modificada nele e saiu isso.

// Tooltipvar tooltip;var tagtip = new Array('a', 'abbr', 'acronym');function init_tooltip(){	// Cria a div tooltip	tooltip = document.createElement('div');	tooltip.setAttribute('id', 'tooltip');	document.body.appendChild(tooltip);		document.onmousemove = move_tooltip;		// Busca as tags	for(j = 0; j < tagtip.length; j ++){			ancora = document.getElementsByTagName(tagtip[j]);				// Busca o atributo title		for(i = 0; i < ancora.length; i ++){			a = ancora[i];			texttitle = a.getAttribute('title');			if(texttitle){				a.setAttribute("tTitle", texttitle);				a.removeAttribute("title");				a.onmouseover = function()				{					t = this.getAttribute('tTitle');					mostra_tooltip(t);				}				a.onmouseout = function()				{					oculta_tooltip();				}			}		}	}}// Exibe a tooltipfunction mostra_tooltip(texto){	tooltip.innerHTML = texto;	tooltip.style.display = 'block';}// Oculta a tooltipfunction oculta_tooltip(){	tooltip.innerHTML = '';	tooltip.style.display = 'none';}// pega a posição do mouse e posiciona a tooltipfunction move_tooltip(e){	e = e || window.event;	if(e.pageX || e.pageY){		x = e.pageX;		y = e.pageY;	}else{		x = event.clientX;		y = event.clientY;	}		tooltip.style.left = (x+10)+'px';	tooltip.style.top = (y-25)+'px';	tooltip.style.position = 'absolute';		return true;}// Fim da Tooltipwindow.onload = function(){ 	init_tooltip(); }
como funciona:

o script busca na página pelo atributo title das tags html listadas na seguinte linha, var tagtip = new Array('a', 'abbr', 'acronym');

então ai ele pega o atributo title dessas tags e exibe o seu valor dentro da div tooltip.

e não precisa criar uma div chamada tooltip no HTML não, pois o script já cria essa div, basta apenas você formatar essa tooltip como você quiser.

exemplo prático:

<!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript" src="tooltip.js"></script></head><body><a href="#" title="Testando">teste</a><br  /><br  /><br  /><a href="#" title="Testando Mais Uma Vez">teste2</a></body></html>

Então é isso.

 

qualquer coisa poste ai. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

 

 

p.s: O script foi testado no IE 6, Firefox 2, e Opera 9

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