Cambiar color de fondo de la etiqueta <title> en los enlaces

**lalo_a_link** · 03-oct-2009, 20:31

Hola a todos,

Después de tanto trastear con unos de mis blogs, resulta algo difícil colocarle un buen titulo ha este tema, ya que por más que lo busque resulta verdaderamente dificultoso localizarlo, y más sacar el código exacto.

Esto sirve para cambiar la caja/cuadro de descripción que se le agrega un link, un ejemplo sería así:

Código:

<a title="ForoBeta" href="http://forobeta.com">ForoBeta</a>

La diferencia de este cambio, es la siguiente:

Normal - por defecto:

Nuevo, un mejor estilo:

Comenzamos, primero hay que localizar y abrir el archivo header.php del blog, recomiendo el header para que se cargue inmediatamente el estilo que se le agregara a la etiqueta title, posteriormente colocaremos el siguiente código dentro de las etiquetas <head></head>:

Código HTML:

<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;
		}
	}

// 2003-11-19 sidesh0w
// 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);
			}
		}

	// 2003-03-25 Peter Janes
	// 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);
					}
				}
			}
		}
	}


// by Scott Andrew
// 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);
		}
	}


// 2003-11-19 sidesh0w
// 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);

	// 2003-11-18 Dunstan Orchard
	// 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)
	{
	// 2003-11-19 sidesh0w
	// 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>

Y listo!!!, esto hara que se cargue inmediatamente en el header del blog.

Por supuesto que hay otra manera de colocarlo, puedes agregar el código que se encuentra adentro de las siguientes etiquetas <style type="text/css"> y </style> en tu archivo .css y borrarlo de ahi, igual con la parte de arriba del script, puedes crear un archivo .js y colocarle todo el código en Javascript de las etiquetas <script type="text/javascript"> y </script>, posteriormente puedes colocar una línea en tu header como la siguiente:

Código HTML:

<script type="text/javascript" src="http://tusitioweb.com/dondequieras/nombredelarchivo.js"></script>

Aunque esto ya sería algo intermedio de realizar, por lo que recomiendo los primeros pasos de arriba.

Salu2

**Cristhian** · 03-oct-2009, 20:33

Excelente aporte lalo, va Reputación, muchas gracias.

**danielmd** · 03-oct-2009, 20:34

Mas bien sería, dar formato a los tooltips de los enlaces. La etiqueta <title> es otra cosa.

Aquí tienen otra opción con Sweet Titles
http://www.dustindiaz.com/sweet-titles/

**lalo_a_link** · 03-oct-2009, 20:43

Holasss,

Gracias, exacto danielmd, recuerdo que era algo relacionado con "Tips", pero veo que es Tooltips.

Aunque dejame decirte que resulta difícil que alguien que no sepa tanto de estos temas entre a Google y le ponga "Cambiar color de los Tooltips" no crees?.

Bueno de todas maneras que lo modifique Cristhian, dependiendo como lo vean, pss yo lo busque de otra forma pero era relacionado en "como cambiar el cuadro de texto de los links", hasta que di...

Salu2

Tema: Cambiar color de fondo de la etiqueta <title> en los enlaces

Herramientas

Información del tema

Users Browsing this Thread

Temas similares

Acerca de tíldes en el Title e imágenes

Cambiar color infolinks

Etiqueta <title> y recomendaciones

Sobre cambiar el color de letra de mis posts en wordpress

Enlazar una imagen de fondo

Normas de publicación