We flashu czu Jquery,w czym łatwiej ?

[Kartofelek]

Ogólnie już to opisywałem na tym forum. Zrób to jako ostylowaną ul.

Kod:

<ul class="zawodnicy">
<li class="zawodnik_nr...."><span class="koszulka">nr zawodnika</span><span class="obrazek_zawodnika"><img ......obrazek zawodnika /></span></li>
....
</ul>

Kod:

Lista: wymiary takie jak boisko, pozycja relatywna; background:url(...boisko) no-repeat;
LI: pozycja absolutna
LI.zawodnik_nr1 {left:....px; top:....px;}
LI.zawodnik_nr2 {left:....px; top:....px;}
......
.koszulka {width:px; height:px; overflow:hidden; text-indent:-999px; background:url(......) no-repeat; cursor:pointer;}
.obrazek_zawodnika {display:none; position:absolute; top:30px; left:30px; paddign:2px; background:#fff; border:1px solid #333; ...........}

Teraz do tego skrypt:

Kod:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

    $('.zawodnicy .koszulka')
    .mouseover(function() {
         $(this).parent().find('.obrazek_zawonika').fadeIn();
    })
    .mouseout(function() {
         $(this).parent().find('.obrazek_zawonika').fadeOut();
    });

});
</script>

Możesz też bez problemu nieco inaczej pociąć (wstawić obrazek do spana koszulka i wyłączyć overflow:hidden dla koszulki). Dzięki temu zwykły hover CSS wystarczy (.koszulka:hover .zdjecie_zawodnika {display:block;}