We flashu czu Jquery,w czym łatwiej ?

[maciejkk]

Oto demo: http://devplugin.pl/materialy/boisko/

Przesłałeś mi plik JPG, a mi chodziło bardziej o pociętą grafikę, więc zrobiłem to po swojemu ;p

Struktura HTML:

Kod:

<div id="content">  
        <span>Top; </span>
        <span>Left; </span>
    <div id="boisko">
        <div class="zawodnik" id="z1" ><img src="zawodnik.jpg" /></div>
        <div class="zawodnik" id="z2" ><img src="zawodnik.jpg" /></div>
        <div class="zawodnik" id="z3" ><img src="zawodnik.jpg" /></div>
        <div class="zawodnik" id="z4" ><img src="zawodnik.jpg" /></div>
        <div class="zawodnik" id="z5" ><img src="zawodnik.jpg" /></div>
        <div class="zawodnik" id="z6" ><img src="zawodnik.jpg" /></div>
        <div class="zawodnik" id="z7" ><img src="zawodnik.jpg" /></div>
        <div class="zawodnik" id="z8" ><img src="zawodnik.jpg" /></div>
        <div class="zawodnik" id="z9" ><img src="zawodnik.jpg" /></div>
    </div>
</div>

CSS:

Kod:

#boisko {
    height:646px;
    width:800px;
    background:url(boisko.jpg) top left no-repeat;
    position:relative;
}
#boisko .zawodnik {
    height:12px;
    width:12px;
    background:#5592a4;
    border:solid 1px #315560;
    position:absolute;
}
#boisko #z1 {
    top: 300px;
    left: 74px;
}
#boisko #z2 {
    top: 490px;
    left: 140px;
}
#boisko #z3 {
    top: 90px;
    left: 140px;
}
#boisko #z4 {
    top: 300px;
    left: 180px;
}
#boisko #z5 {
    top: 300px;
    left: 401px;
}
#boisko #z6 {
    top: 110px;
    left: 650px;
}
#boisko #z7 {
    top: 450px;
    left: 650px;
}
#boisko #z8 {
    top: 300px;
    left: 725px;
}
#boisko #z9 {
    top: 300px;
    left: 620px;
}

Kod jQuery:

Kod:

$(document).ready(function (){
    //Pozycja kursora, ułatwiająca umieszczenie zawodnika na boisku
    $("#boisko").mousemove(function(e){
            $("span:first").text("Top: "+(e.pageY-this.offsetTop));
            $("span:last").text("Left: "+(e.pageX-this.offsetLeft));
    });
    
    //Oblewanie zdjecia zawodnika dodatkowymi elementami
    $(".zawodnik img").wrap("<div class='zdj'></div>");
    $(".zawodnik .zdj").wrap("<div class='wrap'></div>");
    //Nadanie stylu klasie wrap
    $(".zawodnik .wrap").css("position", "relative");
    //Ukrywanie zdjęcia
    $(".zawodnik .wrap .zdj").hide();
    //Umieszczenie zdjęcia obok kwadratu (zawodnika)
    $(".zawodnik .wrap .zdj").css({
        "position": "absolute",
        "bottom": 0,
        "left": 3
    });
    
    //Najazd myszki na dany kwadrat
    $(".zawodnik").mouseover(function(){
         $(this).children(".wrap").children(".zdj").show(150);
    });
    //Zjechanie  
    $(".zawodnik").mouseout(function(){
        $(this).children(".wrap").children(".zdj").fadeOut(150);
    });
});