Каким образом в данном случае связаны эти 2 документа? (при помощи чего?)

HTML

<div style="position:absolute;top:140px;left:0;width:1000px;height:210px;">
                    <div id="cover" style="display:none;"> 
                    <!-- cover layer -->
                      <img style="left:11px;top:123px;" src="img/r_1.gif">
                      <img style="left:118px;top:46px;" src="img/r_2.gif">
                      <img style="left:114px;top:96px;" src="img/r_3.gif">
                      <img style="left:220px;top:66px;" src="img/r_4.gif">
                      <img style="left:527px;top:3px;" src="img/r_5.gif">
                      <img style="left:82px;top:85px;" src="img/r_6.gif">
                      <img style="left:329px;top:34px;" src="img/r_7.gif">
                    </div>
                      <img style="position:absolute;left:0px;top:0px;z-index:10;width:1000px;height:210px" 
                        src="img/x1x1.gif" usemap="#Map">
                      <img id='flag' style="display:none;position:absolute;left:0px;top:0px;" src="img/Flag04.gif">
                    </div>
...
<map name="Map" id="Map">
<area shape="poly" coords="341,161,385,133,436,132,464,121,458,95,453,69,518,61,524,124,557,149,
579,167,627,156,660,176,620,190,504,199,396,189" href="#7" />
<area shape="poly" coords="545,69,627,58,738,15,861,88,757,105,854,137,862,185,745,154,691,169,635,132,588,145,548,109" href="#5" />
<area shape="poly" coords="225,155,287,122,354,87,425,72,431,109,380,114,361,130,323,154" href="#4" />
<area shape="poly" coords="148,69,211,98,289,109,343,80,382,50,308,67,254,66,249,46" href="#2" />
<area shape="poly" coords="257,122,186,120,109,143,173,157,206,160" href="#3" />
<area shape="poly" coords="125,82,207,106,91,122" href="#6" />
<area shape="poly" coords="15,152,29,134,92,129,102,147,38,184" href="#1" />
</map>

js

 $('area').mouseover(function(){
        var x=parseInt(this.href.match(/#(\d+)/)[1]);
        if(x!=prev){
            $('#cover img').stop().css({opacity:0.01});
            $('#flag').hide();
        }
        prev=x;
        var self=$('#cover img').eq(x-1);
        self.animate({opacity:0.99});
        self=self[0];
        $('#flag').css({
            top:parseInt(self.style.top)+parseInt(self.height)/2-$('#flag')[0].height
            ,left:parseInt(self.style.left)+parseInt(self.width)/2
        }).show();
        self=null;
        return false;
    }).click(function(){
        var x=parseInt(this.href.match(/#(\d+)/)[1]);
        document.location='?do=regn&id='+x;
    })

Объясните пожалуйста как связать эти два документа что бы скрипт заработал (желательно подробно, я в этом совсем новичок)

Так же пояснения.

#cover - хранилище для картинок img/r_X.gif, которые выводятся по наведению на нужную область. Они устанавливаются абсолютно над этой областью.

#map - это грубая нарезка исходной картинки на кусочки, чтобы определять какую картинку показывать. Номер в href - это порядковый номер картинки в #cover. Я делал исходную нарезку арей в Dreamweaver, вероятно, сейчас есть уже более удобные средства.

#flag - изображение флажка, который выставляется по центру выделяемой области.

Использовалась именно схема с разными картинками, так как "выделенная" область - картинка с другим изображением, чем на большой,с полутенями и деталями.