Podmiana obrazka po najechaniu myszą... Opcje

[myslas]

<a target='_blank'href='http://$strona/plik2/$plik_nazwa'><img src='images/pobieranie1.png' alt='' width='100' height='20' border='0' onMouseOver="roolover.src='images/pobieranie.png'" onMouseOut="roolover.src='images/pobieranie1.png'">


Wyświetla mi obrazek ale niestety nie zamienia go...po najechaniu myszą...

[Fifi209]

A od czego masz css ?

:hover ?

Ten post edytował fifi209 26.11.2010, 21:58:54

[Mephistofeles]

Do tego używa się CSS, a efekt nazywa się rollover, nie roolover .

[denis94]

[HTML] pobierz, plaintext 
<a target='_blank'href='http://$strona/plik2/$plik_nazwa'><img src='images/pobieranie1.png' alt='' width='100' height='20' border='0' onmouseover=\"this.src='images/pobieranie.png'\" onmouseout=\"this.src='images/pobieranie1.png'\"></a>
[HTML] pobierz, plaintext 

Ten post edytował denis94 26.11.2010, 22:02:26

[vokiel]

@denis94 nie ucz złych nawyków. Nie ma sensu robić tego w js, skoro dużo łatwiej można to zrobić w samym css. Poza tym przedstawiony przez Ciebie sposób był "do przyjęcia" ale ładnych parę/paręnaście lat temu.

[myslas]

Niestety to nie działa:( Rozumiem ale ja nie mam CMS to jest prosty skrypt dodający newsa i plik. Więc szukam rozwiązania.

@denis94 dziękuję działa:) mój błąd źle przepisałem zamykam temat:)

Ten post edytował myslas 26.11.2010, 22:21:18

[vokiel]

1. Oddzielenie JS od HTML od CSS
2. Hover w CSS a nie JS
3. CSS sprites dla pozbycia się efektu doczytywania obrazka

Jeśli poza obrazkiem nie ma tekstu to img jest tu niepotrzebny. Możesz zrobić coś na wzór tego:

[HTML] pobierz, plaintext 
<a target="_blank" href="http://$strona/plik2/$plik_nazwa" class="pobieranie"></a>
<style type="text/css">
a.pobieranie, a.pobieranie:hover{
    background: url("pobieanie_1_2.png") no-repeat 0px 0px;
    width: 100px;
    height: 20px;
    display: block;
    text-decoration: none;
}
a.pobieranie:hover{
    background-position: 0px -20px;
}
</style>
[HTML] pobierz, plaintext 

[zegarek84]

a dlaczego js zły - dlaczego hasło sprites padło w ostatnim poście - wpierw szczątkowe krytykowania a potem wskazywanie drogi?? - każdy coś wybierze - trzeba wskazywać alternatywy - już lepiej by było objaśnić co w tym html'u znaczy this (gdzie w zasadzie jest prawie eval)...

a pro po srtites "dla pozbycia się efektu doczytywania obrazka" - są także sposoby odpowiedniego zapisu html'a i css bez użycia kluczowego sprites z pozbyciem się efektu ładowania obrazka...

fakt - też nic nie pomogłem - tylko rzuciłem hasła - ale deczko mnie zirytował temat skoro On nic takiego nie napisał to dlaczego staracie się być tacy Pro - ja widzę u niego dopiero 3 posty i temat okej - jeszcze mogliście dodać, że np. onMouseOut powinno się pisać z małych liter ;p

[Fifi209]

a dlaczego js zły

Nie każdy musi mieć włączonego javascript lub nawet adblock może Ci czasem zablokować.

- dlaczego hasło sprites padło w ostatnim poście

Tak się teraz robi.

[Mephistofeles]

