View Full Version : onmouseover and onclick in one <div> tag possible? / thumbnailviewer2.js

04-23-2008, 01:02 AM
1) Script Title: thumbnailviewer2.js

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

3) Describe problem:

Ok. I'm having a problem with some thumbnails.
I am using an external .js file from http://www.dynamicdrive.com which is thumbnailviewer2.js as well as a <div> tag which looks like this--->

<div class="thumb"><a href="images/big.jpg" rel="enlargeimage::mouseover" rev="left" title><img src="images/thumb.jpg" border="0" alt="pic" height="65" width="65" /></a></div>

When i hover over the thumbs they are displayed large like they should.
What I would like as well is when a thumb is clicked - a new window shall open with some more enlarged images. (eg: a new .htm)
I've tried to implement 'onClick' but it did override the 'onmouseover'...

I'm quite new to Javascript. Anyway. I've searched the net but can't find an answer.

Hope you can help . :)


04-23-2008, 01:23 AM
Ok. searching through the forum I found this-->

>>You could instead set the target="_new" in the thumbnailviewer2.js script (addition red):


imageHTML='<a target="_new" href="'+dest+'">'+imageHTML+'</a>'

You can use a link in the title attribute:


title="This is an <a href='http://www.dynamicdrive.com' target='_new'>example</a>"


and I've done this and it opens the picture in a new window...

nice.. but what I need is a new window containing another .htm with more views of the pic itself and not only the one which was shown when hovered over....

I hope this is understandable. :eek:

Thanks for your help!


04-23-2008, 06:56 AM
The script by default disables the onClick action within the image thumbnail links, yes. You can re-enable it by first removing the below lines inside the .js file:

pagelinks[i]["onclick"]=function(){ //Cancel default click action
return false

Then, inside your thumbnail link, add an onClick event handler and set it to open a page onClick, for example:

<a href="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" rel="enlargeimage::mouseover" rev="loadarea::http://www.dynamicdrive.com" title="This is an example" onClick="window.open('http://google.com')">Thumbnail Example 1</a>