Need to relate random content to specific content

Hi guys, I’m a real amateur. I’m just a lawyer with a blog

iusandlaw.blogspot.com

I’ve been able to change it a little bit with the help of mighty google. But now I reached my limits: I want to do something I just can’t do.

I have a random header image installed. And I have navigation bar, very amateur, which is actually the creation of the template creator Gecko&Fly.

Here’s the script of the random image.

<script type=’text/javascript’>

var banner= new Array()

banner[0]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.jpg&quot;[/url]
banner[1]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.1.jpg&quot;[/url]
banner[2]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.2.jpg&quot;[/url]
banner[3]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.3.jpg&quot;[/url]
banner[4]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.4.jpg&quot;[/url]
banner[5]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.5.jpg&quot;[/url]
banner[6]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.6.jpg&quot;[/url]
banner[7]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.7.jpg&quot;[/url]
banner[8]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.8.jpg&quot;[/url]
banner[9]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.9.jpg&quot;[/url]
banner[10]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.10.jpg&quot;[/url]
banner[11]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.11.jpg&quot;[/url]
banner[12]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.12.jpg&quot;[/url]
banner[13]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.13.jpg&quot;[/url]
banner[14]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.14.jpg&quot;[/url]
banner[15]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.15.jpg&quot;[/url]
banner[16]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.16.jpg&quot;[/url]
banner[17]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.17.jpg&quot;[/url]
banner[18]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.18.jpg&quot;[/url]
banner[19]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.19.jpg&quot;[/url]
banner[20]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.20.jpg&quot;[/url]
banner[21]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.21.jpg&quot;[/url]
banner[22]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.22.jpg&quot;[/url]
banner[23]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.23.jpg&quot;[/url]
banner[24]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.24.jpg&quot;[/url]
banner[25]=&quot;[url]http://photos1.blogger.com/blogger/2915/509/1600/pic.25.jpg&quot;[/url]

var random=Math.round(25*Math.random());

document.write(&quot;<style>&quot?;
document.write(&quot;#headr {&quot?;
document.write(‘ background:url(&quot;’ + banner[random] + ‘&quot? no-repeat left TOP;’);
document.write(&quot; }&quot?;
document.write(&quot;</style>&quot?;

</script>

And here’s the relevant part of the “supernav” (navigationbar)

#supernav {
font: bold 12px/12px Impact, Verdana, Lucida Grande, Arial, Sans-Serif;
position: absolute;
top: 181px;
left: 50%;
width: 720px;
margin: 0 0 0 -360px;
padding: 5px 16px; /* duplicate the tab size */
text-align: left;
display: block;
}

#supernav li {
margin: 0;
padding: 0;
text-transform: lowercase;
display: inline;
}

#supernav a {
color: #000000;
background: #FFFFFF;
font-weight: normal;
height: 19px;
padding: 5px 16px;
/* round corner tab – not for IE */
-moz-border-radius-topright: 6px;
-moz-border-radius-topleft: 6px;
}

#supernav a:hover {
text-decoration: underline;
}

#supernav .current_page_item a {
color: #111;
background: #999;
text-decoration: none;
/* round corner tab – not for IE */
-moz-border-radius-topright: 6px;
-moz-border-radius-topleft: 6px;
}

(and later on…)

<ul id=’supernav’>
<li><a href=’http://iusandlaw.blogspot.com’>Home</a></li>

<li><a href=’http://iusandlaw.blogspot.com/2005/05/este-blog-naci-el-4-de-mayo-de-2005-por.html’>Sobre el autor</a></li>
<li><a href=’http://iusandlaw.blogspot.com/search/label/Arte’>arte, arte, arte!</a></li>
<li><a href=’http://iusandlaw.blogspot.com/search/label/Viaje’>Crónicas Europeas</a></li>
<li><a href=’http://www.flickr.com/photos/raxphotos/sets/72157594159366227/’>Flickr Set</a></li>

</ul>

(I think is a wdiget in new blogger beta).

PLaying with the nav html, I’ve managed to duplicate it and I put it hight on the header, as you can see in my blog: [URL=”http://iusandlaw.blogspot.com”]iusandlaw.blogspot.com[/URL].

(It’s just a black rectangle up and to the right over the header).

What I want to do is to relate every image that appears to specific text and a link that would have to appear every time the image changes. Basically, what I want to do is to say where the picture was taken. If it can link to a specific google maps link, that would be greate.

Any ideas? I’ve tried de If (function) thing, but coudn’t do it. Hope someone can help! Best,

R.

Also in #JavaScript _↴