Javascript onMouseOver Effect

danielwarner · 10-18-2005, 06:36 PM

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...

coothead · 10-19-2005, 12:53 PM

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

Lerura · 10-19-2005, 03:50 PM

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

danielwarner · 10-25-2005, 12:37 PM

could anyone edit coothead's script so that i can have multiple flashing images?

danielwarner · 10-26-2005, 12:00 PM

please?

danielwarner · 10-27-2005, 11:35 AM

Pritty Please...

coothead · 10-27-2005, 01:26 PM

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

danielwarner · 10-31-2005, 08:38 PM

is it possible to make that script fit better for this project where the images are used as links?

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

coothead · 10-31-2005, 09:23 PM

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

danielwarner · 11-01-2005, 04:29 PM

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....

coothead · 11-01-2005, 04:46 PM

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

danielwarner · 11-01-2005, 10:35 PM

3 times a second?

coothead · 11-01-2005, 11:46 PM

Hi danielwarner,

try these for size...

danielwarner · 11-02-2005, 03:17 PM

coothead, you are the kind of man i could make sweet love to right now.

one problem. the flashes arnt any faster than before.

coothead · 11-02-2005, 03:59 PM

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