Swapping two images that are links ( part 2)

hablablow · Sep 12, 2000

Thanks Rob for your reaction, I didn't imagine this question could generate feedback. Your answer is not very clear for my basic skills in javascript but i will try hard
to make it come alive. I think your idea is to swap two images in the same onMouseOver action.
I don't know maybie you can switch to this adress to have a graphic example of my problem.
On this page the first image is the mouth the second the number "two". I can easely understand this part of the script. My problem comes when i want to have a link on this second image "two" that swaps into "one" and the mouth that swaps into the tongue, at the same time.
Here is the adress:

http://www.easyjavascript.com/change2.htm.

Maybie the answer is under my eyes and it is just an ability to be logic with 4 variables.
Anyway thanks again for your answer. [sig][/sig]

RobSchultz · Sep 12, 2000

Yes, switch two (or twenty) images in the same mouseover action. The more complex you get the more you need to think about encapsulation (all switches in functions (my term)). Consider...

Code:

<html>
<head>
<script language=&quot;javascript&quot;>
 function fnSwapMouthNumber(type){
  if (type==1){
   mouth.src='mouth2.gif';
   number2.src='number1.gif';}
  else{
   mouth.src='mouth1.gif';
   number2.src='number2.gif';}
 }
</script>
</head>
<body>
<img src=&quot;mouth1.gif&quot; id=&quot;mouth&quot; onMouseOver=&quot;fnSwapMouthNumber(1)&quot; onMouseOut=&quot;fnSwapMouthNumber(0)&quot; border=0>
<br>
<img src=&quot;number2.gif&quot; id=&quot;number2&quot; border=0>
</body>
</html>

Hopefully this code is clearer. It is a working example (just come up with gifs named mouth1, mouth2, number1, number2). Note the "id=" in each img tag. This is how javascript knows which image to use. I used the "type" variable and if-else statement to cut down on the number of functions required. If I understand you correctly the page you reference is one you found and are trying to follow the code on. Don't get confused by the eval and new Image statements. The eval statement is used (in this case) to make it easier to change a sequence of images (image01.gif, image02.gif, etc) while the new Image statement is used to preload the image (study up on this).

Hope this helps,
Rob
p.s. If you have any more questions on this then kill this thread and use the original one. [sig][/sig]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Swapping two images that are links ( part 2)

hablablow

Programmer

RobSchultz

Programmer

Similar threads

Part and Inventory Search

Sponsor