...

View Full Version : omouseover and onclick in one <div> tag possible?



Doreen
04-22-2008, 08:15 AM
Hello!
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 . :thumbsup:

Doreen

rangana
04-22-2008, 10:16 AM
Hi Doreen,

I might not take this right, but I hope i'm making things lighter for you ;)


<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>


Highlighted could either be between mouseover or click only. The rel attribute triggers how the large image will be launched :)

...Now, the rev attribute gives you the opportunity to give your enlarged image a hyperlink, by extending the delimeter to:


rev="loadarea::http://www.codingforums.com"


...The least that you can do, is to direct the user to the large image which is your anchor's href value by removing the higlighted in your codes:


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
return false;
}
}


If I were to choose, I would go to changing the rev delimeter. Hope that helps :)

Doreen
04-22-2008, 10:45 AM
Hello rangana,

Thanks for your help. :)
hmmm... it doesn't work.

Once I apply the changed
---rev="loadarea::http://www.codingforums.com"---
instead of
---rev="left"
on mouseover there is no image displayed on the left....
and the link doesn't open either.

hmm.. I'm stuck.
should I keep looking on the net?

Do you know what else to do?

Grateful for your help. :thumbsup:

Doreen

rangana
04-22-2008, 11:05 AM
My mistake, it should'nt be loadarea...this part is your div, and I believe, your div's id is left ;)

...So, it should be:


rev="left::http://www.codingforums.com"


instead :)

Doreen
04-22-2008, 12:15 PM
Thanks again rangana!

and still not what i need.

now with --->rev="left::http://www.codingforums.com"

it links the big image with the www.codingforums.com link only if the big image is clicked after being mousedover first.

what I needed was: the thumb being mousedover to display an image in a container as well as being clicked on to open a new window.

can you help again?? :thumbsup::)

Thanks,

Doreen

rangana
04-22-2008, 12:21 PM
As I mentioned in post#2, the least you can do is to let the anchor's href link to work as expected during onclick :)

Remove the highlighted:


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
return false;
}
}


I've played with onclick but it's not working...mainly because of the anchor's href...and we can't change the href since it's utilized by our script :)

Doreen
04-22-2008, 01:28 PM
Thank you!!

so it is working like this:
the mouseover works.
on click it opens the pic in the same window.

is there any possibility to open a new window and leaving the exsisting window in the back?

Thank you again.........:thumbsup:

Doreen

rangana
04-23-2008, 04:38 AM
Thank you!!
is there any possibility to open a new window and leaving the exsisting window in the back?
Doreen

Add the highlighted in your JS ;)


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

Doreen
04-23-2008, 04:52 AM
Hey rangana,

I've implemented --->target="_new"<--- already.

Unfortunately it only opens the large pic in a new window.
What I need is a new window opening containing a .htm.

hmmmm :rolleyes:

I keep trying to find an answer....

Thank you!:thumbsup:

Doreen

rangana
04-23-2008, 09:08 AM
Does removing this line:


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


and adding an onclick attribute to the image you want to work helps ;)


<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://www.codingforums.com','mywindow','height=500,width=800');return false;">Thumbnail Example 1</a>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum