Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Podmiana obrazka po najechaniu myszą...
myslas
post 26.11.2010, 21:56:05
Post #1





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 17.11.2010

Ostrzeżenie: (0%)
-----

<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ą...
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
Mephistofeles
post 27.11.2010, 09:59:04
Post #2





Grupa: Zarejestrowani
Postów: 1 182
Pomógł: 115
Dołączył: 4.03.2009
Skąd: Myszków

Ostrzeżenie: (0%)
-----

Cytat
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.
Go to the top of the page
+Quote Post
zegarek84
post 27.11.2010, 13:35:11
Post #3





Grupa: Zarejestrowani
Postów: 1 332
Pomógł: 294
Dołączył: 12.10.2008
Skąd: Olkusz

Ostrzeżenie: (0%)
-----

Cytat(fifi209 @ 27.11.2010, 08:51:55 ) *
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 ^^
Cytat(fifi209 @ 27.11.2010, 08:51:55 ) *
Tak się teraz robi. smile.gif
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
Cytat(Mephistofeles @ 27.11.2010, 09:59:04 ) *
...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 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.     <title></title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.     <style>
  7.       a.obrazek {
  8.         display: block;
  9.         width: 100px;
  10.         height: 100px;
  11.         background-image: url("http://www.google.pl/images/srpr/nav_logo27.png");
  12.         background-position: 0px 0px;
  13.       }
  14.       a.obrazek:hover {
  15.         background-position: 0px -100px;
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  20.     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
  21.     <a class="obrazek"></a>
  22.   </body>
  23. </html>
[HTML] pobierz, plaintext


css i preload:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.     <title></title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.     <style>
  7.       a.obrazek {
  8.         display: block;
  9.         width: 75px;
  10.         height: 75px;
  11.         background-image: url("http://forum.php.pl/uploads/av-40696.jpg");
  12.         background-position: 0px 0px;
  13.       }
  14.       a.obrazek:hover {
  15.         background-image: url("http://forum.php.pl/uploads/av-40400.png");
  16.       }
  17.       .preloader {
  18.         display: block;
  19.         width: 0px;
  20.         height: 0px;
  21.         position:absolute;
  22.         left:-500px;
  23.         top:-500px;
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  28.     podmiana obrazka - tła w css - i niżej preload coby nie było skoku ;p
  29.     <a class="obrazek"></a>
  30.     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
  31.     <div class="preloader">
  32.       <img src="http://forum.php.pl/uploads/av-40400.png" />
  33.     </div>
  34.   </body>
  35. </html>
[HTML] pobierz, plaintext


"staromodny" hover w js bez preloada obrazka:
[HTML] pobierz, plaintext 
  1. <html>
  2.   <head>
  3.     <title></title>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.   </head>
  6.   <body>
  7.     javascript stare i podobno nie eleganckie - bez preloada obrazka...
  8.     <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'" />
  9.   </body>
  10. </html>
[HTML] pobierz, plaintext


hover w js:
[HTML] pobierz, plaintext 
  1. <html>
  2.   <head>
  3.     <title></title>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <script type="text/javascript">
  6.       (function(){var sOut = '',
  7.         sOver = 'http://forum.php.pl/uploads/av-40400.png';
  8.         // preload i podpiecie zdarzeń - prowizorycznie pod window.onload
  9.         window.onload = function(){
  10.           var eImg = document.getElementById('obrazek'),
  11.           oImg = new Image;
  12.           sOut = eImg.src;
  13.           // preload i po załadowaniu podpięcie zdarzenia
  14.           oImg.onload = function(){
  15.             eImg.onmouseout = function(){
  16.               this.src = sOut;
  17.             };
  18.             eImg.onmouseover = function(){
  19.               this.src = sOver;
  20.             };
  21.             oImg = null;
  22.           }
  23.           oImg.src = sOver;
  24.         }
  25.       })()
  26.     </script>
  27.   </head>
  28.   <body>
  29.     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
  30.     <img id="obrazek" width="75px" height="75px" src="http://forum.php.pl/uploads/av-40696.jpg" />
  31.   </body>
  32. </html>
[HTML] pobierz, plaintext



--------------------
Jeśli twoja ręka rusza do przodu powstrzymaj swój gniew; gdy wyprzedza cię twój gniew - wycofaj rękę.
Go to the top of the page
+Quote Post

Posty w temacie
- myslas   Podmiana obrazka po najechaniu myszą...   26.11.2010, 21:56:05
- - fifi209   A od czego masz css ? :hover ?   26.11.2010, 21:58:16
- - Mephistofeles   Do tego używa się CSS, a efekt nazywa się rollover...   26.11.2010, 22:00:05
- - denis94   [HTML] pobierz, plaintext <a target='_blank'hre...   26.11.2010, 22:01:17
- - vokiel   @denis94 nie ucz złych nawyków. Nie ma sensu robić...   26.11.2010, 22:18:40
- - myslas   Niestety to nie działa:( Rozumiem ale ja nie mam C...   26.11.2010, 22:30:33
- - vokiel   1. Oddzielenie JS od HTML od CSS 2. Hover w CSS a ...   26.11.2010, 22:54:32
- - zegarek84   a dlaczego js zły - dlaczego hasło sprites padło ...   27.11.2010, 00:20:35
|- - fifi209   Cytat(zegarek84 @ 27.11.2010, 00:20:3...   27.11.2010, 08:51:55
- - Mephistofeles   CytatNiestety to nie działa:( Rozumiem ale ja nie ...   27.11.2010, 09:59:04
|- - zegarek84   Cytat(fifi209 @ 27.11.2010, 08:51:55 ...   27.11.2010, 13:35:11
- - #luq   Cytat(Mephistofeles @ 27.11.2010, 09:59...   27.11.2010, 11:57:29
- - kadlub   spróbuj tak [HTML] pobierz, plaintext <a href=...   27.11.2010, 12:23:13
- - Mephistofeles   Chodziło mi ogólnie o wygląd, np. <font>, ...   27.11.2010, 12:39:26
- - vokiel   Rozumiem, że część zarzutów do mnie... Nie pisałe...   27.11.2010, 17:21:09

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 18:45
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn