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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Disable onMouseOut when image is clicked

    I have an image rollover, and I want to disable the onMouseOut behavior if onClick is true (in other words, if the user clicks an image, when the mouse moves out it doesn't switch the highlighted button back to dim).
    The page in question is here:
    http://hebelergraphics.com/logos/index.html
    The client wanted all images to be on one page, so making multiple pages for each image, while it would solve the problem, isn't an option. Notice how when the buttons on the left are rolled over, they highlight, when rolled out, they dim. When one is clicked, it changes the image in the center; it should stay highlighted when the mouse rolls out.
    I'm guessing there's an if/then statement that needs to be written, like "If the image is clicked, change all other images to the up state and don't do anything onMouseOut to the current image". Any suggestions as to how to write something like this?
    Thanks.

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Take a look on my site at

    http://www.huntingground.freeserve.c...ns/butcell.htm

    Select the link for [B]Text Links[B ]and look for:

    Highlighted Link on

    This might be the script you require.

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just use a separate array to keep track of which images have been clicked, and check against that array whenever an onMouseOut() occurs...

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    OK, listen up.....

    Add this to the script:

    function unhilite(exception) {
    for (var i=1; i<9; ++i)
    if (i != exception) chgImg('image' + i + 'preview','thumb' + i + 'u')
    }

    document.clicked = null;

    Do the HTML like so:

    <td align="center">
    <a href="#" onClick="document.clicked=this;
    chgImg('left','left1');chgImg('right','right1');
    unhilite(1);return false;"
    onmouseover="chgImg('image1preview','thumb1o')"
    onmouseout="if(document.clicked!=this)chgImg('image1preview','thumb1u')">
    <img name="image1preview" border="0" src="image1preview.jpg" width="45" height="45"></a></td>
    </tr><tr>
    <td align="center">
    <a href="#" onClick="document.clicked=this;
    chgImg('left','left2');chgImg('right','right2');
    unhilite(2);return false;"
    onmouseover="chgImg('image2preview','thumb2o')"
    onmouseout="if(document.clicked!=this)chgImg('image2preview','thumb2u')">
    <img name="image2preview" border="0" src="image2preview-light.jpg" width="45" height="45"></a></td>

    ...and so on. The document&#46;clicked property (custom) tracks the link that lit the current image; it's tested to see if the mouseout should run. return false; to cancel any side-effects of the link. Hope that works.
    Last edited by adios; 08-06-2002 at 03:34 AM.

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Uhhh...wow. That sure looks complicated. I think a tracking array would be a bit easier. Oh, and can you please post your code within the vB Code 'CODE' tags?

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Pardon me but - who the heck are you? This isn't your website, and some of us have been here a bit longer than you.

    Scratch that - all of us have been here longer.

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow. I thought I made a plain comment and asked a simple question. I even said 'please' (besides, what's wrong with a little controversy?)

    I've been on/visited MANY different web development forums and it always seems typical and proper (and many times expected by the MODs) to post large amounts of code into the proper 'CODE' tags. Just FYI.

    Also...the number of posts I have made at this particular forum (or any for that matter) gives you ZERO insight to my knowledge or experience. Certainly you don't think your 178 posts here gives you some sort of intangible seniority over me or anyone else's post content and the right to be rude, do you?

    Look, apologies all around for misread intentions. Lighten up. It's really not that bad.

  • #8
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, I'm going to give it a whirl...
    FWIW, this has been an excellent first-post experience in a new community, what with both valuable info and squabbling rolled into one thread. I'm stoked!

  • #9
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Adios-you rock!!!!! Take a look now, the code you gave me does the trick. Thanks, I owe you...

  • #10
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Hi

    Sorry for restarting a old thread but I really need help on this script.
    I was wondering if u could help me to possibly edit the script so I can have a image for the initial state, onmouseover and when clicked. Also is it possible to select a image initially when the page is loaded?

    Thanks for any help!!

    vorl
    Last edited by vorl; 07-26-2005 at 07:55 PM.

  • #11
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts

    please....anybody...

    hi again

    please can some1 help me on this as its the only script I have found which is similiar to what i need!!

    thanks, any help appreciated

    vorl


  •  

    Posting Permissions

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