Ir para conteúdo

POWERED BY:

Arquivado

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

uiLhian

Personalizando a tag "title"

Por , em Javascript

Recommended Posts

uiLhian    1

uiLhian
Postado

Bom fuçando na net, encontrei esse script que personaliza as tags que contem o atributo "title", só que fui testar o script e não funciona... caso alguem saiba o que há de errado, agradeço!

 

var qTipTag = new Array("a", "abbr", "acronym");var qTipX = -30;var qTipY = 25;tooltip = {  name : "qTip",  offsetX : qTipX,  offsetY : qTipY,  tip : null}tooltip.init = function () {	var tipNameSpaceURI = "http://www.w3.org/1999/xhtml";	if(!tipContainerID){ var tipContainerID = "qTip";}	var tipContainer = document.getElementById(tipContainerID);	if(!tipContainer) {	  tipContainer = document.createElementNS ? document.createElementNS(tipNameSpaceURI, "div") : document.createElement("div");		tipContainer.setAttribute("id", tipContainerID);	  document.getElementsByTagName("body").item(0).appendChild(tipContainer);	}	if (!document.getElementById) return;	this.tip = document.getElementById (this.name);	if (this.tip) document.onmousemove = function (evt) {tooltip.move (evt)};	var a, sTitle;	for (var j = 0; j < qTipTag.length; j ++) { // loop que vai implementar o tool-tip nas tags escolhidas		anchors = document.getElementsByTagName ( qTipTag[j] ); // pegamos a tag escolhida				for (var i = 0; i < anchors.length; i ++) { // atribuicao dos tool tips			a = anchors[i];			sTitle = a.getAttribute("title"); // pegamos o atributo title			if(sTitle) { // se estiver setado				a.setAttribute("tiptitle", sTitle);				a.removeAttribute("title");				a.onmouseover = function() {tooltip.show(this.getAttribute('tiptitle'))};				a.onmouseout = function() {tooltip.hide()};			}		}// fim do for	}}tooltip.move = function (evt) {	var x=0, y=0;	if (document.all) {// IE		x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;		y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;		x += window.event.clientX;		y += window.event.clientY;			} else {//Bons Navegadores		x = evt.pageX;		y = evt.pageY;	}	this.tip.style.left = (x + this.offsetX) + "px";	this.tip.style.top = (y + this.offsetY) + "px";}tooltip.show = function (text) {	if (!this.tip) return;	this.tip.innerHTML = text;	this.tip.style.display = "block";}tooltip.hide = function () {	if (!this.tip) return;	this.tip.innerHTML = "";	this.tip.style.display = "none";}window.onload = function () {	tooltip.init ();}
CSS

 

#qTip {  padding: 3px;  border: 1px solid #666;  border-right-width: 2px;  border-bottom-width: 2px;  display: none;  background: #999;  color: #FFF;  font: bold 9px Verdana, Arial, Helvetica, sans-serif;  text-align: left;  position: absolute;  z-index: 1000;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carlos Vital    0

Carlos Vital
Postado

cara eu testei aqui e funcionou no IE, Opera e Firefox 2.

o problema que eu achei através do firebug é esse:

for (var j = 0; j < qTipTag.length; j ++) { // loop que vai implementar o tool-tip nas

 

tags escolhidas

essa tags escolhidas devia está na mesma linha que for (var j = 0; j < qTipTag.length; j ++) { // loop que vai implementar o tool-tip nas.

depois que eu consertei isso, funcionou normalmente nesses três navegadores.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carlos Vital    0

Carlos Vital
Postado

dei uma reciclada nesse script e ficou assim:

<!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 language="JavaScript" type="text/javascript">

 

// Tooltip

var tooltip = '';

function init_tooltip()

{

 

tooltip = document.getElementById('tooltip');

document.onmousemove = move_tooltip;

 

ancora = document.getElementsByTagName('a');

 

for(i = 0; i < ancora.length; i ++){

a = ancora;

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();

}

}

}

}

 

function mostra_tooltip(texto)

{

tooltip.innerHTML = texto;

tooltip.style.display = 'block';

}

 

function oculta_tooltip()

{

tooltip.innerHTML = '';

tooltip.style.display = 'none';

}

 

function 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 Tooltip

 

window.onload = function()

{

init_tooltip();

}

 

</script>

<style type="text/css">

<!--

#tooltip {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

color: #000000;

text-decoration: none;

margin: 0px;

padding: 3px;

border: 1px solid #333333;

display: none;

background-color: #FFFFFF;

}

-->

</style>

</head>

 

<body>

<a href="#" title="Carlos">Carlos</a>

<br />

<br />

<br />

<br />

<br />

<br />

<a href="#" title="Henrique">Henrique</a>

 

 

<div id="tooltip"></div>

 

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carlos Vital    0

Carlos Vital
Postado

é só você adaptar né... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

olha se isso resolve seu problema:

<!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 language="JavaScript" type="text/javascript">// Tooltipvar tooltip;var tagtip = new Array('a', 'abbr', 'acronym');function init_tooltip(){	tooltip = document.getElementById('tooltip');	document.onmousemove = move_tooltip;		for(j = 0; j < tagtip.length; j ++){			ancora = document.getElementsByTagName(tagtip[j]);				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();				}			}		}	}}function mostra_tooltip(texto){	tooltip.innerHTML = texto;	tooltip.style.display = 'block';}function oculta_tooltip(){	tooltip.innerHTML = '';	tooltip.style.display = 'none';}function 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(); }</script><style type="text/css"><!--#tooltip {	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	color: #000000;	text-decoration: none;	margin: 0px;	padding: 3px;	border: 1px solid #333333;	display: none;	background-color: #FFFFFF;}--></style></head><body><a href="#" title="Carlos">Carlos</a><br /><br /><br /><br /><br /><br /><a href="#" title="Henrique">Henrique</a><br /><br /><br /><br /><br /><br /><acronym title="acronym">acronym</acronym><br /><br /><br /><br /><br /><br /><abbr title="abbr">abbr</abbr><div id="tooltip"></div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ronaldo Bitencourt    0

Ronaldo Bitencourt
Postado

eu sei, só q eu tava aproveitando o tópico pra perguntar, ja oq eu quero tbm é personalizar o title

 

E ai nvGullit td certo?

 

Bem respondendo sua pergunta, eu alguns mêses atrás escrevi um post em meu blog de SEO onde eu dei dicas de como personalizar o título e meta-tags de suas páginas usando php.

 

Vale dar uma conferida que tenho certeza que irá te ajudar. :)

 

 

Valeu!! até mais !!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mário Monteiro    179

Mário Monteiro
Postado

Ronaldo Bitencourt

 

Sei que a intenção foi boa mas este topico é de 2007

 

Se deseja realmente ajudar o forúm responda em topicos recentes onde os usuarios ainda precisam da resposta

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