Image Thumbnail Viewer II - Possible?

[jontron]

1) Script Title: Image Thumbnail Viewer II

2) Script URL (on DD): http://www.dynamicdrive.com/forums/s...d.php?p=113010

3) Describe problem:

Is there a way to have the REL "mouseover" point to one image while "onclick" actually loads up a new page?

Basically, I am listing the thumbnails with Text, when the user hovers over the text a small thumb appears, then I would like the user to be able to click the text to redirect them to the full size image.

I know, there are better ways to do this but this is how I need it to work (if its possible) ... sort of like a "preview before fullsize" function ... can anyone help?

Thanks,
Jon

[jscheuer1]

Add in the script (red):

init:function(){ //Initialize thumbnail viewer script
this.iefiltercapable=(this.iefiltercapable && this.enableTransition) //True or false: IE filters supported and is enabled by user
var pagelinks=document.getElementsByTagName("a")
for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
if (pagelinks[i].getAttribute("rel") && /enlargeimage:/i.test(pagelinks[i].getAttribute("rel"))){ //Begin if statement: Test for rel="enlargeimage"
var initType=pagelinks[i].getAttribute("rel").split("::")[1] //Get display type of enlarged image ("click" or "mouseover")
if (initType=="mouseover"){ //If type is "mouseover", preload the enlarged image for quicker display
this.preloadedimages[this.preloadedimages.length]=new Image()
this.preloadedimages[this.preloadedimages.length-1].src=pagelinks[i].href
pagelinks[i]["onclick"]=function(){ //Cancel default click action
if(this.rel.split('::')[2])
window.location=this.rel.split('::')[2];
return false
}
}
pagelinks[i]["on"+initType]=function(){ //Load enlarged image based on the specified display type (event)
thumbnailviewer2.loadimage(this) //Load image
return false
}
if (this.hideimgmouseout)
pagelinks[i]["onmouseout"]=function(){
thumbnailviewer2.hideimage(this)
}
this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link
} //end if statement
} //END FOR LOOP


} //END init() function

Once you do that, you can have a link like so:

<a href="bulb.gif" rel="enlargeimage::mouseover::bulb_lrg.jpg" rev="loadarea">Thumbnail</a>

Or:

<a href="bulb.gif" rel="enlargeimage::mouseover::bulb_lrg.htm" rev="loadarea">Thumbnail</a>

Clicking on the link will take you to the larger image listed (first example) or a page (if you have one) with the larger image on it (second example).

Mousing over will still do what it already did.

[jontron]

Perfect! Thank you for the info and quick reply.