Mostrar un preview de un href

matucasal · #1 (**permalink**) 28/05/2009, 08:48

Hola gente, soy un total novato en ajax.
Lest raigo mi duda para ver si pueden hacer algo jeje. Les cuento que esta es mi primer experiencia en ajax, y leyendo un tutorial, obtuve este codigo.

Código:

window.onload = initAll;
var xhr = false;
var xPos, yPos;


function initAll() {
	var allLinks = document.getElementsByTagName("a");

	for (var i=0; i< allLinks.length; i++) {
		allLinks[i].onmouseover = showPreview;
	}
}

function showPreview(evt) {
	if (evt) {
		var url = evt.target;
	}
	else {
		evt = window.event;
		var url = evt.srcElement;
	}
	xPos = evt.clientX;
	yPos = evt.clientY;
	
	if (window.XMLHttpRequest) {
		xhr = new XMLHttpRequest();
	}
	else {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e) { }
		}
	}

	if (xhr) {
		xhr.onreadystatechange = showContents;
		xhr.open("GET", url, true);
		xhr.send(null);
	}
	else {
		alert("Sorry, but I couldn't create an XMLHttpRequest");
	}
	return false;
}

function showContents() {
	if (xhr.readyState == 4) {
		if (xhr.status == 200) {
			var outMsg =  xhr.responseText;
		}
		else {
			var outMsg = "There was a problem with the request " + xhr.status;
		}

		var prevWin = document.getElementById("previewWin");
		prevWin.innerHTML = outMsg;
		prevWin.style.top = parseInt(yPos)+5 + "px";
		prevWin.style.left = parseInt(xPos)+5 + "px";
		prevWin.style.visibility = "visible";
		prevWin.onmouseout = function() {
			document.getElementById("previewWin").style.visibility = "hidden";
		}
	}
}

y un html

Código:

<html>
<head>
	<title>Smart Ajax Links</title>
	<link rel="stylesheet" rev="stylesheet" href="script.css" />
	<script src="script.js" type="text/javascript">
	</script>
</head>
<body>
<h2>A Gentle Introduction to JavaScript</h2>
<ul>
	<li><a href="jsintro/2000-08.html">August article</a></li>
	<li><a href="jsintro/2000-09.html">September article</a></li>
	<li><a href="jsintro/2000-10.html">October article</a></li>
	<li><a href="jsintro/2000-11.html">November article</a></li>
</ul>
<div id="previewWin"> </div>
</body>
</html>

y luego un css y los links a esas paginas.
Mi problema es que cuando yo paso el mouse por arriba de los hrefs me sale solo un preview de la pagina, cuando en realidad lo que necesito, es q al pasar el mouse por arriba me salga una foto con una pequeña descripcion que no aparezcan en la pagina. Osea en otras palabras, yo quiero crear y editar a mi gusto el cartel que aparece al hacer onmouseover. Se puede?
Muchas gracias