Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
We flashu czu Jquery,w czym łatwiej ? - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: We flashu czu Jquery,w czym łatwiej ? (/thread-we-flashu-czu-jquery-w-czym-latwiej)

Strony: 1 2

RE: We flashu czu Jquery,w czym łatwiej ? - maciejkk - 31-12-2010

(31-12-2010, 22:19)puma napisał(a): o proszę :
[Obrazek: kt7433_boisko.png]

numerki na koszulkach później dopisze

a gracz niech będzie narazie taki:
[Obrazek: th1001_gracz.png]

a kursor może pozostać,a chyba nawet musi ten zwykły,normalny z Widowsa (strzałka)

Jeśli możesz prześlij mi na e-mail devplugin.pl tą grafikę.

RE: We flashu czu Jquery,w czym łatwiej ? - puma - 31-12-2010

wysłałem na info@ ...

RE: We flashu czu Jquery,w czym łatwiej ? - Kartofelek - 01-01-2011

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;}

RE: We flashu czu Jquery,w czym łatwiej ? - maciejkk - 01-01-2011

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);
    });
});


RE: We flashu czu Jquery,w czym łatwiej ? - puma - 01-01-2011

ok,czekam na gotowca bo jak próbuje sam to mi krzaki wychodzą Smile

RE: We flashu czu Jquery,w czym łatwiej ? - maciejkk - 01-01-2011

(31-12-2010, 22:38)puma napisał(a): wysłałem na info@ ...

(01-01-2011, 16:25)puma napisał(a): ok,czekam na gotowca bo jak próbuje sam to mi krzaki wychodzą Smile

Patrz post wyżej Smile

RE: We flashu czu Jquery,w czym łatwiej ? - puma - 01-01-2011

Niewiem jak Ci dziękować Big Grin
Ide kombinować tak żeby pasowało do strony.