Rollover images delay redirect to url onmouseover but stop onmouseout

Question

Ok i looked thru all the answers for now but i cant find a solution.

This is what i am trying to create i have multple rollover images on 1 page every rollover image has his own url to a specific part of the homepage.

What i want is that when you move your mouse over it it shows the second image and it delays the redirect to the url until it hits the 3000 ms and then redirects the user to the url. But the delay must be stoped onmouseout and it doesnt redirect the user and it shows the first image again, all the rollover images must do the same thing on the same page, but each rollover has his own url.

Who can help me with some information on how to..

tryed javascript but i think i am looking in the wrong direction with the code.. problem is i am out of ideas how to build it or where to start.. — , Jun 17 '12 at 22:37
Yes, you're right to use javascript. I was just wondering if you're using jQuery (or another JS library) or if you'll need the answer in pure javascript. — , Jun 17 '12 at 22:40
i use jquery and other JS for other elements in my site like horizontal scrolling based on mouseover elements ect.. Any solution in javascript or jquery would be welcome. i am creating a web based UI where people only can use a trackball not left and right button kinda selfsevice kiosk touch screen was to expansive , so everything must be on mouseover and mouseout but in some cases when you touch a mouseover it redirects instant and that is what i try to fix with a delay onmouseover and stop onmouseout.. Also i tryed to use 1 script for all mouseovers i add or will be adding in the future.. — , Jun 17 '12 at 23:06

score 0 · Accepted Answer · 2012-06-18T01:49:52.313

0

I would do the changing of the image with CSS and :hover, and do the redirect and timeout with javascript like so:

// markup
<a id="my_image_1" class="hover_linker" href="some_link_to_the_homepage.html"></a>

// styles
.hover_linker {
    width:363px;
    height:300px;
    display:block;
}
#my_image_1 {
    background-image: url('some-image.jpg');
}
#my_image_1:hover {
    background-image: url('another-image.jpg');
}

// scripts
var redirectTimeout;
$(document).ready(function() {
    $('a.hover_linker').mouseover(function(e){
        redirectTimeout = window.setTimeout(function () {
            window.location.href = $(e.target).attr("href");
        }, 3000);
    }).mouseout(function(){
        window.clearTimeout(redirectTimeout);
    });
});

edited Jun 18 '12 at 01:49

answered Jun 17 '12 at 23:16

I see what you did, didnt think about that one, there is one thing i cant figure out here is that i added the images they dont show up.. btw the img.someClass can i leave that one alone or do i need to asign a class to it? if so which one do i asign? – Jun 18 '12 at 00:09
Sorry, yeah, I meant to put `hover_linker` as the class in the jQuery selector. Are you adding the url to your images in the CSS selectors? – Jun 18 '12 at 00:18
yeah i did put the full url in the css selector but images stil not showing up? also do i need a special jquery.js for this? – Jun 18 '12 at 00:26
Add `display:block` to the CSS for the anchor tags and see if it works then. – Jun 18 '12 at 00:30
Yep that works perfect but it doesnt redirect after 3000 ms it does the hover perfectly.. +100 from me :-) – Jun 18 '12 at 00:45
Have you replace `some_link_to_the_homepage.html` with the URL you would like to redirect to? Also, you'll need to add the script to the bottom of the page (before the closing `
` tag or wrap it in a DOM ready handler (I'll add that to the code too).
– Jun 18 '12 at 00:50
oke changed the script as you mentioned place it before the
url was added before checked it more then twice, but it still doesnt redirect after 3000ms. When clicked it works???
– Jun 18 '12 at 00:57
Thanks for the help so far, i will try to figure out why it doesnt redirect after the 3000ms.. its a mystery so far.. – Jun 18 '12 at 01:23
Yeah, the above code works for me on my test page. I'm sure you'll get it working. Cheers. – Jun 18 '12 at 01:24
You help me alot, thats for sure. argh cant get the script to work with the redirect... tryed everything cheched browsers none of them are reacting on the redirect part and testing it from my local and online server.. Nothing happends. – Jun 18 '12 at 01:39
Shoot. I just realized that the jQuery selector is wrong. It should be `$("a.hover_linker")` not `$("img.hover_linker")`. I'll update the answer above. Sorry about that. – Jun 18 '12 at 01:49
I really need your help with this one cant get it to work. and i really need this function, to finish the project. – Jun 18 '12 at 12:52
Did you change the jQuery selector as I outlined 2 comments up? – Jun 18 '12 at 17:34
Do you still have a test/development page up? I'll be able to fix if I can see it. – Jun 18 '12 at 18:54
here is the link, i use chrome in kiosk mode for the project by the way. but i tested the script in firefox safari and IE9 – Jun 18 '12 at 21:19
If you load the page with the javascript console open you'll see that it's throwing the exception `Uncaught ReferenceError: $ is not defined `. That means that jQuery isn't loaded. Add `` above your other script block and it should work. – Jun 18 '12 at 21:53
That is it OMG you are the man this is fantastic +200 from my side. That brings me to my final last question i use a .png as first image and .gif on mouseover but on mouseout and then mouseover the gif doesnt reset itself? as u showed me to use css for the mouseover and out i cant see the solution to use MM_swapImgRestore() because it is now in css. – Jun 18 '12 at 22:28
I would either set the animated gif in an `img` tag and then show/hide it and the background image and when you want to reset the gif replace the `src` attribute of the `img` tag. Another option would be to do the animation with CSS/HTML/JavaScript (since it's just using simple squares). – Jun 18 '12 at 23:11
ok played around with some things an my intrest goes to.. how do i create the squares in css or html as a animation timed! Never done that before so its new to me and how do i merge the 2 together ? – Jun 18 '12 at 23:50
Check out jQuery's `.animate()` documentation to learn all about it: http://api.jquery.com/animate/ – Jun 18 '12 at 23:51
Again thank you for your help and info.. i will read the website and experiment with it.. – Jun 19 '12 at 00:08

Rollover images delay redirect to url onmouseover but stop onmouseout

1 Answers1