You can use a named anchor on each web page <a name="textstart"></a> right below the image:
<img id="Image1" src="http://barbaricsoftworks.com/bigPicture.jpg" alt="" usemap="#Map">
<a name="textstart"></a>
You can then add the #textstart to the url of your internal links:
<a href="http://warlordandchieftain.tumblr.com/#textstart" target="_top" class="bc_feedwebsitelink" style="text-decoration: none;"><h4 id="feedtitle" style="margin-top: 0px; display: none"><span class="bc_feedtitle">Barbaric Softworks</span></h4></a>
Unfortunately you have no way of raising the named anchors halfway down the shield image using just HTML as shown above. You can use
<body onload="window.scrollTo(0, 540)" > or just add window.scrollTo(0, 540); as the first statement in your init() function.
To make your script usable for the entire site, move your javaScript (below) to an external file so you won't have to paste the same code over and over to each page.
//====================================
var preloads=[];
var domain='http://barbaricsoftworks.com/';
function preload(){
for(var i=0;i<arguments.length;i++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=domain+arguments;
}
}
preload('jay.jpg','sam.jpg','games.jpg','contact.jpg','home.jpg');
function init(){
window.scrollTo(0, 540);
ars=document.getElementById('Map').getElementsByTagName('area');
for(c=0;c<ars.length;c++) {
ars[c].number=c;
ars[c].onmouseover=function() {
document.getElementById('Image1').src=preloads[this.number].src;
this.onmouseout=function() {
document.getElementById('Image1').src=domain+'bigPicture.jpg';
}
}
}
}
window.addEventListener? window.addEventListener('load',init,false):window.attachEvent('onload',init);
//====================================