Q1270 Why when clicking a link can I not get two images to swap their sources, only one appears to do so?

You are here: irt.org | FAQ | JavaScript | Link | Q1270 [ previous next ]

Create two sets of three images:

home0.gif
home1.gif
home2.gif
test0.gif
test1.gif
test2.gif

Then use the following test JavaScript code and follow the instructions at the end:

<script language="JavaScript"><!--
if (document.images) {
    home0 = new Image(); home0.src = "home0.gif";
    home1 = new Image(); home1.src = "home1.gif";
    home2 = new Image(); home2.src = "home2.gif";
    test0 = new Image(); test0.src = "test0.gif";
    test1 = new Image(); test1.src = "test1.gif";
    test2 = new Image(); test2.src = "test2.gif";
}

function change1(name,no) {
    if (document.images) {
        document.images[name].src = eval(name + no + '.src');
    }
}

function change2(name1,no1,name2,no2) {
    if (document.images) {
        document.images[name1].src = eval(name1 + no1 + '.src');
        document.images[name2].src = eval(name2 + no2 + '.src');
    }
}

function change3(name1,no1,name2,no2) {
    if (document.images) {
        document.images[name1].src = eval(name1 + no1 + '.src');
        document.images[name2].src = eval(name2 + no2 + '.src');
    }
    return false;
}

var url;

function change4(name1,no1,name2,no2,href) {
    if (document.images) {
        document.images[name1].src = eval(name1 + no1 + '.src');
        document.images[name2].src = eval(name2 + no2 + '.src');
    }
    url = href
    setTimeout('location.href = url',1);
    return false;
}
//--></script>

<p>
<img name="home" width="47" height="13" border="0" alt="home" src="home0.gif">
<img name="test" width="47" height="13" border="0" alt="test" src="test0.gif">
</p>

<p>
<a href="next.htm" onMouseOver="change1('home',1);change1('test',1)" onMouseOut="change1('home',0);change1('test',0)" onClick="change1('home',2);change1('test',2)">test 1</a>
</p>

<p>
<a href="next.htm" onMouseOver="change1('home',1);change1('test',1)" onMouseOut="change1('home',0);change1('test',0)" onClick="change2('home',2,'test',2)">test 2</a>
</p>

<p>
<a href="next.htm" onMouseOver="change1('home',1);change1('test',1)" onMouseOut="change1('home',0);change1('test',0)" onClick="return change3('home',2,'test',2)">test 3</a>
</p>

<p>
<a href="next.htm" onMouseOver="change1('home',1);change1('test',1)" onMouseOut="change1('home',0);change1('test',0)" onClick="return change4('home',2,'test',2,this.href)">test 4</a>
</p>

First do mouseovers on all four links - they all swap both images on mouse over/out.

Then click test 1 (make sure you haven't got a next.htm page) - the home image swaps, but not the test, and you get a page not found.

Then click test 2 (make sure you haven't got a next.htm page) - the home image swaps, but not the test, and you get a page not found.

Then click test 3 (make sure you haven't got a next.htm page) - the home image swaps AND the test image swaps, and you don't get a page not found.

Then click test 1 (make sure you haven't got a next.htm page) - the home image swaps AND AMAZINGLY the test image swaps, and you get a page not found.

Then click test 2 (make sure you haven't got a next.htm page) - the home image swaps AND AMAZINGLY the test image swaps, and you get a page not found.

This shows that the browsers "logic" has somehow changed!

Then close the browser completely down and restart it again.

Then click test 1 (make sure you haven't got a next.htm page) - the home image swaps, but not the test, and you get a page not found.

Then click test 2 (make sure you haven't got a next.htm page) - the home image swaps, but not the test, and you get a page not found.

Then click test 4 (make sure you HAVE got a next.htm page) - the home image swaps, and the test image swaps, and the page changes.

The solution is to just use test 4 in all circumstances.