So is there only one spot to click in each image???
That is, if your first image is showing a door and a window, do you want something different to happen if the door is clicked on vs. if the window is clicked on?
Or is clicking anywhere in the image sufficient?
In any case, I think I'd do this by having *ONE* image, only. And all you do is change the SRC= of the image (and, optionally, the ALT=). The onclick simply leads to a single function that checks the SRC property of the image and decides what to do based on that.
*Assuming* that clicking anywhere in the image is enough:
But that will be an AWFULLY simplistic game, with only the need to click anyplace on the image to proceed to the next step.
function room( p, n, a, d )
this.pic = p;
this.next = n;
this.alt = a;
this.description = d;
var rooms = new Array(
new room("DUMMY","room1","DUMMY","DUMMY for startup"),
new room("room1","room1A","Entryway","In the entry with the door closed"),
new room("room1A","room2","Entryway, door open","You feel a draft "),
new room("room2","room3","Living room","In the living room with door to dining"),
new room("room3","room3A","Dining room","The china cabinet is closed"),
... etc. ...
function findRoom( picname )
for ( var r = 0; r < rooms.length; ++r )
if ( rooms[r].pic == picname ) return rooms[r];
return null; // ???
function roomClick( )
var image = document.getElementById("theRoom");
var temp = image.src.split("/");
var pic = temp[temp.length-1]; // get only name
pic = pic.replace(".jpg",""); // strip off the extension
// look through all rooms to find this one
var curroom = findRoom( pic );
if ( curroom == null ) return; // impossible?
var nextpic = curroom.next;
var nextroom = findRoom( nextpic );
if ( nextroom == null ) return; // can't move from current room??
// okay, found room to move to, so do it:
image.src = nextroom.pic + ".jpg";
image.alt = nextroom.alt;
document.getElementById("description").innerHTML = nextroom.description;
<body onload="roomClick( );">
<img id="theRoom" src="DUMMY.jpg" alt="DUMMY" onclick="roomClick( );">
<div id="description">nothing to start</div>
If this is for homework, then I wrote too much code for you. If this really is for a game, then you need to think a lot about how to improve it.