Javascript image swapping issues

Soldato
Joined
23 Oct 2002
Posts
4,154
Location
_
Hi, I'm having some ridiculous issues with javascript right now.

I've got some arrows that order some tabular data in a web page. The HTML element that controls this is:

Code:
<a href="#" onMouseOver="MM_swapImage('indicator1','','images/result_headers/price_ondown.gif',1)" onclick="changeSort(1);" onmouseout="MM_swapImgRestore()" id="link1" name="link1" title="price">
    <img src="images/result_headers/price_off.gif" id="indicator1" name="indicator1" alt="Price" />
</a>

The function declared in the onclick attribute with the parameter of 1 is this:

Code:
function changeSort(str)
{
	ammendSortFlags(str)
	showList("")
}

Ignore showList("") because the function ammendSortFlags(str) looks like this:

Code:
function ammendSortFlags(val)
{
	var prevSort = parseInt(document.getElementById("sortCol").value);

	var imageType = '';
	var prevImageType = '';
	var imageName = 'indicator' + val;
	var linkName = 'link' + val;
	var prevLinkName = '';

	switch(val) {
		case 1:
			imageType = 'price';
			break;
		case 2:
			imageType = 'location';
			break;
		case 3:
			imageType = 'make';
			break;
		case 4:
			imageType = 'bedrooms';
			break;
	}

	if (document.getElementById("sortCol").value == val)
	{
		if (document.getElementById("sortDir").value == "ASC")
		{
			document.getElementById(imageName).src = 'images/result_headers/' + imageType + '_ondown.gif';
			document.getElementById("sortDir").value = 'DESC';

			document.getElementById(linkName).setAttribute('onMouseOver','MM_swapImage(\'indicator'+val+'\',\'\',\'images/result_headers/' + imageType + '_onup.gif\',1)');
		}
		else
		{
			document.getElementById(imageName).src = 'images/result_headers/' + imageType + '_onup.gif';
			document.getElementById("sortDir").value = 'ASC';

			document.getElementById(linkName).setAttribute('onMouseOver','MM_swapImage(\'indicator'+val+'\',\'\',\'images/result_headers/' + imageType + '_ondown.gif\',1)');
		}
	}
	else
	{
		var prevIimageName = "indicator"  + prevSort;
		prevLinkName = 'link' + val;

		switch(prevSort) {
			case 1:
				prevImageType = 'price';
				break;
			case 2:
				prevImageType = 'location';
				break;
			case 3:
				prevImageType = 'make';
				break;
			case 4:
				prevImageType = 'bedrooms';
				break;
		}

		document.getElementById(prevIimageName).src="images/result_headers/" + prevImageType + "_off.gif"
		document.getElementById(imageName).src="images/result_headers/" + imageType + "_offdown.gif"

		document.getElementById(prevLinkName).setAttribute('onMouseOver','MM_swapImage(\'indicator'+val+'\',\'\',\'images/result_headers/' + imageType + '_ondown.gif\',1)');
		
		document.getElementById("sortCol").value = val;
		document.getElementById("sortDir").value = "ASC";
	}
}

My issue is that the lines:

Code:
document.getElementById(imageName).src = 'images/result_headers/' + imageType + '_ondown.gif';

and

Code:
document.getElementById(imageName).src = 'images/result_headers/' + imageType + '_onup.gif';

don't actually work. They maintain the original src in the image which was price_off.gif

Does anybody actually see what could be the cause of the problem here, because I've tried moving it around and moving it back. The swapImage and imageRestore functions do work (They're standard Macromedia functions), but I wonder if the imageRestore is somehow caching and remember the original image src and not acknowledging any changes I make to the actual image?

When selecting my elements in my page and viewing selection source in Firefox, the original image of price_off.gif is still present as though no modification has been made.

Any help's appreciated, as I'm at the end of my tether!

The code for the swapping functions is shown below, although it's quite hard to read, and has been proven across many other sites in the past.

Code:
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_preloadImages() { //v3.0
getLinksToBlur()
  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_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v3.0
  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); return x;
}

Cheers,

Karl.
 
Last edited:
FYI, the element.setAttribute('attribute','value'); property doesn't work in IE6 or IE7, and when you use element.attribute = 'value';, it won't work in either Firefox or IE6 or IE7 when you use it to alter the properties of event listeners (onMouseOver, onMouseOut).

I got around this problem by using CSS rollovers and altering the class of the Div that held the image.

Thanks for the views, I know it was a tricky one. :)
 
Back
Top Bottom