Problem med mouse rollover

Jag använder mig av ett mouse rollover script för att när man drar över en rubrik så visas en bild drar man över rubrik 2 så visas bild 2. Men nu har jag fått ett problem jag vill också att en text ska synas under rubrikerna när man drar över dom. Det har jag också lyckats så när jag drar över rubrik 1 så kommer texten fram och den ändras när jag drar över rubrik 2.

Men nu till problemet, jag vill att bilden och texten för rubrik 1 ska synas från början och att det sen ändras när man drar över andra rubriker. Jag har lyckats att få bilden att synas från början men lyckas inte med texten.

Jag använder mig av div taggar för texten och display none ändrar jag detta så den syns hela tiden så blir det fel för då lägger sig dom andra texterna under första texten.

Jag klistrar in koden här så kanske någon kan hjälpa mig.

javascript koden

<script language="javascript" type="text/javascript">

function bildRubrik(src) {
document.getElementById('bildens_id').src = src;
}

function toggleText(id) {
var s = document.getElementById(id).style
s.display = s.display=='none' ? '' : 'none';
}
</script>

koden innan för body

<span class="rubriker">
<img src="rubrik1.jpg" id="bildens_id">
<span class="a1" onMouseOver="bildRubrik('bild1.jpg');toggleText('text1')" onMouseOut="toggleText('text1')">text</span>

<span class="a1" onMouseOver="bildRubrik('bild 2.jpg');toggleText('text2')" onMouseOut="toggleText('text2')">text 2</span>

<span class="a1" onMouseOver="bildRubrik('bild 3.jpg');toggleText('text3')" onMouseOut="toggleText('text3')">text 3</span>

<span class="a1" onMouseOver="bildRubrik('bild4.jpg');toggleText('text4')" onMouseOut="toggleText('text4')">text 4</span>

<span class="a1" onMouseOver="bildRubrik('bild5.jpg');toggleText('text5')" onMouseOut="toggleText('text5')">text 5</span>
</span>

<span class="underrubriker">
<span>
<div id="text1" style="display:none;">
text 1
</div>
<div id="text2" style="display:none;">
text 2
</div>
<div id="text3" style="display:none;">
text 3
</div>
<div id="text4" style="display:none;">
text 4
</div>
<div id="text5" style="display:none;">
text 5
</div>
</span>