Menu
I have a Javascript rollover script for displaying a larger image on rollover. It works fine in IE and Firefox but theres a problem with Safari and Chrome. If the image is further down the page, the image loads in the wrong place and you cant see it once scrolled down the page.
I’ve put an example here.
[URL=”http://www.stonesour1.com/jstest/”]http://www.stonesour1.com/jstest/
The 3 thumbs at the top (which work fine in all browsers) but the 3 at the bottom of the page dont display correctly in Safari/Chrome.
I’ve posted all the code below, or just view the source of the page. Help apprechiated.
[B]HTML CODE
[code=html]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Debugging</title>
<!– template preview scripts –>
<script src=”image.js” language=”JavaScript” type=”text/javascript”></script>
<!– template preview scripts –>
<style type=”text/css”>
<!–
body {
background-color: #000000;
}
#trailimageid {
position: absolute;
visibility: hidden;
left: 0px;
top: 0px;
height: 0px;
z-index: 100;
color:#000000;
}
–>
</style></head>
<body>
<div style=”padding-top:0px;”>
<a href=”#”>
<img src=”thumb2.jpg” alt=”ID T001″ width=”170″ height=”170″ class=”imgborder”
onmouseover=”showtrail(‘full2.jpg’,’ID T001′,’ID T001′,’1′,270);”
onmouseout=”hidetrail();” />
</a>
<a href=”#”>
<img src=”thumb2.jpg” alt=”ID T001″ width=”170″ height=”170″ class=”imgborder”
onmouseover=”showtrail(‘full2.jpg’,’ID T001′,’ID T001′,’1′,270);”
onmouseout=”hidetrail();” />
</a>
<a href=”#”>
<img src=”thumb2.jpg” alt=”ID T001″ width=”170″ height=”170″ class=”imgborder”
onmouseover=”showtrail(‘full2.jpg’,’ID T001′,’ID T001′,’1′,270);”
onmouseout=”hidetrail();” />
</a>
</div>
<div style=”padding-top:1000px;”>
<a href=”#”>
<img src=”thumb2.jpg” alt=”ID T001″ width=”170″ height=”170″ class=”imgborder”
onmouseover=”showtrail(‘full2.jpg’,’ID T001′,’ID T001′,’1′,270);”
onmouseout=”hidetrail();” />
</a>
<a href=”#”>
<img src=”thumb2.jpg” alt=”ID T001″ width=”170″ height=”170″ class=”imgborder”
onmouseover=”showtrail(‘full2.jpg’,’ID T001′,’ID T001′,’1′,270);”
onmouseout=”hidetrail();” />
</a>
<a href=”#”>
<img src=”thumb2.jpg” alt=”ID T001″ width=”170″ height=”170″ class=”imgborder”
onmouseover=”showtrail(‘full2.jpg’,’ID T001′,’ID T001′,’1′,270);”
onmouseout=”hidetrail();” />
</a>
</div>
</body>
</html>
[B]JAVASCRIPT CODE:
[CODE]
/*
Simple Image Trail script- By JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
This notice must stay intact
*/
var offsetfrommouse=[15,15]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.
var currentimageheight = 270; // maximum image size.
if (document.getElementById || document.all){
document.write(‘<div id=”trailimageid”>’);
document.write(‘</div>’);
}
function gettrailobj(){
if (document.getElementById)
return document.getElementById(“trailimageid”).style
else if (document.all)
return document.all.trailimagid.style
}
function gettrailobjnostyle(){
if (document.getElementById)
return document.getElementById(“trailimageid”)
else if (document.all)
return document.all.trailimagid
}
function truebody(){
return (!window.opera && document.compatMode && document.compatMode!=”BackCompat”)? document.documentElement : document.body
}
function showtrail(imagename,title,description,showthumb,height){
if (height > 0){
currentimageheight = height;
}
document.onmousemove=followmouse;
newHTML = ‘<div style=”padding: 0px; background:#ffffff; background-image:url(images/ajax-loader.gif); background-repeat:no-repeat; background-position:center; border: 1px solid #000000;”>’;
if (showthumb > 0){
newHTML = newHTML + ‘<div align=”center” style=”padding: 1px;”>’;
newHTML = newHTML + ‘<img src=”‘ + imagename + ‘” border=”0″></div>’;
}
gettrailobjnostyle().innerHTML = newHTML;
gettrailobj().visibility=”visible”;
}
function hidetrail(){
gettrailobj().visibility=”hidden”
document.onmousemove=””
gettrailobj().left=”-500px”
}
function followmouse(e){
var xcoord=offsetfrommouse[0]
var ycoord=offsetfrommouse[1]
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)
//if (document.all){
// gettrailobjnostyle().innerHTML = ‘A = ‘ + truebody().scrollHeight + ‘<br>B = ‘ + truebody().clientHeight;
//} else {
// gettrailobjnostyle().innerHTML = ‘C = ‘ + document.body.offsetHeight + ‘<br>D = ‘ + window.innerHeight;
//}
if (typeof e != “undefined”){
if (docwidth – e.pageX < 380){
xcoord = e.pageX – xcoord – 400; // Move to the left side of the cursor
} else {
xcoord += e.pageX;
}
if (docheight – e.pageY < (currentimageheight + 110)){
ycoord += e.pageY – Math.max(0,(110 + currentimageheight + e.pageY – docheight – truebody().scrollTop));
} else {
ycoord += e.pageY;
}
} else if (typeof window.event != “undefined”){
if (docwidth – event.clientX < 380){
xcoord = event.clientX + truebody().scrollLeft – xcoord – 400; // Move to the left side of the cursor
} else {
xcoord += truebody().scrollLeft+event.clientX
}
if (docheight – event.clientY < (currentimageheight + 110)){
ycoord += event.clientY + truebody().scrollTop – Math.max(0,(110 + currentimageheight + event.clientY – docheight));
} else {
ycoord += truebody().scrollTop + event.clientY;
}
}
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
if(ycoord < 0) { ycoord = ycoord*-1; }
gettrailobj().left=xcoord+”px”
gettrailobj().top=ycoord+”px”
}