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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Making a mousedown function display an image with different dimensions.

    Hello,

    This may be an impossible proposition or to demanding, but if I could get any help I would be very appreciative. I need to make my buttons, when pressed, change to a large image that covers the screen. The image that I want to have displayed on the mousedown function is an animated GIF that displays two paint splatters. I know I will have to have a delay of about 1200ms for it to run, then continue to load the linked page. I have the index.html, main.css, defult.css, and defult2.css files made, they were done professionally. Everything works fine on the site, and the buttons just change to a different image with the same dimensions when clicked and rolled over. It gives it a cool effect. I wanted to add this extra effect, though. The website is www.marksbodyshop.org . I tried just plugging my paint splatter animated GIF into the original spot (mousedown function coding) in place of the original image was but it displays it very small. The paint splatter animated GIF has big dimensions. If you click the About Us button, you will see a square image come up quickly, and it's very small; so, it's hard to see. I just want to make that image cover the entire screen, and run through it's animation (about 1200ms), before the next webpage starts loading. I have pasted a portion of my index.html below, showing where I plugged in the paint splatter GIF. This file is called paintsplat.gif. I have also attached a TXT file with the contents of my index.html, defult.css, defult2.css, and main.css files. I originally, wanted my website to run on all browsers, including older ones, as I live in a retirement community, but I'm not totally concerned with that. It would be nice, but if it's not possible it's alright. I don't know enough Javascript to do this myself, I haven't taken any classes yet. If anyone could help, that would be great. Thank you very very much.



    Shane





    $(function() {

    $('#aboutimg_anchor').mousedown(function(){
    $("#aboutimg").attr('src',"button/paintsplat.gif"); ----------- I need this image to be big.
    });

    $("#aboutimg_anchor").hover(
    function () {

    $("#aboutimg").attr('src',"button/about-us-02.png");
    },
    function () {
    $("#aboutimg").attr('src',"button/about-us-01.png");
    }
    );



    Attached Files Attached Files

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,911
    Thanks
    56
    Thanked 544 Times in 541 Posts
    wait a minute... isn't this exactly what we were doing back in March?

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,502
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    
    <a class="splash" href="http://www.vicsjavascripts.org.uk/">LINK 1</a>
    <br />
    <a class="splash" href="http://www.marksbodyshop.org/">LINK 2</a>
    
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    var zxcSpash={
    
     init:function(o){
      var as=this.bycls(o.LinkClassName,document.body),ms=o.LoadDelay,img=document.createElement('IMG'),o,z0=0;
      img.src=o.SplashSRC;
      img.style.position='fixed';
      img.style.zIndex='101';
      img.style.visibility='hidden';
      img.style.left='0px';
      img.style.top='0px';
      img.style.width='100%';
      img.style.height='100%';
      document.body.appendChild(img);
      for (var z0=0;z0<as.length;z0++){
       this.addevt(as[z0],'click','splash',as[z0].href,img,typeof(ms)=='number'?ms:1000);
      }
    
     },
    
     splash:function(a,img,ms){
      img.style.visibility='visible';
      setTimeout(function(){ window.top.location=a;  },ms);
      return false;
     },
    
     addevt:function(o,t,f,p,p1,p3){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1,p3);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p3); });
      }
     },
    
     bycls:function (nme,el){
      for (var reg=new RegExp('\\W'+nme+'\\W'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
       if(reg.test(' '+els[z0].className+' ')){
        ary.push(els[z0]);
       }
      }
      return ary;
     }
    
    }
    
    zxcSpash.init({
     LinkClassName:'splash',
     SplashSRC:'http://www.marksbodyshop.org/button/paintsplat.gif',
     LoadDelay:1000
    });
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    wait a minute... isn't this exactly what we were doing back in March?


    Yes, the problem I was having is it wouldn't work on older browsers the same way. I guess I could've asked about that. That's for the help though. I'm gonna implement the coding from this thread and see what happens. The problem is most people where I live have old computers. I wish I could make my site with simpler coding. Actually, it would be nice to just use CSS and HTML because my site isn't very complicated.

  • #5
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    
    <a class="splash" href="http://www.vicsjavascripts.org.uk/">LINK 1</a>
    <br />
    <a class="splash" href="http://www.marksbodyshop.org/">LINK 2</a>
    
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    var zxcSpash={
    
     init:function(o){
      var as=this.bycls(o.LinkClassName,document.body),ms=o.LoadDelay,img=document.createElement('IMG'),o,z0=0;
      img.src=o.SplashSRC;
      img.style.position='fixed';
      img.style.zIndex='101';
      img.style.visibility='hidden';
      img.style.left='0px';
      img.style.top='0px';
      img.style.width='100%';
      img.style.height='100%';
      document.body.appendChild(img);
      for (var z0=0;z0<as.length;z0++){
       this.addevt(as[z0],'click','splash',as[z0].href,img,typeof(ms)=='number'?ms:1000);
      }
    
     },
    
     splash:function(a,img,ms){
      img.style.visibility='visible';
      setTimeout(function(){ window.top.location=a;  },ms);
      return false;
     },
    
     addevt:function(o,t,f,p,p1,p3){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1,p3);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p3); });
      }
     },
    
     bycls:function (nme,el){
      for (var reg=new RegExp('\\W'+nme+'\\W'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
       if(reg.test(' '+els[z0].className+' ')){
        ary.push(els[z0]);
       }
      }
      return ary;
     }
    
    }
    
    zxcSpash.init({
     LinkClassName:'splash',
     SplashSRC:'http://www.marksbodyshop.org/button/paintsplat.gif',
     LoadDelay:1000
    });
    /*]]>*/
    </script>
    
    </body>
    
    </html>

    Hi,

    I see that your code is doing what I want, but I'm not sure how to incorporate that into a button when you click on it. Do I link up my original mousedown function to your code? Thank you very much for the code.


    Thanks,
    Shane

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,502
    Thanks
    3
    Thanked 500 Times in 487 Posts
    all link('A') elements with a class="splash" and href will activate the script
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Tags for this Thread

    Posting Permissions

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