Posted by Jason Nugent on September 09, 1998 at 06:05:19:
In Reply to: Re: Jason Nugent please help. One last thing re:my rollovers posted by Darren Perara on September 08, 1998 at 18:29:41:
: I completely understand what you are saying, but its not what I'm after. I'll try to explain my exact purpose, so that you can visualise what I'm talking about. Imagine this layout of images:
: You have a rectangular image of a girls head looking straight at you (default.gif). To either side, above and below this girls head there are images of arrows (larrow.gif, rarrow.gif, farrow.gif, barrow.gif) which correspond to movement in a particular direction. The girl is required to act as a navigator. When you roll over the left arrow the central head turns to the left, when you roll over the right arrow the head turns to the right and so on. This one head is common to all four actions, and is only placed in the document once, at the centre of the four arrows. The problem is, in the HTML the image source needs to be one of the arrows, but the rollover function needs to occur on the common and central head. So the image source in each case cannot be default.gif because it needs to be larrow.gif, rarrow.gif, farrow.gif or barrow.gif. How can this problem be overcome? Does some sort of definition for the default image need to occur in the head of the document? I don't have a clue.
Ah! Now I see what you are getting at. No, you don't need to do anything special. Something like this should do the trick. I'm just going to define two images (one arrow, and the girls head).
larrow = new Image ();
larrow.src = "larrow.gif";
default = new Image ();
default.src = "head.gif"; // the default head - looking straight ahead
defaultleft = new Image ();
defaultleft.src = "defaultleft.gif"; // she's looking to the left in this one.
Ok? Three separate images. Your HTML might look something like this. I'll put the two images next to each other, but you know your layout better than I do.
<A HREF="left.html" onMouseOver="look ('default, left');return true" onMouseOut="straight ('default');return true"><IMG SRC="larrow.gif"></A>
<IMG SRC="default.gif" NAME="default">
Ok - see that? Two images. The arrow has the rollover function in it, but the HEAD image is the one with the NAME. We pass the name of the head image (default) to the rollover function, so it's the one that is affected. Your code for the look function might look like this:
function look (imgName, dir)
document[imgName].src = eval (imgName + dir + ".src");
when this function is run, the function will swap the DEFAULT image with the DEFAULTLEFT image defined up top. Your arrow won't be affected, and your head will look in the direction you want.
Is this what you wanted? I think I got it this time, but let me know anyway.