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 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Location
    Surrey, England
    Posts
    286
    Thanks
    2
    Thanked 2 Times in 2 Posts

    Javascript onMouseOver Effect

    is it possible for anyone to make me an 'onMouseOver' image changer that flashes the image when you hover over it twice before displaying it and the same when you scroll off the image?

    i would be very grateful if anyone could help me with this please...

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,743
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there danielwarner,

    have a look at this working example...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>two flashes and then the image</title>
    <base href="http://coothead.homestead.com/files/"/>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    <meta name="Content-Script-Type" content="text/javascript"/>
    <meta name="Content-Style-Type" content="text/css"/>
    <style type="text/css">
    <!--
    body {
         background-color:#999;
         color:#000;
     }
    #container {
         margin-top:50px;
         width:360px;
         height:280px;
         border:3px double #000;
         margin:50px auto;
     }
    #container img {
         display:block;
     }
    -->
    </style>
    
    <script type="text/javascript">
    <!--
      var c=0;
      var flash;
      var speed=250;
      var preloads=[];
    
    function preload() {
    for(i=0;i< arguments.length;i++) {
       preloads[preloads.length]=new Image();
       preloads[preloads.length-1].src=arguments[i];
      }
     }
    
    function stuff(obj,pic) {
    if((c%2!=0)&&(c<4)) {
       obj.style.visibility='hidden';
       obj.src=pic;
       obj1=obj;
       pic1=pic;
       c++;
       setTimeout('stuff(obj1,pic1)',speed)
     }
    else {
       obj.style.visibility='visible';
       obj.src=pic;
       obj1=obj;
       pic1=pic;
       c++;
    if(c==5) {
       c=0;
       clearTimeout(flash);
       return;
     }
       flash=setTimeout('stuff(obj1,pic1)',speed);
     }
       obj.onmouseout=function() {
       stuff(this,'apple.jpg');
      }
     }
    preload('apple.jpg','banana.jpg');
    //-->
    </script>
    
    </head>
    <body>
    
    <div id="container">
    <img src="apple.jpg" alt="" onmouseover="stuff(this,'banana.jpg')"/>
    </div>
    
    </body>
    </html>
    
    coothead

  • #3
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    The Script:
    Code:
    Pic=new Array('image1.gif','image2.gif');
    Q=0;
    function Mouse(x){
    Q++;;
    document.getElementById("Flash").src=Pic[x];
    if (Q==5){
    Q=0;
    }else{
    W=1-State;
    setTimeout('Mouse(W)', 200);
    }
    }
    And the Image tag:
    Code:
    <img src="image1.gif" ID="Flash" onMouseOver="Mouse(1);return false" onMouseOut="Mouse(0);return false">
    if you want it to change the flash-tempo then change the red number (lower is faster) and if eventually want to change the times it flashes change the blue number to 2*Times to Flash + 1

  • #4
    Regular Coder
    Join Date
    Oct 2005
    Location
    Surrey, England
    Posts
    286
    Thanks
    2
    Thanked 2 Times in 2 Posts
    could anyone edit coothead's script so that i can have multiple flashing images?

  • #5
    Regular Coder
    Join Date
    Oct 2005
    Location
    Surrey, England
    Posts
    286
    Thanks
    2
    Thanked 2 Times in 2 Posts
    please?

  • #6
    Regular Coder
    Join Date
    Oct 2005
    Location
    Surrey, England
    Posts
    286
    Thanks
    2
    Thanked 2 Times in 2 Posts
    Pritty Please...

  • #7
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,743
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there danielwarner,

    try this...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>two flashes and then the image</title>
    <base href="http://coothead.homestead.com/files/"/>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    <meta name="Content-Script-Type" content="text/javascript"/>
    <meta name="Content-Style-Type" content="text/css"/>
    <style type="text/css">
    <!--
    body {
         background-color:#999;
         color:#000;
     }
    #wrapper {
         width:868px;
         margin:50px auto;
     }
    .container {
         display:inline;
         margin-top:50px;
         width:270px;
         height:240px;
         margin:5px;
         float:left;
     }
    .container img {
         border:3px double #000;
         width:270px;
         height:240px;
     }
    -->
    </style>
    
    <script type="text/javascript">
    <!--
      var c=0;
      var flash;
      var speed=250;
      var preloads=[];
      var pics=new Array();
          pics[0]="apple0.jpg";
          pics[1]="apple1.jpg";
          pics[2]="apple2.jpg";
          pics[3]="apple3.jpg";
          pics[4]="apple4.jpg";
          pics[5]="apple5.jpg";
    
    function preload() {
    for(i=0;i< arguments.length;i++) {
       preloads[preloads.length]=new Image();
       preloads[preloads.length-1].src=arguments[i];
      }
     }
    
    function stuff(obj,n0,n1) {
    if((c%2!=0)&&(c<4)) {
       obj.style.visibility='hidden';
       obj.src=pics[n1];
       obj1=obj;
       n2=n0;
    
       n3=n1;
       c++;
       setTimeout('stuff(obj1,n2,n3)',speed)
     }
    else {
       obj.style.visibility='visible';
       obj.src=pics[n1];
       obj1=obj;
       n2=n0;
       n3=n1;
       c++;
    if(c==5) {
       c=0;
       clearTimeout(flash);
       return;
     }
       flash=setTimeout('stuff(obj1,n2,n3)',speed);
     }
       obj1.onmouseout=function() {
       stuff(obj1,n3,n2);
      }
     }
    preload('apple0.jpg','apple1.jpg','apple.jpg2','apple3.jpg','apple.jpg4','apple5.jpg');
    //-->
    </script>
    
    </head>
    <body>
    
    <div id="wrapper">
    
    <div class="container">
    <img src="apple.jpg" alt="" onmouseover="stuff(this,0,1)"/>
    </div>
    <div class="container">
    <img src="apple2.jpg" alt="" onmouseover="stuff(this,2,3)"/>
    </div>
    <div class="container">
    <img src="apple4.jpg" alt="" onmouseover="stuff(this,4,5)"/>
    </div>
    
    </div>
    
    </body>
    </html>
    coothead

  • #8
    Regular Coder
    Join Date
    Oct 2005
    Location
    Surrey, England
    Posts
    286
    Thanks
    2
    Thanked 2 Times in 2 Posts
    is it possible to make that script fit better for this project where the images are used as links?

    http://angrypirate.co.uk/thelaststep ??

  • #9
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,743
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there danielwarner,

    As I suggested this would be better achieved with CSS rollovers.

    Check out the attachments, it has the CSS and the images.

    Because of attachment maximum size, I will have to upload in two zips

    coothead
    Attached Files Attached Files

  • #10
    Regular Coder
    Join Date
    Oct 2005
    Location
    Surrey, England
    Posts
    286
    Thanks
    2
    Thanked 2 Times in 2 Posts
    coothead, i think i love you.

    is there anyway i can change the tempo of the flashes? the html file doesnt seem to be what makes the flashes faster or slower....

  • #11
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,743
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there danielwarner,

    so what do you want faster or slower animation?

    The images I sent you flash once a second.

    Give me the flash rate that would bring a smile to your face.

    coothead

  • #12
    Regular Coder
    Join Date
    Oct 2005
    Location
    Surrey, England
    Posts
    286
    Thanks
    2
    Thanked 2 Times in 2 Posts
    3 times a second?

  • #13
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,743
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi danielwarner,

    try these for size...
    Attached Files Attached Files

  • #14
    Regular Coder
    Join Date
    Oct 2005
    Location
    Surrey, England
    Posts
    286
    Thanks
    2
    Thanked 2 Times in 2 Posts
    coothead, you are the kind of man i could make sweet love to right now.

    one problem. the flashes arnt any faster than before.

  • #15
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,743
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there danielwarner,

    I fear that you may be so overcome with erotic yearnings that you are
    unable to perceive the different flash rates between a nav3 and a nav0 gif.
    I can assure you that nav0 is flashing faster than nav3.

    Try this code to test my assertion...
    Code:
    <div><img src="nav0_about.gif" alt=""></div>
    <div><img src="nav3_about.gif" alt=""></div>
    ...or look at this...




    coothead
    Last edited by coothead; 11-02-2005 at 05:19 PM.


  •  
    Page 1 of 2 12 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
    •