Jump to content


lprtrindade

Member Since 13/12/2006
Offline Last Active 06/07/2010, 03:16
-----

Topics I've Started

Ajuda Com Title

07/05/2010, 03:37

Ae pessoal blz !?
Seguinte... Eu tenho um código em javascript e CSS (ambos funcionam juntos) aqui que quando eu passo o mouse em cima de um link, ele me mostra um balão com a descrição que eu coloque em TITLE, dentro da TAG do A HREF.

Para terem idéia do que eu estou falando, aqui tem um demo, dele funcionando. Basta passarem o mouse em cima dos links: http://demo.1976design.com/nicetitles/

O código completo para o efeito segue abaixo:

<script type="text/javascript"> 
<!-- 
// set the namespace
var XHTMLNS = 'http://www.w3.org/1999/xhtml';
var CURRENT_NICE_TITLE;
 
// browser sniff
var browser = new Browser();
 
 
 
// determine browser and version.
function Browser()
	{
	var ua, s, i;
 
	this.isIE = false;
	this.isNS = false;
	this.version = null;
 
	ua = navigator.userAgent;
 
	s = 'MSIE';
	if ((i = ua.indexOf(s)) >= 0)
		{
		this.isIE = true;
		this.version = parseFloat(ua.substr(i + s.length));
		return;
		}
 
	s = 'Netscape6/';
	if ((i = ua.indexOf(s)) >= 0)
		{
		this.isNS = true;
		this.version = parseFloat(ua.substr(i + s.length));
		return;
		}
 
	// treat any other 'Gecko' browser as NS 6.1.
	s = 'Gecko';
	if ((i = ua.indexOf(s)) >= 0)
		{
		this.isNS = true;
		this.version = 6.1;
		return;
		}
	}
 
 
 
// set delay vars to emulate normal hover delay
var delay;
var interval = 0.60;
 
 
 
// this function runs on window load
// it runs through all the links on the page as starts listening for actions
function makeNiceTitles()
	{
	if (!document.createElement || !document.getElementsByTagName) return;
	if (!document.createElementNS)
		{
		document.createElementNS = function(ns, elt)
			{
			return document.createElement(elt);
			}
		}
 
	// do regular links
	if (!document.links)
		{
		document.links = document.getElementsByTagName('a');
		}
	for (var ti=0; ti<document.links.length; ti++)
		{
		var lnk = document.links[ti];
		if (lnk.title)
			{
			lnk.setAttribute('nicetitle', lnk.title);
			lnk.removeAttribute('title');
			addEvent(lnk, 'mouseover', showDelay);
			addEvent(lnk, 'mouseout', hideNiceTitle);
			addEvent(lnk, 'focus', showDelay);
			addEvent(lnk, 'blur', hideNiceTitle);
			}
		}
 
	// do ins and del tags
	var tags = new Array(2);
	tags[0] = document.getElementsByTagName('ins');
	tags[1] = document.getElementsByTagName('del');
	for (var tt=0; tt<tags.length; tt++)
		{
		if (tags[tt])
			{
			for (var ti=0; ti<tags[tt].length; ti++)
				{
				var tag = tags[tt][ti];
				if (tag.dateTime)
					{
					var strDate = tag.dateTime;
					// HTML/ISO8601 date: yyyy-mm-ddThh:mm:ssTZD (Z, -hh:mm, +hh:mm)
					var month = strDate.substring(5,7);
					var day = strDate.substring(8,10);
					if (month[0] == '0')
						{
						month = month[1];
						}
					if (day[0] == '0')
						{
						day = day[1];
						}
					var dtIns = new Date(strDate.substring(0,4), month-1, day, strDate.substring(11,13), strDate.substring(14,16), strDate.substring(17,19));
					tag.setAttribute('nicetitle', (tt == 0 ? 'Added' : 'Deleted') + ' on ' + dtIns.toString());
					addEvent(tag, 'mouseover', showDelay);
					addEvent(tag, 'mouseout', hideNiceTitle);
					addEvent(tag, 'focus', showDelay);
					addEvent(tag, 'blur', hideNiceTitle);
					}
				}
			}
		}
	}
 
 
 
// add an eventlistener to browsers that can do it somehow.
function addEvent(obj, evType, fn)
	{
	if (obj.addEventListener)
		{
		obj.addEventListener(evType, fn, true);
		return true;
		}
	else if (obj.attachEvent)
		{
		var r = obj.attachEvent('on'+evType, fn);
		return r;
		}
	else
		{
		return false;
		}
	}
 
 
 
function findPosition(oLink)
	{
	if (oLink.offsetParent)
		{
		for (var posX = 0, posY = 0; oLink.offsetParent; oLink = oLink.offsetParent)
			{
			posX += oLink.offsetLeft;
			posY += oLink.offsetTop;
			}
		return [posX, posY];
		}
	else
		{
		return [oLink.x, oLink.y];
		}
	}
 
 
 
function getParent(el, pTagName)
	{
	if (el == null)
		{
		return null;
		}
	// gecko bug, supposed to be uppercase
	else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase())
		{
		return el;
		}
	else
		{
		return getParent(el.parentNode, pTagName);
		}
	}
 
 
 
