Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Onmouseover within the javascript

Status
Not open for further replies.
goutour

goutour

Technical User
Jun 8, 2007
3
GB
Hello,
I am trying to learn a bit of javascript using some nice code I find on internet. I have tried to use the onmouseover event for a number of moving images that are created in the javascript. The problem is though that when the onmouseover works on one image (e.g image 1) replacing it with image1A, then when I put my mouse over the other images (say image2) it changes to the image that the first image has changed, which is image1A.
You will see that this is not my only problem I am trying when I am looping through the images created within the javascript, to set a time lag before that image changes by itself, so the procedure is to change a balloon to an explosion, then from that explosion to come a different image that will be following the balloon's path.

In the settimeout method, I get some errors.
I am sorry I got no idea why the properties of all images change to the one that the mouseover has applied on.
Any help on that question even if you cannot follow the edited (from a snow type falling code I found on net)?

I give the javascript here below:

<html>
<HEAD>



</HEAD>
<body leftmargin="14" blah blah>

<script language="Javascript">


if (navigator.appVersion.indexOf("2.") != -1){
check = false;
}
if ((navigator.appVersion.indexOf("3.") != -1) && (navigator.appName.indexOf("Explorer") != -1)){
check = false;
}
else {
check = true;
}

var no = 9; // snow number
var speed = 21; // smaller number moves the snow faster
var srcElement=new Array();
snow = new Array();
pnow=new Array();
snow[0] =new Image(100,25);
snow[0].src="h:/siteaids/images/bl.gif"
snow[1] = new Image(100,25);
snow[1].src="h:/siteaids/images/ora.gif"
snow[2] = new Image(100,25);
snow[2].src="h:/siteaids/images/yell.gif"
explosionimg=new Image(100,25);
explosionimg.src="h:/siteaids/images/exp3.gif"
pnow[0]=new Image(100,25);
pnow[0].src="h:/siteaids/images/IL.gif"
pnow[1]=new Image(100,25);
pnow[1].src="h:/siteaids/images/Ag2.gif"
pnow[2]=new Image(100,25);
pnow[2].src="h:/siteaids/images/Ag2.gif"
pnow[3]=new Image(100,25);
pnow[3].src="h:/siteaids/images/Ag2.gif"
pnow[4]=new Image(100,25);
pnow[4].src="h:/siteaids/images/Ag2.gif"
pnow[5]=new Image(100,25);
pnow[5].src="h:/siteaids/images/Ag2.gif"
pnow[6]=new Image(100,25);
pnow[6].src="h:/siteaids/images/1.gif.gif"
pnow[7]=new Image(100,25);
pnow[7].src="h:/siteaids/images/ner1.gif"
pnow[8]=new Image(100,25);
pnow[8].src="h:/siteaids/images/or1.gif"
pnow[9]=new Image(100,25);
pnow[9].src="h:/siteaids/images/D1.gif"
pnow[10]=new Image(100,25);
pnow[10].src="h:/siteaids/images/IL1.gif"

var ns4upb = (document.layers) ? 1 : 0; // browser sniffer
var ie4upb = (document.all) ? 1 : 0;
var dxb, xpb, ypb; // coordinate and position variables
var amb, stxb, styb; // amplitude and step variables
var i, doc_widthb = 800, doc_heightb = 1800;
var Imagechanged= new Array();

if (ns4upb) {
doc_widthb = self.innerWidth;
doc_heightb = self.innerHeight;
} else if (ie4upb) {
doc_widthb = document.body.clientWidth;
doc_heightb = document.body.clientHeight;
}

dxb = new Array();
xpb = new Array();
ypb = new Array();
amb = new Array();
stxb = new Array();
styb = new Array();

j = 0;

