Simple?? Javascript function + rollover bug (link inside)

[beachwail]

I created a small starter site for a musical group : www.afsouthoftown.com
There seems to be some problems with the way javascript is handling the
rollover functions (created in FireW/DreamW) in conjunction with the Popup window functions that each button executes.

Seems like a simple task, and it works just fine on my machine, but running
off of my host's server it looks like the onMouseOut function is not being
executed and is leaving a black hole where the button should restore.

Try clicking all of the (4) mp3 links in the center of the page, and you will see
that the button states are not working correctly. They work OK when you "reset" the state by rolling back over the button.

Hard to explain, thus the link provided...
Austin Freeman and South of Town - Band Website (http://www.afsouthoftown.com)

I can't see anything wrong with the code...can you???

Thanks in advance !!
~Mike

ps-- I'm running IE 6.0.28 on a 3ghz P4, with a 300kbps bandwidth to the site's server
(ruling out hardware / network issues)

[jamescover]

Try this:

Preload images array:


<script type="text/javascript">
<!--

function preImg(){

var oImg = [];
oImg[0] = "image1.gif";
oImg[1] = "image2.gif";
oImg[2] = "image3.gif";

for (var i=0;i<oImg.length;i++){
var imgs = new Image();
imgs.src = "images/" + oImg[i];
}
}
preImg();

//-->
</script>

Swap images:

<img name="someImg" src="images/image1.gif" border="0" width="50" height="50" onmouseover="this.src='images/images2.gif';" onmouseout="this.src='images/image1.gif';" onclick="this.src='images/image3.gif';" style="cursor:pointer;" />



-james

[beachwail]

Thanks for the timely response, Jamescover.

Doesn't that seem like a lot of hand-coding for all 30 file names?
Putting each one into the array like that...
What if there were 300 file names?

Do you happen to know instead the cause of Dreamweaver's
generated script to be faulty? Maybe try to identify the problem
instead of avoid it?

Just curious... I'm fairly new to Javascript (though not to
programming or websites).

Thanks,
~Mike

[Willy Duitt]

Do you happen to know instead the cause of Dreamweaver's
generated script to be faulty?

I know the cause:

Dreamweaver generates crap... particularly its javascript....

I would like to help you but if you think adding the images to an array is too much trouble than there is not much I nor anyone else can do for you....

However, if your images are simularly named and sequentially numbered, you can search this forum for a script I once posted that will work under those conditions without entering anything other than the first image....

.....Willy

[jamescover]

Doesn't that seem like a lot of hand-coding for all 30 file names?
Putting each one into the array like that...
What if there were 300 file names?


You didn't mention anything about 30 images in your post, let alone 300, and I only see 4 image swaps on the page you posted.

If your images are sequentially numbered, you can just add another loop to preload them, without hardcoding them all:

<script>
<!--

function preImgs(){

for (var i=1;i<5;i++){

var oImg = [];
oImg[0] = "images/image" + i + ".gif";

for (var j=0;j<oImg.length;j++){

var imgs = new Image();
imgs.src = oImg[j];
}
}
}
preImgs();

//-->
</script>


-james

[beachwail]

You guys are right.

I should ditch all the "slices" and crap that DW/FW has created
and put robust code in there... using the same filenames with
different indices so that I can use the concat operator
instead of hard coding.

I've just never done any JS coding for web pages, as I
presumed that it was packaged into the "prosumer" software
that is so readily available these days.
(For basic stuff anyway--like rollovers)

[M1k3-+i3]

How about this code with a few modifications<!--//
function init() {
if (!document.getElementById){ return };
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i].getAttribute('nsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('nsrc');
imgarr[i].style.cursor = 'pointer';
imgarr[i].onclick = function() {
imgOriginSrc = this.getAttribute('src');
bp = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('nsrc'))
this.setAttribute('nsrc',bp)
}
}
}
}
window.onload = init;
//-->And to apply it to images<img src="start_image.gif" nsrc="new_image.gif">Hope this is a shorter solution mate :)

[jamescover]

To preload unlimited images:


<script>
<!--

function preImgs(){

for (var i=1;i<5;i++){

var oImg = [];
oImg[0] = "images/image" + i + ".gif";

for (var j=0;j<oImg.length;j++){

var imgs = new Image();
imgs.src = oImg[j];
}
}
}
preImgs();

//-->
</script>



The above would preload image1.gif, image2.gif, image3.gif, image4.gif, image5.gif located in the images directory. If you have 300 sequentially numbered images, just change the highlighted number to reflect it.


Then, use the img tag I gave you for your image swaps:



<img name="someImg" src="images/image1.gif" border="0" width="50" height="50" onmouseover="this.src='images/images2.gif';" onmouseout="this.src='images/image1.gif';" onclick="this.src='images/image3.gif';" style="cursor:pointer;" />

It's a lot shorter than using all of the code required by DW:

<script language="JavaScript" type="text/JavaScript">
<!--

<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}

function popUpFlyer(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=320,height=228,left = 0,top = 400');");
}

function popUpAudio(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=600,height=100,left = 0,top = 0');");
}
//-->
</script>
<link href="austin.css" rel="stylesheet" type="text/css">
</head>

<body bgcolor="#000000" onLoad="javascript:popUpFlyer('flyer/webflyer-pourhouse.gif')" onLoad="MM_preloadImages('navbar/centerframe_r2_c2_f3.gif','navbar/centerframe_r2_c2_f2.gif','navbar/centerframe_r2_c2_f4.gif','navbar/centerframe_r4_c5_f3.gif','navbar/centerframe_r4_c5_f2.gif','navbar/centerframe_r4_c5_f4.gif','navbar/centerframe_r5_c4_f3.gif','navbar/centerframe_r5_c4_f2.gif','navbar/centerframe_r5_c4_f4.gif','navbar/centerframe_r7_c3_f3.gif','navbar/centerframe_r7_c3_f2.gif','navbar/centerframe_r7_c3_f4.gif')"><body bgcolor="#000000">


<a href="javascript:popUpAudio('audio/01 - Two Hundred Miles.mp3')" onClick="MM_nbGroup('down','navbar1','centerframe_r2_c2','navbar/centerframe_r2_c2_f3.gif',1);" onMouseOver="MM_nbGroup('over','centerframe_r2_c2','navbar/centerframe_r2_c2_f2.gif','navbar/centerframe_r2_c2_f4.gif',1)" onMouseOut="MM_nbGroup('out');"><img name="centerframe_r2_c2" src="navbar/centerframe_r2_c2.gif" width="200" height="20" border="0" alt=""></a>

You have 2 body tags, btw.



-james