I am trying to create a webpage which does the following:
1)Has an image,which has an onclick javascript function f1() and an image map with a link pointing to a javascript function f2();
2)updateAnim() is an "animation" it changes the image sources some 30 times
3)f2() is any function(trying with alert right now.

It seems simple enough,but as soon as f2() executes, the image goes back to its original source.

Now I have been at this for quite a long time..I have tried a number of quickfixes from changing source and onload in f1 to adding an onload function that only changes values at first execution.

How can I resolve this?Since this seems simple enough,I shall only post the f2() function and the image tag.
Image tag:

<img name="MainImage" id="all" src="Animation_-_Book_opening 01.jpg" onclick="updateAnim()" border="0"  usemap="#almn" >
<map id="almn" name="almn">
<area shape="rect" alt="" title="" coords="287,255,565,380" href="" onclick="f2();" target="_self" />


function f2()

you are reloading your page, so it's normal that it's going back to the original message.

How am I reloading it?I am a newbie,so sorry if it seems dumb.

=> this specifies a link to open/go to when that element is pressed or clicked on.
since it's empty, you're just re-loading the current page