Making a mousedown function display an image with different dimensions.

Repatilian · 12-25-2012, 09:55 AM

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");
}
);

xelawho · 12-25-2012, 04:48 PM

wait a minute... isn't this exactly what we were doing back in March?

vwphillips · 12-25-2012, 04:51 PM

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>

Repatilian · 12-26-2012, 07:39 AM

Quote:

Originally Posted by xelawho

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.

Repatilian · 12-26-2012, 07:51 AM

Quote:

Originally Posted by vwphillips

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

vwphillips · 12-26-2012, 12:52 PM

all link('A') elements with a class="splash" and href will activate the script