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.
Page 1 of 3 123 LastLast
Results 1 to 15 of 35
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts

    javascript mouseover anchor

    Hi,

    I have a series of images, anchored linked together to simulate a tour. I decided it would be better if rather than clicking it was like a smooth simulation so i added onmousever to the anchor links. this was a smooth transistion but entirely too fast.

    is there a way with javascript, to slow down the onmouseover events? i have the images on the same page, just shoved down the page by using pagebreak html, so that they load when the page loads and therefore don't slow down the effect. (they are large images). i can't use the script that smoothly scrolls between anchor links, because it scrolls down the page to the next image, which ruins the effect. the images are increasingly larger pictures of the same thing, so the effect is somewhat like moving thru 3d space.

    i need the onmouseover to FIRE but move slower than normal onmouseover before firing again. repeat.

    here's an example
    http://www.thelivingmoon.com/undomie...rmouse.html#22

    i mean the entire sequence is done before the person even realizes what just happened
    Last edited by undoo; 03-23-2012 at 11:01 AM.

  • #2
    New Coder
    Join Date
    Mar 2012
    Posts
    13
    Thanks
    0
    Thanked 1 Time in 1 Post
    onMouseover="setTimeout(\"location.href='marstourmouse.html#22'\",1000)">

    this should work. i didn't test it. the quotes might not work correctly but i'm not really sure

    1000 = 1000 milliseconds (1 second)

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SamHuff View Post
    onMouseover="setTimeout(\"location.href='marstourmouse.html#22'\",1000)">

    this should work. i didn't test it. the quotes might not work correctly but i'm not really sure

    1000 = 1000 milliseconds (1 second)
    hmm, nope. thanks tho! i mean that's supposed to replace my other onmousever, yes?
    it doesn't do anything. instead it turns the first anchor into a normal anchor link.
    Last edited by undoo; 03-23-2012 at 05:46 PM.

  • #4
    New Coder
    Join Date
    Mar 2012
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Anybody else have any ideas how to solve this?
    I just need some kind of timer that slows (not stops) how fast the onmouseover moves between the onmouseover events and the anchor links they are attached to.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    SamHuff had right idea, but his quotes were wrong.

    onMouseover="setTimeout('location.href=\'marstourmouse.html#22\',1000)' ">

    But easier would be to do:
    Code:
    <a href="#22" onMouseover="loc=this.href;setTimeout('location.href=loc,1000)"><img src="marssmallest.jpg"></a>
    But this leads to a problem: If the user mouses out of the image and then back in, you will have set TWO timeouts, which may mess up further displays.

    Further, this will only move you from the first image to the next. What you want is a smooth movement all the way to the surface, no?

    I would *REALLY* like to suggest you do this in an entirely different way.

    I know this looks like the simple way to you, but it's also the least user-friendly way.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New Coder
    Join Date
    Mar 2012
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi Old Pedant

    do you have a better way to suggest?

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    I was afraid you were going to ask that.

    *sigh*

    Back later.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New Coder
    Join Date
    Mar 2012
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    I was afraid you were going to ask that.

    *sigh*

    Back later.
    thanks for the effort!

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    Here you go.

    Since your first image says "CLICK to tour", I used onclick to start the tour. But you could change it to onmouseover. I tried it and it works.

    Code:
    <html>
    <head>
    <title>Blank</title>
    
    
    
    <style type="text/css">
    body {
    	font-family:verdana,arial,sans-serif;
    	margin:30px;
    	background-color:#000000;
    }
    div#LANDING, div#TOUR {
        position: absolute;
    }
    div#LANDING img, div#TOUR img {
        position: absolute;
        display: none;
        border: none;
    }
    </style>
    <script type="text/javascript">
    var landingImages;
    var tourImages;
    var currentImage = 0;
    var enabled = false;
    
    function enableShow() 
    {
        enabled = true;
        document.getElementById("LANDING").style.display = "block";
        // alert("ready");
    }
    
    function showLanding( )
    {
        if ( ! enabled ) return;
        landingImages = document.getElementById("LANDING").getElementsByTagName("img");
        tourImages = document.getElementById("TOUR").getElementsByTagName("img");
        nextLandingImage(); // go immediately to second image to get rid of click message
    }
    function nextLandingImage( )
    {
        var next = currentImage + 1;
        if ( next >= landingImages.length )
        {
            setTimeout( startTour, 5000 ); // start tour in 5 seconds
            return; 
        }
        
        landingImages[currentImage].style.display = "none";
        landingImages[next].style.display = "block";
        currentImage = next;
        setTimeout( nextLandingImage, 500 );
    }
    function startTour( )
    {
        document.getElementById("LANDING").style.display = "none";
        document.getElementById("TOUR").style.display = "block";
        currentImage = 0;
    }
    function move(byWhat)
    {
        currentImage += byWhat + tourImages.length
        currentImage = currentImage % tourImages.length;
        for ( var i = 0; i < tourImages.length; ++i )
        {
            tourImages[i].style.display = ( i == currentImage ) ? "block" : "none";
        }
    }
        
    window.onload = enableShow;
            
    </script>
    
    </head>
    <body bgcolor="black" background="starrysky.jpg" text="white" link="teal" alink="white" vlink="black">
    <div id="LANDING" style="display: none;">
     <img src="http://www.thelivingmoon.com/undomiel/marstour/marssmallest.jpg"
          style="display: block;"
          onclick="showLanding();">
     <img src="http://www.thelivingmoon.com/undomiel/marstour/mars22.jpg">
     <img src="http://www.thelivingmoon.com/undomiel/marstour/mars23.jpg">
     <img src="http://www.thelivingmoon.com/undomiel/marstour/mars24.jpg">
     <img src="http://www.thelivingmoon.com/undomiel/marstour/mars25.jpg">
     <img src="http://www.thelivingmoon.com/undomiel/marstour/mars26.jpg">
     <img src="http://www.thelivingmoon.com/undomiel/marstour/mars27.jpg">
     <img src="http://www.thelivingmoon.com/undomiel/marstour/mars28.jpg">
     <img src="http://www.thelivingmoon.com/undomiel/marstour/mars29.jpg">
     <img src="http://www.thelivingmoon.com/undomiel/marstour/mars30.jpg">
     <img src="http://www.thelivingmoon.com/undomiel/marstour/mars31.jpg">
     <img src="http://www.thelivingmoon.com/undomiel/marstour/mars32.jpg">
     <img src="http://www.thelivingmoon.com/undomiel/marstour/mars33.jpg">
     <img src="http://www.thelivingmoon.com/undomiel/marstour/mars34.jpg">
     <img src="http://www.thelivingmoon.com/undomiel/marstour/mars35.jpg">
     <img src="http://www.thelivingmoon.com/undomiel/marstour/mars36.jpg">
     <img src="http://www.thelivingmoon.com/undomiel/marstour/mars37.jpg">
     <img src="http://www.thelivingmoon.com/undomiel/marstour/mars38.jpg">
     <img src="http://www.thelivingmoon.com/undomiel/marstour/mars39.jpg">
    </div>
    <div
    <div id="TOUR" style="display: none;">
      <img src="http://www.thelivingmoon.com/undomiel/marstour/mars40.jpg" usemap="#marstourmap"
           style="display: block;" 
           onclick="alert('this is image 40, a picture of mars');"/>
      <img src="http://www.thelivingmoon.com/undomiel/marstour/mars42.jpg" usemap="#marstourmap"
           onclick="alert('this is image 42, a picture of mars');"/>
      <img src="http://www.thelivingmoon.com/undomiel/marstour/mars44.jpg" usemap="#marstourmap"
           onclick="alert('this is image 44, a picture of mars');"/>
      <img src="http://www.thelivingmoon.com/undomiel/marstour/mars43.jpg" usemap="#marstourmap"
           onclick="alert('this is image 43, a picture of mars');"/>
      <img src="http://www.thelivingmoon.com/undomiel/marstour/mars41.jpg" usemap="#marstourmap"
           onclick="alert('this is image 41, a picture of mars');"/>
      <map name="marstourmap">
        <area shape="rect" coords="0,286,182,586" onclick="move(-1);">
        <area shape="rect" coords="800,298,940,612" onclick="move(1);">
      </map>
    </div>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    I used 500 milliseconds between landing images. 1 second seemed a bit too long.

    And then I used 5 seconds before the tour on the surface begins. You can adjust that, of course.

    And notice that each of the surface images has an onclick, with a somewhat inane message. But you could change the message to something appropriate. Ir get rid of the onclicks. Your choice.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    New Coder
    Join Date
    Mar 2012
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    I used 500 milliseconds between landing images. 1 second seemed a bit too long.

    And then I used 5 seconds before the tour on the surface begins. You can adjust that, of course.

    And notice that each of the surface images has an onclick, with a somewhat inane message. But you could change the message to something appropriate. Ir get rid of the onclicks. Your choice.
    Thank you so much! made this entire event worth while!

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    Yeah, but you still have the old code on the page. <grin/>

    (I know...everything takes time.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    New Coder
    Join Date
    Mar 2012
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Yeah, but you still have the old code on the page. <grin/>

    (I know...everything takes time.)
    i'm goofing around with it!
    this will work for mannnny things!
    was about to upload it and then i decided to give you that thank you thing but noticed it doesn't increase your thank yous! why is that?

  • #14
    New Coder
    Join Date
    Mar 2012
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    woot.
    http://www.thelivingmoon.com/undomie.../tourmars.html

    you wouldn't happen to have access to an endless zoom that actually works on IE, firefox and google chrome , would ya?
    i found a nice css and javascript one but it doesn't work in IE, only in google chrome and firefox
    (trying to simulate hyperspace). and what's the limit for infinte zoom images in the browser? seems like 3 is the maximum. is that a garbage collection issue?

    p.s. as for the mars tour, if i had more images in the sequence the effect wouldn't be as choppy right?

    oh and since i have such a knowledgeable person actually helping me, i was wondering how to implement fullscreen for game. i have the one where you fullscreen the page on click, but when it's a game, you want them to already be in fullscreen when the game window is up and if you offer a choice they won't use it, resulting in goofy game window syndrome, all squishied by a browser with more toolbars than viewing window.
    Last edited by undoo; 03-24-2012 at 03:16 AM.

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    In reverse order:

    One way to do full screen is to open a new window in fullscreen mode.

    You have to do it via an onclick (e.g., have them cliick on an <a> link) to avoid most popup blockers, but it works well. You can either kill the original window or just ignore it and leave it as a game launch screen.

    ***********

    The more images the smoother, of course.

    ***********

    "Infinite zoom" is an oxymoron. By definition, an infinite zoom would take an infinite amount of time. Just out of curiosity, how are you going to take images of sub-atomic particles when the zoom gets to that level? And I don't think even physicists know what things look like a few zoom levels beyond that.

    <grin/> I'm a mathematician. Infinite *means* infinite to me.

    NOW... How much of a zoom do you want to achieve? You can always zoom in on an image, but the more you zoom, the worse the image will look. I don't know what you mean by "limit for infinite zoom images".
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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