javascript simple image trail

aconite · 05-Jun-2007, 02:22 PM #1

hi,

hope this is the correct forum for my question, anyway, I have copied and pasted a simple image trail javascript code from javascript kit for http://www.drewsviews.com/about/photography.html and changed the ' var trailimage' but when I come to test it, it doesn't seem to work. Also I have 9 more images I want to add onto the variable 'trailimage' but am not sure where to put it.
Below is the javascript code which I have but in the <body> of the document

var trailimage=["../images/craigs_hut.jpg", 390, 465] //image path, plus width and height
var offsetfrommouse=[10,-20] //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.

if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="position:absolute;visibility:visible;left:0px;top:0px;width:1px;heig ht:1px"><img src="'+trailimage[0]+'" border="0" width="'+trailimage[1]+'px" height="'+trailimage[2]+'px"></div>')

function gettrailobj(){
if (document.getElementById)
return document.getElementById("trailimageid").style
else if (document.all)
return document.all.trailimagid.style
}

function truebody(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function hidetrail(){
gettrailobj().visibility="hidden"
document.onmousemove=""

}

function followmouse(e){
var xcoord=offsetfrommouse[0]
var ycoord=offsetfrommouse[1]
if (typeof e != "undefined"){
xcoord+=e.pageX
ycoord+=e.pageY
}
else if (typeof window.event !="undefined"){
xcoord+=truebody().scrollLeft+event.clientX
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 (xcoord+trailimage[1]+3>docwidth || ycoord+trailimage[2]> docheight)
gettrailobj().display="none"
else
gettrailobj().display=""
gettrailobj().left=xcoord+"px"
gettrailobj().top=ycoord+"px"
}

document.onmousemove=followmouse

if (displayduration>0)
setTimeout("hidetrail()", displayduration*1000)

<p align="left"><font face="arial" size="-2">This free script provided by<br>
<a href="http://javascriptkit.com">JavaScript Kit</a></font></p>

</script>

Any help appreciated

Mosaic1 · 06-Jun-2007, 01:45 AM #2

When you copied and pasted the script to your page, you changed the order to include a html tag inside the script.

This is on your page:

Quote:

<p align="left"><font face="arial" size="-2">This free script provided by<br>
<a href="http://javascriptkit.com">JavaScript Kit</a></font></p>

</script>

It should be this:

Quote:

</script>
<p align="left"><font face="arial" size="-2">This free script provided by<br>
<a href="http://javascriptkit.com">JavaScript Kit</a></font></p>

They put that in there to actually add a credit for this script on your page.

Also, you really have sized that picture too large. If it follows the mouse it is going to obscure the page when the visitor tries to read.

I personally find these scripts annoying. Having something following my cursor is distracting. But that's me.

What did you want to do to vary the image? How to control which image shows?

You can create different variables and call them, or possibly create an array. The issue is how to call the various images.

I am very rusty on Web Page details. But this should be a start.

aconite · 08-Jun-2007, 11:59 AM #3

what I am really trying to do is something like this link http://www.istockphoto.com/file_sear...e&text=gardens, when you hover over the small picture, a larger one pops up, hope you understand what I mean, what would be the easiest way to achieve this

thaanks

Mosaic1 · 09-Jun-2007, 11:33 AM #4

Ok. What you want is to call a picture when you hover the mouse on a picture. There are scripts to do that available on the web.

See what you can find doing a google for showtrail. That's one script available for free to do this.

You can also search for mouseover.

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)