How to replace a logo with another one when moving the pointer over it?

How can I let my logo exchange with another one using css (like it is here: http://www.temp.galerie-der-fotos.de/dateien/tooltip-bild-2.htm) or in another way when hovering: so when you move the pointer over the image / logo it shall be replaced by another one.

The css code of gallery\themes\ice\css\dirkice_header.css is:

#gsHeader{
  height: 81px; 
  text-align: left; 
  padding: 0px 0px 0px 0px;
  border: 0 0 0 0; 
  background-image: url('../images/dalmatiner-portrait-mit-fliege-schrift-8.png'); 
  background-repeat: no-repeat;
}

The (I assume) relevant code in theme.tpl this:

      <div id="gsHeader" >
        <table width="100%" cellspacing="0" cellpadding="0">
		{if !empty($theme.params.TopBlocks)} 
		    {assign var="lastIndex" value=0}
			{foreach from=$theme.params.TopBlocks item=block}
			<tr>
				{if ($lastIndex == 0)}
		            <td width="100%" align="right" valign="top" >
			     		{if !empty($theme.params.SystemLinksTop)}
					    <div class="gbSystemLinks">
							{if !empty($theme.params.extraLink) && !empty($theme.params.extraLinkUrl)}
							    <span class="block-core-SystemLink">
						               <a href="{$theme.params.extraLinkUrl}">{$theme.params.extraLink}</a>
							    </span>
							    {$SystemLinksSeparator}
						    {/if}

...and so on

How can I set a link to replace the logo / image with another one when hovering the pointer or how else could I do it?

Nice greetings, Dirk.