// trailerpark wrapper function
function showDelay(e)
	{
    if (window.event && window.event.srcElement)
		{
        lnk = window.event.srcElement
		}
	else if (e && e.target)
		{
        lnk = e.target
		}
    if (!lnk) return;
 
	// lnk is a textnode or an elementnode that's not ins/del
    if (lnk.nodeType == 3 || (lnk.nodeType == 1 && lnk.tagName.toLowerCase() != 'ins' && lnk.tagName.toLowerCase() != 'del'))
		{
		// ascend parents until we hit a link
		lnk = getParent(lnk, 'a');
		}
	
	delay = setTimeout("showNiceTitle(lnk)", interval * 1000);
	}
 
 
 
// build and show the nice titles
function showNiceTitle(link)
	{
    if (CURRENT_NICE_TITLE) hideNiceTitle(CURRENT_NICE_TITLE);
    if (!document.getElementsByTagName) return;
 
    nicetitle = lnk.getAttribute('nicetitle');
    
    var d = document.createElementNS(XHTMLNS, 'div');
    d.className = 'nicetitle';
    tnt = document.createTextNode(nicetitle);
    pat = document.createElementNS(XHTMLNS, 'p');
    pat.className = 'titletext';
    pat.appendChild(tnt);
 
	// added in accesskey info
	if (lnk.accessKey)
		{
        axs = document.createTextNode(' [' + lnk.accessKey + ']');
		axsk = document.createElementNS(XHTMLNS, 'span');
        axsk.className = 'accesskey';
        axsk.appendChild(axs);
		pat.appendChild(axsk);
		}
    d.appendChild(pat);
 
    if (lnk.href)
		{
        tnd = document.createTextNode(lnk.href);
        pad = document.createElementNS(XHTMLNS, 'p');
        pad.className = 'destination';
        pad.appendChild(tnd);
        d.appendChild(pad);
		}
    
    STD_WIDTH = 300;
 
	if (lnk.href)
		{
        h = lnk.href.length;
		}
	else
		{
		h = nicetitle.length;
		}
	
    if (nicetitle.length)
		{
		t = nicetitle.length;
		}
	
    h_pixels = h*6;
	t_pixels = t*10;
    
    if (h_pixels > STD_WIDTH)
		{
        w = h_pixels;
		}
	else if ((STD_WIDTH>t_pixels) && (t_pixels>h_pixels))
		{
        w = t_pixels;
		}
	else if ((STD_WIDTH>t_pixels) && (h_pixels>t_pixels))
		{
        w = h_pixels;
		}
	else
		{
        w = STD_WIDTH;
		}
        
    d.style.width = w + 'px';    
 
    mpos = findPosition(lnk);
    mx = mpos[0];
    my = mpos[1];
    
    d.style.left = (mx+15) + 'px';
    d.style.top = (my+35) + 'px';
 
    if (window.innerWidth && ((mx+w) > window.innerWidth))
		{
        d.style.left = (window.innerWidth - w - 25) + 'px';
		}
    if (document.body.scrollWidth && ((mx+w) > document.body.scrollWidth))
		{
        d.style.left = (document.body.scrollWidth - w - 25) + 'px';
		}
    
    document.getElementsByTagName('body')[0].appendChild(d);
 
    CURRENT_NICE_TITLE = d;
	}
 
 
 
 
function hideNiceTitle(e)
	{
	// clearTimeout 
	if (delay) clearTimeout(delay);
	if (!document.getElementsByTagName) return;
	if (CURRENT_NICE_TITLE)
		{
		document.getElementsByTagName('body')[0].removeChild(CURRENT_NICE_TITLE);
		CURRENT_NICE_TITLE = null;
		}
	}
 
window.onload = function(e) {
makeNiceTitles();
}
-->
</script>
 
<style type="text/css"> 
<!--
div.nicetitle {
	background-color: #333;
	color: #fff;
	font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif;
	left: 0;
	padding: 4px;
	position: absolute;
	top: 0;
	width: 25em;
	z-index: 20;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-topleft: 0;
	-moz-border-radius-topright: 10px;
	-moz-opacity: .87;
	}
 
div.nicetitle p {
    margin: 0;
	padding: 0 3px;
	-moz-opacity: 1;
}
 
div.nicetitle p.destination {
    font-size: 9px;
    padding-top: 3px;
	text-align: left;
	-moz-opacity: 1;
}
 
div.nicetitle p span.accesskey {
	color: #d17e62;
}
-->
</style>

Bem o que acontece na verdade é o seguinte... Se vocês repararem, ao passar o mouse e aparecer o balão, ele aparece o texto que eu utilizei em TITLE porém, aparece em baixo o "Link" que será remetido ao clicar.

As duas coisas que eu gostaria de saber (se alguém puder me ajudar) são:

1 - Como REMOVER o link do balão. Deixando tão somente o Texto inserido em TITLE, mais nada.

2 - Ao invés de remover, como trocar aquele espaço para usar um texto por exemplo. Tipo, aparece em cima a descrição inserida em TITLE normalmente, e em baixo ao invés de aparecer o link, apareça um outro texto qualquer que eu coloque. Tem como fazer isto !?

Gostaria que as duas perguntas fossem respondidas separadamente. Pois a primeira, só precisa remover uma linha do JavaScript, que infelizmente, como não entendo muito, não sei qual linha remover exatamente, sem estragar o código. Já na segunda pergunta, acredito que tenha que modificar e/ou inserir código no meio.

Peço desculpas pelo tamanho do post, mais agradeceria muito se alguém pudesse me ajudar; afinal, sei que isto, para quem tem um pouco mais de conhecimento em JavaScript, é mamão. ;)

Obrigado.

IPB Skin By Virteq