...

View Full Version : Javascript onMouseOver Effect



danielwarner
10-18-2005, 07: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, 01:53 PM
Hi there danielwarner,

have a look at this working example...

<!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, 04:50 PM
The Script:
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:
<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, 01:37 PM
could anyone edit coothead's script so that i can have multiple flashing images?

danielwarner
10-26-2005, 01:00 PM
please?

danielwarner
10-27-2005, 12:35 PM
Pritty Please... :(

coothead
10-27-2005, 02:26 PM
Hi there danielwarner,

try this...

<!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, 09: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, 10: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 :eek:

coothead

danielwarner
11-01-2005, 05: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, 05: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, 11:35 PM
3 times a second?

coothead
11-02-2005, 12:46 AM
Hi danielwarner,

try these for size...

danielwarner
11-02-2005, 04: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, 04: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...

<div><img src="nav0_about.gif" alt=""></div>
<div><img src="nav3_about.gif" alt=""></div>
...or look at this...

http://coothead.homestead.com/files/nav0_about.gif
http://coothead.homestead.com/files/nav3_about.gif

coothead

rlemon
11-02-2005, 04:59 PM
Also, in Firefox the flashing and links are kinda scetchy.... i havn't found a pattern but they don't always work.

coothead
11-02-2005, 05:18 PM
Hi there rlemon,

Also, in Firefox the flashing and links are kinda sketchy
That's because the site is still using javascript for the links
instead of the CSS single image rollover that I have suggested.

coothead

rlemon
11-02-2005, 07:30 PM
ohh, i don't care why... i was just listing another thing wrong with the page.... gotta contribute back you know :P

danielwarner
11-03-2005, 05:12 PM
so is there no easy way to make this work in javascript? because if there was it would be sooooooo much easier for me. like the same script as before but capable of not screwing over when i use it as a link???



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum