djscrib

Ok let's try this. Below code will call a server script if the user hovers over a thumbnail image for longer than .5 seconds. If the server script returns data in the format

<data>
<description>My Description</description>
<thumbnail>http://www.image.com/image.jpg</thumbnail>
</data>

the code will parse this xml, and then display a floating popup window
with the description text and the new image.

The code is slightly pseudo-code.

--How to do a rollover poup.

<div id="popup" style="position:absolute;visibilitydden;">
<img id="popup_img">
</div>

That is a div element that is intially invisible


<span onMouseOver="ShowDesc();" onMouseOut="ClearDesc();">
<img src="thumbnail">
</span>

This is a thumbnail image, if the user mouses over it we want to pop up the full size picture and description if they hover the mouse for more than .5 seconds.

<script>
var popTimer = null;

//kill the timer to cancel any pending popup events
function ClearDesc()
{
window.clearTimeout(popTimer);
}

//call the function ShowThumb in .5 seconds, if the user
//does a mouseout it effectively kills the timer. This mimics a
//"hover" event so that you don't do a popup if the user is flicking
//his mouse over the thumbnail
function ShowDesc()
{
popTimer = window.setTimeout("DownloadThumb();",500);
}

var xmlRequest = null;//our xml http request object
function DownloadThumb()
{
//create the xml object, set the callback, send it
xmlRequest = new ActiveXObject("XMLHTTPRequest");
xmlHttp.onreadystatechange = stateChangeHandler;
xmlHttp.open("GET","get_info.php?id=45",true);
xmlHttp.send();
}

//this function is called when the http request returns
function stateChangeHandler()
{
//readyState of 4 or 'complete' represents that data has been returned
if (xmlHttp.readyState hahahaha 4 || xmlHttp.readyState hahahaha 'complete'){
//Gather the results from the callback
//parse the xml
if(xmlHttp.status hahahaha 200)
{
try
{
var desc = xmlHttp.responseText;
//var root = desc.documentElement;

var parser = xmlHttp.responseXML;
var parser = new ActiveXObject("Microsoft.XMLDOM");
var loaded = parser.loadXML(desc);
var desc = parser.getElementsByTagName("Description")[0].firstChild.data;
var thumb = parser.getElementsByTagName("Thumbnail")[0].firstChild.data;

popup.innerText = desc;

popup_img.src = thumb;
}
catch(e)
{
}
}
}
}
</script>

__________________
Vidlock DRM Service - Add DRM to your website today
http://www.vidlock.com

Coming Soon - Vidpass