Niestety to nie działa:( Rozumiem ale ja nie mam CMS to jest prosty skrypt dodający newsa i plik. Więc szukam rozwiązania.

A co ma CMS do wykorzystania CSSa? Dzisiaj CSS to podstawa przy projektowaniu wyglądu, nikt normalny nie używa do tego JS czy wycofanych tagów HTMLa.

[#luq]

nikt normalny nie używa do tego JS czy wycofanych tagów HTMLa.

Moment, <img/> jest wycofywane? No bo chyba nie <a/>

[kadlub]

spróbuj tak

[HTML] pobierz, plaintext 
<a href="#"><img src="obrazek_po_opuszczeniu" style="width:300px; height:200px" 
onMouseOver="this.src='obrazek po_po_najechaniu ' "
onMouseOut="this.src='obrazek_po_opuszczeniu' "
></a>
 
 
[HTML] pobierz, plaintext 

Ten post edytował kadlub 27.11.2010, 12:25:08

[Mephistofeles]

Chodziło mi ogólnie o wygląd, np. <font>, <center> itd.
Ale tak, img (a chyba też) miał być wycofany , docelowo każdy tag miał mieć atrybut src i href, z tym, że chyba nic z tego nie wyszło.

[zegarek84]

Nie każdy musi mieć włączonego javascript lub nawet adblock może Ci czasem zablokować.

i dla przykladu jeśli kotś wchodzi na stronę przez telefon to i też nie każdy musi mieć włączone obrazki - pozatym, jak ktoś wiedział gdzie to wyłączyć to i wie gdzie włączyć jeśli coś na danej stronie chce zobaczyć ^^ - poza tym jeśli ktoś ma wyłączony js to tym bardziej ma np. wyłączony flash ^^ - a jeśli ktoś wyłącza js to i tak na pewnych stronach go włącza - prawie nikt nie wyłącza js ^^

Tak się teraz robi.

nie udaj, że nie wiesz o co mi chodziło

bądźmy świadomi jednego - uzyszkodnika nie obchodzi jak co się robi czy robiło - uzyszkodnik przykłada uwagę głównie do treści i wyglądu strony ;p

...nikt normalny nie używa do tego JS...

więc najlepiej nie używaj do niczego js'a ;] - i zapomnij o bibliotekach typu jquery - to też js ^^

niżej wszystkie wspomniane przykłady kodu html'a z pełnymi adresami do obrazków - więc wystarczy skopiować by zobaczyć jak działają

sprites:

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
      a.obrazek {
        display: block;
        width: 100px;
        height: 100px;
        background-image: url("http://www.google.pl/images/srpr/nav_logo27.png");
        background-position: 0px 0px;
      }
      a.obrazek:hover {
        background-position: 0px -100px;
      }
    </style>
  </head>
  <body>
    sprites - hover lepiej działa w tagach "a" - aczkolwiek można go stosować do dowolnego tagu nie znajdującego się w linkach - dla starszych ie jest plugin w JS
    <a class="obrazek"></a>
  </body>
</html>
[HTML] pobierz, plaintext 

css i preload:

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
      a.obrazek {
        display: block;
        width: 75px;
        height: 75px;
        background-image: url("http://forum.php.pl/uploads/av-40696.jpg");
        background-position: 0px 0px;
      }
      a.obrazek:hover {
        background-image: url("http://forum.php.pl/uploads/av-40400.png");
      }
      .preloader {
        display: block;
        width: 0px;
        height: 0px;
        position:absolute;
        left:-500px;
        top:-500px;
      }
    </style>
  </head>
  <body>
    podmiana obrazka - tła w css - i niżej preload coby nie było skoku ;p
    <a class="obrazek"></a>
    preload dla hovera na końcu strony by jako ostatnie te obrazki się doczytywały - oczywiście blok trzeba ukryć ;) - A JEDNOCZEŚNIE MUSI BYĆ WIDOCZNY GDYŻ INACZEJ SIĘ NIE DOŁADUJĄ OBRAZKI NIE WIDOCZNE
    <div class="preloader">
      <img src="http://forum.php.pl/uploads/av-40400.png" />
    </div>
  </body>
</html>
[HTML] pobierz, plaintext 

"staromodny" hover w js bez preloada obrazka:

[HTML] pobierz, plaintext 
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    javascript stare i podobno nie eleganckie - bez preloada obrazka...
    <img width="75px" height="75px" src="http://forum.php.pl/uploads/av-40696.jpg" onmouseover="this.src='http://forum.php.pl/uploads/av-40400.png'" onmouseout="this.src='http://forum.php.pl/uploads/av-40696.jpg'" />
  </body>
</html>
[HTML] pobierz, plaintext 

hover w js:

[HTML] pobierz, plaintext 
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
      (function(){var sOut = '',
        sOver = 'http://forum.php.pl/uploads/av-40400.png';
        // preload i podpiecie zdarzeń - prowizorycznie pod window.onload
        window.onload = function(){
          var eImg = document.getElementById('obrazek'),
          oImg = new Image;
          sOut = eImg.src;
          // preload i po załadowaniu podpięcie zdarzenia
          oImg.onload = function(){
            eImg.onmouseout = function(){
              this.src = sOut;
            };
            eImg.onmouseover = function(){
              this.src = sOver;
            };
            oImg = null;
          }
          oImg.src = sOver;
        }
      })()
    </script>
  </head>
  <body>
    javascript stare i podobno nie eleganckie - bez preloada obrazka... - żadna ze zmiennych nie ląduje do globalnego window - oprócz jednej funkcji podpiętej pod window.onload - window.onload nie polecam ale tutaj lepiej obrazuje o co chodzi
    <img id="obrazek" width="75px" height="75px" src="http://forum.php.pl/uploads/av-40696.jpg" />
  </body>
</html>
[HTML] pobierz, plaintext 

[vokiel]

Rozumiem, że część zarzutów do mnie...

Nie pisałem, że js jest zły, na pewno nie generalnie, ale w przytoczonym przykładzie stosowanie js mija się z celem.

Dlaczego sprites dopiero na końcu? Wg mnie to właściwa kolejność, najpierw wskazanie co jest nie tak, dopiero potem propozycje poprawy, alternatywy.

Można użyć pre-loaderów, ale IMHO sprites jest łatwiejsze (skoro już mówimy o 3-ech postach użytkownika). Poza tym, propozycję użycia js bezpośrednio w img dała osoba mająca 5x więcej postów

Rzucenie haseł jest jak najbardziej ok, osoby, które dopiero zaczynają mają od razu kilka cennych informacji, o których warto poczytać. Bez tych haseł mogłyby przed długi czas nie wiedzieć o ich istnieniu. Zresztą moim zdaniem od samego początku warto uczyć się jak najlepszych wzorców, po co powielać czyjeś błędy...

Użyszkodnika interesuje efekt końcowy i to jak strona działa. Szybkość działania strony, jej niezawodność zależy też od zastosowanych technik. Przykładowy preloader w js zadziała dopiero po całkowitym załadowaniu strony. Czyli jeśli po załadowaniu całego kodu strony, wczytaniu css i img przeglądarka będzie ściągać np jQuery z cdn googl'a, to hover w takim menu nie zadziała. Nie tak dawno widziałem menu oparte na obrazkach wstawionych pomiędzy znacznik <a></a>, gdzie szerokość przycisku była determinowana szerokością obrazka. W przypadku pierwszego najechania na pozycję w menu, stary obrazek znikał, a do czasu załadowania nowego kolor czcionki się zmieniał (link przestawał być widoczny) menu się zjeżdżało, uciekało z pod kursora, pod kursor wchodziła następna pozycja, która również znikała. W takiej sytuacji korzystanie z menu stawało się bardzo utrudnione, na chwilę wręcz niemożliwe. Jestem przekonany, że dla użytkownika zmiana zastosowanej metody miałaby znacznie.