Image

Help! I've created a bit of javascript, but I have no clue how to integrate it into a livejournal layout! I'm using generator, free account.


<script language="javascript1.1">
<!--
img1=new Image(84,59)
img1.src="urban_red.gif"
img2=new Image(84,59)
img2.src="urban_red1.gif"
img3=new Image(86,71)
img3.src="urban_aqua.gif"
img4=new Image(86,71)
img4.src="urban_aqua1.gif"
img5=new Image(79,48)
img5.src="urban_taupe.gif"
img6=new Image(79,48)
img6.src="urban_taupe1.gif"
img7=new Image(88,48)
img7.src="urban_royal.gif"
img8=new Image(88,48)
img8.src="urban_royal1.gif"
img9=new Image(72,41)
img9.src="urban_purple.gif"
img10=new Image(72,41)
img10.src="urban_purple1.gif"
img11=new Image(85,58)
img11.src="urban_green.gif"
img12=new Image(85,58)
img12.src="urban_green1.gif"
img13=new Image(69,44)
img13.src="urban_sunflower.gif"
img14=new Image(69,44)
img14.src="urban_sunflower1.gif"

function alter(objname,obj){
if (document.images)
document.images[objname].src=obj.src
}
//-->
</script>

<img src="urbanback.gif" usemap="#colors" border="0"
style="position:absolute;top:0px;left:0px;"/>
<img src="urban_red1.gif" name="static1" id="static1"
style="position:absolute;left:149px;top:63px;"/>
<img src="urban_aqua1.gif" name="static2" id="static2" style="position:absolute;left:164px;top:126px;"/>
<img src="urban_taupe1.gif" name="static3" id="static3" style="position:absolute;left:166px;top:228px;"/>
<img src="urban_royal1.gif" name="static4" id="static4" style="position:absolute;left:171px;top:283px;"/>
<img src="urban_purple1.gif" name="static5" id="static5" style="position:absolute;left:194px;top:363px;"/>
<img src="urban_green1.gif" name="static6" id="static6" style="position:absolute;left:144px;top:486px;"/>
<img src="urban_sunflower1.gif" name="static7" id="static7" style="position:absolute;left:164px;top:557px;"/>


<map name="colors" id="colors">
<area shape="rect"
href="http://www.livejournal.com/userinfo.bml?user=ashers_sparks"
coords="0,58,152,114"
onmouseover="alter('static1',img1)"
onmouseout="alter('static1',img2)">

<area shape="rect"
href="http://www.livejournal.com/users/ashers_sparks/friends/"
coords="46,165,154,204"
onmouseover="alter('static2',img3)"
onmouseout="alter('static2',img4)">

<area shape="rect"
href="http://www.livejournal.com/users/ashers_sparks/calendar/"
coords="31,217,116,254"
onmouseover="alter('static3',img5)"
onmouseout="alter('static3',img6)">

<area shape="rect" href="http://www.livejournal.com/tools/memories.bml?user=ashers_sparks"
coords="40,309,176,359"
onmouseover="alter('static4',img7)"
onmouseout="alter('static4',img8)">

<area shape="rect"
href="http://www.livejournal.com/friends/add.bml?user=ashers_sparks" coords="50,380,136,394"
onmouseover="alter('static5',img9)"
onmouseout="alter('static5',img10)">

<area shape="rect" href="http://propheticsparks.com"
coords="29,495,79,511"
onmouseover="alter('static6',img11)"
onmouseout="alter('static6',img12)">


<area shape="rect" href="http://propheticsparks.com"
coords="79,487,127,532"
onmouseover="alter('static6',img11)"
onmouseout="alter('static6',img12)">

<area shape="rect" href="http://propheticsparks.com/100x100"
coords="24,551,113,615"
onmouseover="alter('static7',img13)"
onmouseout="alter('static7',img14)">


</map>




And (here) is a preview of what it should look like, without the lj tables. Essentially, this would be the background of the page, with the navigation to the side of the tables. I have the whole layout set up, just minus integrating the javascript. Anyone have ANY ideas??