Hi, I want to know how do I do this:
when you do a rollover on the book image it appears a box with some text....

http://www.amazon.com/exec/obidos/tg/detail/-/076451637X/qid=1108960954/sr=1-2/ref=sr_1_2/104-4189194-1786328?v=glance&s=books

Right-click and view source will reveal all.

The image has the following two events:
onMouseOver="sitb_showLayer('bookpopover'); return false;"
onMouseOut="sitb_doHide('bookpopover');

Here are the functions:

function sitb_showLayer(obj) {
if(document.layer) {
return; // netscape 4
}

if(bookPopoverTimer) {
clearTimeout(bookPopoverTimer);
bookPopoverTimer = null;
}

var sitb_lyr = sitb_getLayer(obj);
if(!sitb_lyr) {
return;
}

var sitb_img = sitb_getLayer('prodimage');
if(!sitb_img) {
return;
}

var sitb_x, sitb_y, sitb_temp;
if(sitb_img.x) {
sitb_x = sitb_img.x;
} else {
sitb_temp = sitb_img;
sitb_x = sitb_img.offsetLeft;
while(sitb_temp.offsetParent) {
sitb_temp = sitb_temp.offsetParent;
sitb_x += sitb_temp.offsetLeft;
}
}
if(sitb_img.y) {
sitb_y = sitb_img.y;
} else {
sitb_temp = sitb_img;
sitb_y = sitb_img.offsetTop;
while(sitb_temp.offsetParent) {
sitb_temp = sitb_temp.offsetParent;
sitb_y += sitb_temp.offsetTop;
}
}

sitb_lyr.style.visibility="visible";
sitb_lyr.style.display="block";

sitb_lyr.style.left = sitb_x + (sitb_img.width / 2);

sitb_lyr.style.top = sitb_y + (sitb_img.height / 2);
}

function sitb_getLayer(obj) {
if(document.layers) {
return document.layers[obj];
} else if(document.all && !document.getElementById) {
return document.all[obj];
} else if(document.getElementById) {
return document.getElementById(obj);
} else {
return null;
}
}

function sitb_hideLayer(obj) {

var sitb_lyr = sitb_getLayer(obj);

if(!sitb_lyr) {
return;
}

if(document.layers) {
sitb_lyr.visibility="hidden";
} else {
sitb_lyr.style.display="none";
sitb_lyr.style.visibility="hidden";
}

}

function sitb_doHide (obj) {
if(document.layer) {
return;
}
bookPopoverTimer = setTimeout('sitb_hideLayer("' + obj +'")', 50);
}

if(document.layers) {
sitb_hideLayer('bookpopover');

} else {

}

Michael J

It's simple, just make a show/hide layers function and set the onMouseOver event on the img to show de book layer, and onMouseOut to hide it...

>>-----------------<<
Diego Luces
delr_91@hotmail.com