Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question omouseover and onclick in one <div> tag possible?

    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 .

    Doreen

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Hi Doreen,

    I might not take this right, but I hope i'm making things lighter for you
    Code:
    <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:
    Code:
    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:
    Code:
    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
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy it didn't work

    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.

    Doreen

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    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:
    Code:
    rev="left::http://www.codingforums.com"
    instead
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #5
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy linking the big img but not the thumb

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

    Thanks,

    Doreen

  • #6
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    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:
    Code:
    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
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #7
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow Thanks, and what about opening a new window too ? ;-))

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

    Doreen

  • #8
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Quote Originally Posted by Doreen View Post
    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
    Code:
    imageHTML='<a target="_new" href="'+dest+'">'+imageHTML+'</a>'
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #9
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow have done this but still issues

    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

    I keep trying to find an answer....

    Thank you!

    Doreen

  • #10
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Does removing this line:
    Code:
    pagelinks[i]["onclick"]=function(){ //Cancel default click action
    return false
    }
    and adding an onclick attribute to the image you want to work helps
    Code:
    <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>
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •