Infobex NEBEN Mini-Bild

[Andi]

Hallo zusammen,

ich möchte auf meiner Homepage Zeichnungen von mir zeigen.
Wenn ich mit der Maus über ein verkleinertes Bild fahre, soll sich wie in folgendem Beispiel eine Box öffnen, in welchem das vergrößerte Bild ist:
http://selfaktuell.teamone.de/tippstricks/css/infobox/beispiel1.htm#

Soweit hab ichs auch hingebracht. ;-)
Aber nun meine Frage:
Wie mach ich das, dass das große Bild dann NEBEN dem kleinen Bildchen angezeigt wird, wenn die Infobox offen ist?
Momentan ist oben immer das kleine Bildchen und drunter das Vergrößerte... aber das stört mein Auge! ;-)

Ich kopier euch mal einen Auszug aus meinem Text:
<style type="text/css">
<!--
 #box {
 position:absolute;
         }

#box a {
 color:#ffffff;
 background:#ffffff;
 font:bold 16px verdana, sans-serif;
 text-decoration:none;
 display:block;
 padding:5px;
         border:1px solid black;
         }

#box a:hover {
 color:black;
 background:#ffffff;
 width:400px;}

#box a span {display:none;}

#box a:hover span {
 color:black;
 background:#ffffff;
 font:normal 16px courier, sans-serif;
 display:block;
 padding:10px;}
 -->
</style>
...
...
<table >
 <tbody>
  <tr>
   <td width=250>
   <div>
                         <div id="box"><a href="#"><img src="pilze.jpg" alt="" border="1"><span><img src="pilze_big.jpg" alt="" border="1"></span></a></div>
   </div>
                         <img src="pilze.jpg" alt="Pilze" border="1">
                         </td>
   <td><img src="ue_ei.jpg" alt="Überraschungseier" border="1"></td>
  </tr>
  <tr>
   <td width=250><font size="-1">Graphit- und Aquarellstift<br> Din A 3, 2000</font></td>
   <td><font size="-1">Graphit- und Aquarellstift<br> Din A 3 2000</font></td>
  </tr>
 </tbody>
</table>

Ach ja... nicht wundern, ich möchte immer zwei Bilder nebeneinander zeigen, aber nicht beide in einer Box! ;-) Das sollte also nicht verwirrend sein mit dieser Tabelle.

MfG, Andi