Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [wolontariat]Zmiana obrazka po najechaniu
lazerdynamic
post 15.11.2009, 19:10:07
Post #1





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 6.11.2009

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

Jak zrobić, że jak najadę na obrazek to zmienia się na inny? Miałem to w JavaScipt ale jak najezdzam to sie laduje tak dziwnie, skacze obraz i dopiero po jakiś 5 sekundach jest normalnie. Jak zrobić to za pomocą CSS?
Powód edycji: [Spawnm]:
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 5)
Spawnm
post 15.11.2009, 19:20:37
Post #2





Grupa: Moderatorzy
Postów: 4 069
Pomógł: 497
Dołączył: 11.05.2007
Skąd: Warszawa
jeden większy obrazek jako tło i w css :hover -> zmiana położenia tła
Go to the top of the page
+Quote Post
lazerdynamic
post 15.11.2009, 19:21:36
Post #3





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 6.11.2009

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

Nie znam się na CSS w ogóle, tak więc prosiłbym o kod.
Go to the top of the page
+Quote Post
Spawnm
post 15.11.2009, 19:23:25
Post #4





Grupa: Moderatorzy
Postów: 4 069
Pomógł: 497
Dołączył: 11.05.2007
Skąd: Warszawa
Więc przenoszę i dodaję tag smile.gif
Go to the top of the page
+Quote Post
INProgress
post 15.11.2009, 20:10:39
Post #5





Grupa: Zarejestrowani
Postów: 5
Pomógł: 3
Dołączył: 25.08.2009

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

Zakładam że obrazek główny i ten, który się ma zmienić mają taką samą wysokość w (X,Y) px. Po kolei proponuję Ci tak:
0. W pliku graficznym (jpg, png) ustawiasz 2 obrazki, jeden pod drugim, na górze ten, który ma być pierwszy.
1. W kodzie strony
[HTML] pobierz, plaintext 
  1. <div id="obrazek"></div> 
[HTML] pobierz, plaintext
.
2. W css:
#obrazek {
background: url('sciezka_do_obrazka') top no-repeat; }

#obrazek:hover {
background-position: 0 -Ypx; }

,gdzie Y jest wysokością jednego obrazka.

Pisane z głowy, ale chyba tak to leciało z tego co pamiętam. smile.gif W razie czego -> GG: 12270063.


--------------------
Konkretny problem? Chętnie pomogę, nakieruję. Pomogłem? Daj "+", tyle możesz zrobić :)

Agencja interaktywna IN Progress
http://in-progress.eu/
Go to the top of the page
+Quote Post
celbarowicz
post 15.11.2009, 20:23:11
Post #6





Grupa: Zarejestrowani
Postów: 253
Pomógł: 31
Dołączył: 30.03.2009
Skąd: Szczecin

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

U mnie nie skacze, może zbyt duże pliki?
[HTML] pobierz, plaintext 
  1. js
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. </style> 
  6. <script language="javascript" type="text/javascript">
  7. <!--  Hide
  8. function obraz(zmien) { window.status=zmien ;
  9.     if (zmien=="nowe")  {window.document.images.mojrysunek.src="kiecka.jpg";}
  10.  
  11.                                            else  {window.document.images.mojrysunek.src="droga.jpg";}                
  12.    }
  13. //-->
  14. </script> 
  15. </head>
  16. <body >
  17. <a href="" onmouseover="obraz('nowe') ;" onmouseout="obraz('stare') ;" ><img src="droga.jpg" name="mojrysunek" width="150"  height="200">
  18. </a>
  19. <br>
  20. <br>
  21. <a href="" ><p>celbarowicz</p>
  22. </a>
  23. </body>
  24. </html>
  25.  
  26.  
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
« Następny starszy · Poszukuję · 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 · Linearny+ · Przełącz na: Drzewo

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

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