Eredmény: 1 - 10 (10) összesen

Téma: Képcsere

  1. #1
    Új tag
    Csatlakozott
    09-03-29
    Hozzászólás
    34
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás Képcsere

    Sziasztok!

    Olyat szeretnék csinálni, hogy van 4-5 szöveg és egy kép az oldalon, és amikor az egyes szövegek fölé megyek az egérrel, akkor kicseréli a képet egy másikra.

    Tud valaki erre valami egyszerű kódot mutatni?

    Köszi.



  2. #2
    Sakkbetyár
    Csatlakozott
    08-09-28
    Hozzászólás
    564
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Képcsere

    Idézet holdenx eredeti hozzászólása Hozzászólás megtekintése
    Sziasztok!

    Olyat szeretnék csinálni, hogy van 4-5 szöveg és egy kép az oldalon, és amikor az egyes szövegek fölé megyek az egérrel, akkor kicseréli a képet egy másikra.

    Tud valaki erre valami egyszerű kódot mutatni?

    Köszi.
    Ez nagyon egyszerű:

    Kód:
    <img src="alapkép elérésnek címe" id="pic" />
    
    <a href="#" onmouseover="document.getElementById('pic').src='új kép elérésének címe';return false;">új kép 1</a>
    
    <a href="#" onmouseover="document.getElementById('pic').src='egy következő kép elérésének címe';return false;">új kép 2</a>
    Az img tagnél az id megadása a lényeg és hogy az a tagnél erre hivatkozz.



  3. #3
    In love with pixels hápi logója
    Csatlakozott
    09-03-10
    Hely
    Budapest
    Hozzászólás
    353
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Képcsere

    Vagy esetleg ha nincsen kedved a JS-hez akkor css-el;

    Kód:
    #kep{background:url('./')}
    #kep:hover{background:url('./')}



    Utoljára módosítva: hápi által : 2009-05-04 11:28

  4. #4
    Új tag
    Csatlakozott
    09-03-29
    Hozzászólás
    34
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Képcsere

    Köszi srácok.
    Ez tényleg egyszerű.



  5. #5
    Törzsvendég
    Csatlakozott
    09-01-30
    Hozzászólás
    124
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Képcsere

    Idézet holdenx eredeti hozzászólása Hozzászólás megtekintése
    Köszi srácok.
    Ez tényleg egyszerű.
    Ha nagy képről van szó, akkor érdemes a következő két csel valamelyikéhez folyamodnod:

    1. JavaScript-es megvalósítás esetén pre-loadold a felbukkanó képet.
    2. CSS esetén pedig mentsd el egy képbe a kettőt, és csak mozgasd el függőleges irányban Y pixelnyit a background-position-el.



  6. #6
    Új tag
    Csatlakozott
    09-03-29
    Hozzászólás
    34
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Képcsere

    Idézet Simulacrum eredeti hozzászólása Hozzászólás megtekintése
    Ez nagyon egyszerű:

    Kód:
    <img src="alapkép elérésnek címe" id="pic" />
    
    <a href="#" onmouseover="document.getElementById('pic').src='új kép elérésének címe';return false;">új kép 1</a>
    
    <a href="#" onmouseover="document.getElementById('pic').src='egy következő kép elérésének címe';return false;">új kép 2</a>
    Az img tagnél az id megadása a lényeg és hogy az a tagnél erre hivatkozz.

    Valamiért nem működik ez nekem. Biztos, hogy helyes a kód?



  7. #7
    Törzsvendég
    Csatlakozott
    09-01-30
    Hozzászólás
    124
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Képcsere

    Idézet holdenx eredeti hozzászólása Hozzászólás megtekintése
    Valamiért nem működik ez nekem. Biztos, hogy helyes a kód?
    Szerintem fölösleges ide JavaScript, használj inkább stíluslapot!

    CSS:
    Kód:
    #kepcsere    {
        background-image: url(./a_kep_eleresi_utja/fajl_neve.jpg);
        display: block;
        width: 640px; /* A kép szélessége pixelben. */
        height: 480px; /* A kép magassága pixelben. */
    }
    #kepcsere:hover    {
        background-position: 0px -480px; /* Az első az X a második az Y koordináta. */
    }
    HTML:
    Kód:
    <div id="kepcsere"></div>




  8. #8
    Új tag
    Csatlakozott
    09-03-29
    Hozzászólás
    34
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Képcsere

    És ez úgy is használható, ha több képet kell cserélgetni?
    Esetemben 5-6 név van, és mindegyik névhez más fénykép és térképfedvény tartozik.
    Az egyes nevek főlé érve kell váltakoznia az adott cellában a képnek.



  9. #9
    Sakkbetyár
    Csatlakozott
    08-09-28
    Hozzászólás
    564
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Képcsere

    Idézet holdenx eredeti hozzászólása Hozzászólás megtekintése
    Valamiért nem működik ez nekem. Biztos, hogy helyes a kód?
    Elvileg igen, ha jól emlékszem ki is próbáltam, tehát gyakorlatilag is.

    A css-es megoldás egyértelműen szebb és preferáltabb, ha fix képekről, képnevekről van szó.



  10. #10
    Új tag
    Csatlakozott
    09-03-29
    Hozzászólás
    34
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Képcsere

    Tényleg műxik!
    Nem tudom, hogy eddig mit bénáztam.
    Köszi.



A téma címkéi:

Könyvjelzők

Hozzászólás szabályai

  • Új témákat nem hozhatsz létre
  • Válaszokat nem küldhetsz
  • Fájlokat nem csatolhatsz
  • A hozzászólásaidat nem módosíthatod
  •