...

View Full Version : Image Trail problems



dag
08-26-2007, 12:01 AM
hi i have a problem :)

i want to use the script but it makes me crazy, why is the border just till 380 pix in the weight okay. then the picture oversize the border also the border is anywhere underneth the bpic and not around. some kind of good ideas? thx in advantage!!!

and here the 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 = 480; // maximum image heigh size.
var currentimagewidth = 640; // maximum image width 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
}

// ('images/custom/P1010053.JPG','ID','Poland','5.0000','5','1',281)
function showtrail(imagename,title,description,ratingaverage,ratingnumber,showthumb,width,height,filetype){
if (height > 0){
currentimageheight = height;
}

if (width > 0){
currentimagewidth = width;
}

document.onmousemove=followmouse;

cameraHTML = '';

if ( !ratingnumber ){
ratingnumber = 0;
ratingaverage = 0;
}

for(x = 1; x <= 5; x++){

if (ratingaverage >= 1){
cameraHTML = cameraHTML + '<img src="./images/side/camera_1.gif">';
} else if (ratingaverage >= 0.5){
cameraHTML = cameraHTML + '<img src="./images/side/camera_05.gif">';
} else {
cameraHTML = cameraHTML + '<img src="./images/side/camera_0.gif">';
}

ratingaverage = ratingaverage - 1;
}

cameraHTML = cameraHTML + ' (' + ratingnumber + ' Review';
if ( ratingnumber > 1 ) cameraHTML += 's';
cameraHTML = cameraHTML + ')';

newHTML = '<div style="padding: 5px; background-color: #EEE; border: 1px solid #888;">';
newHTML = newHTML + '<h2>' + title + '</h2>';
newHTML = newHTML + 'Rating: ' + cameraHTML + '<br/>';
newHTML = newHTML + description + '<br/>';

if (showthumb > 0){
newHTML = newHTML + '<div align="center" style="padding: 8px 2px 2px 2px;">';
/*if(filetype == 8) { // Video
newHTML = newHTML + '<object width="380" height="285" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0">';
newHTML = newHTML + '<param name="movie" value="video_loupe.swf">';
newHTML = newHTML + '<param name="quality" value="best">';
newHTML = newHTML + '<param name="loop" value="true">';

newHTML = newHTML + '<param name="FlashVars" value="videoLocation=' + imagename + '&bufferPercent=25">';
newHTML = newHTML + '<EMBED SRC="video_loupe.swf" LOOP="true" QUALITY="best" FlashVars="videoLocation=' + imagename + '&bufferPercent=25" WIDTH="380" HEIGHT="285">';
newHTML = newHTML + '</object></div>';
}else {*/
newHTML = newHTML + '<img width="' + width + '" height="' + height + '" src="' + imagename + '" border="0">'; //</div>';
}
//}

// newHTML = newHTML + '</div>';
gettrailobjnostyle().innerHTML = newHTML;
gettrailobj().display="inline";
}

function showtrailBatch(imagename,title,filetype){
document.onmousemove=followmouseBatch;

cameraHTML = '';

newHTML = '<div style="padding: 5px; background-color: #FFF; border: 1px solid #888;" id="trailInnerDiv">';
newHTML = newHTML + '<h2>' + title + '</h2>';

newHTML = newHTML + '<div align="center" style="padding: 8px 2px 2px 2px;">';
if(filetype == 8) { // Video
newHTML = newHTML + '<object width="380" height="285" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0">';
newHTML = newHTML + '<param name="movie" value="video_loupe.swf">';
newHTML = newHTML + '<param name="quality" value="best">';
newHTML = newHTML + '<param name="loop" value="true">';

newHTML = newHTML + '<param name="FlashVars" value="videoLocation=' + imagename + '">';
newHTML = newHTML + '<EMBED SRC="video_loupe.swf" LOOP="true" QUALITY="best" FlashVars="videoLocation=' + imagename + '" WIDTH="380" HEIGHT="s285">';
newHTML = newHTML + '</object></div>';
} else {
newHTML = newHTML + '<img src="' + imagename + '" border="0"></div>';
}

newHTML = newHTML + '</div>';
gettrailobjnostyle().innerHTML = newHTML;
gettrailobj().display="inline";
gettrailobj().position="absolute";
currentimageheight = $('trailInnerDiv').offsetHeight;

}

function hidetrail(){
gettrailobj().innerHTML = " ";
gettrailobj().display="none"
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;
}
}

if(ycoord < 0) { ycoord = ycoord*-1; }
gettrailobj().left=xcoord+"px"
gettrailobj().top=ycoord+"px"

}

function followmouseBatch(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)

var trailInnerDiv = $('trailInnerDiv');
var currentimageheight = trailInnerDiv.offsetHeight;
var currentimagewidth = trailInnerDiv.offsetWidth;

scrollPos = Position.realOffset(truebody());

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 ((e.pageY - scrollPos[1]) + currentimageheight > docheight){
ycoord = -ycoord + (e.pageY - currentimageheight);
} else {
ycoord += e.pageY;
}
} else if (typeof window.event != "undefined"){
if (event.clientX + currentimagewidth > docwidth){
xcoord = -xcoord + ((event.clientX + scrollPos[0]) - currentimagewidth); // Move to the left side of the cursor
} else {
xcoord += (event.clientX + scrollPos[0]);
}
if (event.clientY + currentimageheight > docheight){
ycoord = -ycoord + ((event.clientY + scrollPos[1]) - currentimageheight);
} else {
ycoord += (event.clientY + scrollPos[1]);
}
}

if(ycoord < 0) { ycoord = ycoord*-1; }

gettrailobj().left=xcoord+"px"
gettrailobj().top=ycoord+"px"

}

Arty Effem
08-26-2007, 01:26 AM
Your question ≈ impossible to understand without seeing your page and the way you have used the code.

dag
08-26-2007, 10:04 AM
sorry, here the link to the page is http://www.dfnt.de/Cool/thumb.html

thx
dag

Arty Effem
08-26-2007, 02:24 PM
sorry, here the link to the page is http://www.dfnt.de/Cool/thumb.html

thx
dagYour parameters seem correct but I'm not going to delve too deeply into third-party code. If you don't need the customised ratings display, an alternative is Magnifimage (http://www.hotspot.freeserve.co.uk/scripterlative?magnifimage), which doesn't ask you for image dimensions.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum