/*
HoverImage

Im Container (z.B. span) müssen zwei Bilder enthalten sein. Eines davon muss
mit der Klasse *hoverimage_default* und eines mit der Klasse *hoverimage_hover* 
markiert werden.

z.B. so:
    
    <style...>
        .hoverimage_hover{
          display: none;
        }
    </style>
    
    ...

    <span class="hoverimage">
      <img src="standardbild.gif" 
        class="hoverimage_default" alt="" 
      /><img src="hoverbild.gif" 
        class="hoverimage_hover" alt="" 
      />
    </span>
*/
jQuery.fn.hoverimage = function() {
    return this.each(function() {
        
        var $container = jQuery(this);
        var $hoverimage_default = jQuery($container.find("img.hoverimage_default")); 
        var $hoverimage_hover = jQuery($container.find("img.hoverimage_hover"));
        
        $hoverimage_default.show();
        $hoverimage_hover.hide();
        
        $container.hover(
            function() {
                $hoverimage_hover.show();
                $hoverimage_default.hide();
            },
            function() {
                $hoverimage_default.show();
                $hoverimage_hover.hide();
            }
        );
        
    });
}


jQuery(document).ready(function() {
    /*
    Hiermit wird das "HoverImage" für alle Container aktiviert, die mit
    der CSS-Klasse "hoverimage" gekennzeichnet wurden. 
    */
    jQuery(".hoverimage").hoverimage();
});