SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Location
    Ballarat, Vic. Australia
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Activate Hyperlink on Mouseover

    Hello js heads ,

    I need to find/write/cobble together/craft some javascript code that will send the browser to a URL when the mouse hovers over an image.

    I don't think there's anything other info I can give...it's a bit like those scrolling slideshows and news tickers where the scrolling will stop/start when the mouse hovers over it except that I want the browser to go to a specific URL.

    It's kind of like:

    Hover_Over_Image -> -> location.href=www.somewhere.com -> -> Now Go There!

    The href doesn't need to be set dynamically as the second step like it looks above..it will just be a variable.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Code Javascript:
    function redirect() {
        window.location = 'http://www.somewhere.com';
    };
    function setRedirectTimer(e) {
        var el;
        e = e || window.event;
        el = e.target || e.srcElement;
        el.timer = setTimeout(redirect, 2000);
    }
    function clearTimer(e) {
        var el;
        e = e || window.event;
        el = e.target || e.srcElement;
        clearTimeout(el.timer);
    }
    var images, i;
    images = document.getElementsByTagName('img');
    for (i = 0; i < images.length; i++) {
        images[i].onmouseover = setRedirectTimer;
        images[i].onmouseout = clearTimer;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Location
    Ballarat, Vic. Australia
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, I'll give that a try. I'm not much of a JS programmer but it certainly 'looks right' .

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Thanks Gary, that's one of the best compliments a programmer can get, when someone says they can understand what the code does.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    On coming back to this, some of the functions can be simplified even further. Because we are wanting only the element and no other event information, we can get that through the this keyword instead.

    Code Javascript:
    function setRedirectTimer() {
        this.timer = setTimeout(redirect, 2000);
    }
    function clearTimer() {
        clearTimeout(this.timer);
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    On coming back to this, some of the functions can be simplified even further. Because we are wanting only the element and no other event information, we can get that through the this keyword instead.

    Code Javascript:
    function setRedirectTimer() {
        this.timer = setTimeout(redirect, 2000);
    }
    function clearTimer() {
        clearTimeout(this.timer);
    }
    The this keyword will point to the window object in this case. The variable timer will just be another global variable. This can be validated with the following code in any of those functions:

    Code javascript:
    alert(this === window);

    I am not so sure that a user will appreciated being redirected from a page just because he hovered an image... This kind of brakes the expected behavior.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Pepejeria View Post
    The this keyword will point to the window object in this case. The variable timer will just be another global variable. This can be validated with the following code in any of those functions:

    Code javascript:
    alert(this === window);
    I have tested this on both Firefox and Internet Explorer and the this keyword refers to the element that was hovered over.

    Even explicitly showing the window property reveals that it's undefined, as it should be.

    Code Javascript:
    function setRedirectTimer() {
        this.timer = setTimeout(redirect, 2000);
        alert(window.timer); // undefined
    }

    Under what circumstances are you finding that the this keyword resolved to the window, and how do they apply to the example provided here?

    Quote Originally Posted by Pepejeria View Post
    I am not so sure that a user will appreciated being redirected from a page just because he hovered an image... This kind of brakes the expected behavior.
    I am not keen about the technique either, however should it be required to do other things than redirect you, it's a useful technique to know.
    Last edited by paul_wilkins; Jan 28, 2008 at 01:55.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah yes, I see now. Looked at the functions without seeing above that they been assigned to an event.

    In that case yes, the timer variable will be a new property of the image.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Location
    Ballarat, Vic. Australia
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The code worked but...

    Ah, like a typical scenario this one became a little more complicated. I'd really love to work this out myself but it's just a little beyond me still. Mind you, I did purchase 'The Javascript Anthology' and like all Sitepoint books it is excellent but I have a ways to go before I can call myself a Javascript programmer

    Firstly, thanks Paul for the code. As I mentioned it did look right - even though I didn't understand the 'guts' of the code it was very clear and I could see what the code was 'doing' and how it was doing it ... and sure enough it worked a treat. Whats more, I learned a little about events. Snippets of code like this, along with a good text book can be real gems!

    Anyways, here's what changed. The images I'm now hovering over are actually 'submit' elements for forms and I need to submit a specific form based on which image is hovered over. The form code looks something like this:

    Code:
    <form name="form1" id="form1" method="post" action="something.php">
    < .. form elements '''>
    <input type="image" src="images/img.gif" />
    </form>
    
    <form name="form2" id="form2" method="post" action="something.php">
    < .. form elements '''>
    <input type="image" src="images/img.gif" />
    </form>
    
    <form name="form3" id="form3" method="post" action="something.php">
    < .. form elements '''>
    <input type="image" src="images/img.gif" />
    </form>
    The images all have the same name (and can't be altered) ... so I can't use the image names to identify which form the image is in. The identification is going to have to come from the form name. Basically what I need to do, I guess, is get the form name and then use something like document.forms[n].submit() based on which form the hovered image is in.

    It was easy enough to get the form names by changing:

    Code:
    images = document.getElementsByTagName('img');
    to

    Code:
    images = document.getElementsByTagName('form');
    ...but I can't see a way of getting that form name into a variable when its corresponding image is hovered over. If I could do that then I don't think it would be all that difficult to submit the correct form.

  10. #10
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by teckyhead View Post
    Anyways, here's what changed. The images I'm now hovering over are actually 'submit' elements for forms and I need to submit a specific form based on which image is hovered over.
    This should do it. Just drop it in anywhere below the forms.
    Code:
    <script type='text/javascript'>
    
    function sendOnHover(formRef, imgRef, delay)
    {
     var theTimer;
       
     imgRef.onmouseout=function(){clearTimeout(theTimer)}
     
     function sendForm()
     {
      theTimer=setTimeout("document.forms['"+formRef+"'].submit()", delay);
     }
     
     return sendForm;
    }
    
    (function()
    {
     var allSubmits=document.getElementsByTagName('input');
    
     for(var i=0; i<allSubmits.length; i++)
      if(allSubmits[i].type=='image')
       allSubmits[i].onmouseover=sendOnHover(allSubmits[i].form.id, allSubmits[i], 2000);
    })();
    
    </script>
    Tab-indentation is a crime against humanity.

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Each form element knows the form that it's in, through the form property, so you can use this.form.submit(); to submit the appropriate form.

    Here's the easy way to do it.

    Code javascript:
    // for each input
    var inputs = document.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
        // skip those that are not images
        if (inputs[i].type !== 'image') {
            continue;
        }
        // attach event
    	inputs[i].onclick = submitForm;
    }
    // submit form
    function submitForm() {
        this.form.submit();
    }

    You can also use inputs[i].getAttribute('src') === 'images/name.jpg' for deeper restrictions, or even better, use a substring search for the filename so that it works for all possible paths
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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