for (i = 0; i < no; ++ i) {
dxb = 0;// set coordinate variables
xpb = Math.random()*(doc_widthb-50); // set position variables
ypb = Math.random()*doc_heightb;
amb = Math.random()*20; // set amplitude variables
stxb = 0.02 + Math.random()/10; // set step variables
styb = 0.7 + Math.random(); // set step variables
Imagechanged=0;
if (ns4upb) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\"" + snow[j] + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\"" + snow[j] + "\" border=\"0\"></layer>");
} } else if (ie4upb) { if (i == 0) {

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +" VISIBILITY: visible; \"><img src=\"" + snow[j].src + "\" border=\"0\"><\/div>");
document.images.id="Rdot"+i;
document.images.name="RTIdot"+i;

} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +" VISIBILITY: visible; \"><img src=\"" + snow[j].src + "\" border=\"0\"><\/div>");
document.images.id="Rdot"+i;
document.images.name="RTIdot"+i;

}

}
if (j == (snow.length-1)) { j = 0; } else { j += 1; }
}

function rnd(max) {
var rndnum=max*Math.random()
rndnum=Math.ceil(rndnum)
return rndnum
}

function ChangeBalloon(){
//var targetId, srcElement, targetElement
window.event.cancelBubble='True';
srcElement=window.event.srcElement
srcElement.ballsrc=srcElement.src
srcElement.src=explosionimg.src


}

function ChangeBalloon1(){
this.src = explosionimg.src;
}





function Replaceexplosion()
{
var Int_Ind_Img
Int_Ind_Img=rnd(10)
//Let us find a random number to assign picture from 0 to 9
srcElement.src=pnow[Int_Ind_Img].src

}

function ReplaceBalloon()
{
srcElement=window.event.srcElement
srcElement.src=srcElement.ballsrc

}


function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
ypb -= styb; if (ypb < -50) {
xpb = Math.random()*(doc_widthb-amb-30);
ypb = doc_heightb;
stxb = 0.02 + Math.random()/10;
styb = 0.7 + Math.random();
doc_widthb = self.innerWidth;
doc_heightb = self.innerHeight; }
dxb += stxb;
document.layers["dot"+i].top = ypb;
document.layers["dot"+i].left = xpb + amb*Math.sin(dxb);
}
setTimeout("snowNS()", speed);
}

function snowIE() { // IE main animation function
// var imgarr = document.getElementsByID('dot0');

for (i = 0; i < no; ++ i) { // iterate for every dot
// debugger
// document.images.onMouseOver="document.images.src = ' ypb -= styb;

if (ypb < -50) {
xpb = Math.random()*(doc_widthb-amb-30);
ypb = doc_heightb;
stxb = 0.02 + Math.random()/10;
styb = 0.7 + Math.random();
doc_widthb = document.body.clientWidth;
doc_heightb = document.body.clientHeight;
}
dxb += stxb;

document.all["dot"+i].style.pixelTop = ypb;
document.all["dot"+i].style.pixelLeft = xpb + amb*Math.sin(dxb);
var x = document.getElementById(document.images.id);
//x.onmouseover=ChangeBalloon1
if (Imagechanged==0) {
document.all["dot"+i].onmouseover=ChangeBalloon;
Imagechanged=1;
}

if (Imagechanged==1){ //Replace image of explosion with something else
setTimeout(Replaceexplosion(),500);
Imagechanged=2
}
if (Imagechanged==2){
setTimeout(ReplaceBalloon(),10000);
Imagechanged=0
}





}
setTimeout("snowIE()", speed);
}

if (ns4upb) {
snowNS();
} else if (ie4upb) {
snowIE();
}
</script>


</body>
</html>
 
Sort by date Sort by votes
Start with something a little less ambitious - and certainly something that is more appropriate to this century (as in: modern DOM methods - not old fashioned switching based on browser version). The code you are using is not "good".

Start from the beginning and slice the task into several smaller ones... each one can then be researched and applied separately... eventually leading to the same solution you have described - but it will not require browser version detection for simple animation.

Sorry to rain on your parade - but sometimes the truth is worth getting wet for.

Cheers,
Jeff


[tt]Jeff's Page [!]@[/!] Code Couch
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
613
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
1K
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
251
Daniel K
Daniel K
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
685
xwb
xwb
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
602
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top