Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML]Chce żeby po najechaniu zmieniło sie zdjęcie
Forum PHP.pl > Forum > Przedszkole
Darek82
Chciałem zrobić zdjecie gdy nad nie przesunie sie kursor zmieni sie na inne zdjecie w programie pajączek znalazłem takie opcje ale nie działa mi to mam taki kod

  1. <div id="obraz">
  2. <IMG SRC="SDC10035.JPG" WIDTH="3648" HEIGHT="2736" BORDER="0">
  3. <IMG BORDER="0" HEIGHT="2736" SRC="SDC10035.JPG" WIDTH="3648" onmouseover="<IMG SRC="1 kopia.jpg" WIDTH="3648" HEIGHT="3830" BORDER="0">">
  4. </div>
kamil4u
Poczytaj o efekcie rollover(albo w JS albo w CSS)
Kethrax
A można tak : smile.gif

  1. <style type="text\css">
  2. #img {backgroud-image: url("images/white.jpg");}
  3. <script type="text\javascript>
  4. function replace() {
  5. document.getElementById("img").style.backgroundImage = "url(images/green.gif)";
  6. }
  7.  
  8. <div id="img" onmouseover="replace();"></div>
  9.  


i

  1. onmouseout = "" <!-- wegług uznania -->


smile.gif
Pawel_W
Cytat(Kethrax @ 5.01.2010, 20:23:02 ) *
A można tak : smile.gif

  1. <style type="text\css">
  2. #img {backgroud-image: url("images/white.jpg");}
  3. <script type="text\javascript>
  4. function replace() {
  5. document.getElementById("img").style.backgroundImage = "url(images/green.gif)";
  6. }
  7.  
  8. <div id="img" onmouseover="replace();"></div>
  9.  


i

  1. onmouseout = "" <!-- wegług uznania -->


smile.gif

w js jest już taka funkcja jak replace dlatego bezpieczniej byłoby użyć innej nazwy i jej nie nadpisywać winksmiley.jpg

co do przykładu to nie zadziała, jeżeli nie ustawisz wymiarów diva, chyba, że nie będzie on pusty winksmiley.jpg

mimo wszystko jeżeli robisz już z backgroundImage to lepszym rozwiązaniem byłoby użycie CSS :hover, bo nie każdy js obsługuje, a efekt taki sam + nawet mniej linijek kodu
Darek82
a to moze tak bym sprubowal ale tez nie dziala

zewnetrzny CSS

  1.  
  2. obrazek a.link {
  3. backgroud-image: url (SDC10035.JPG);
  4. }
  5. obrazek a.link:hover {
  6. backgroud-image: url (1 kopia.jpg);
  7. }



dokument html

  1. <div id="obrazek">
  2. <IMG SRC="SDC10035.JPG" WIDTH="3648" HEIGHT="2736" BORDER="0">
  3.  
  4. </div>
Kethrax
To tylko przykład, z replace sie zgadzam i sory za nieodpowiednią nazwę.
Z wymiarami div'a oczywiście też masz racje. smile.gif

Cytat(Darek82 @ 5.01.2010, 20:31:20 ) *
a to moze tak bym sprubowal ale tez nie dziala

zewnetrzny CSS

[HTML] pobierz, plaintext
  1. obrazek a.link {
  2. backgroud-image: url (SDC10035.JPG);
  3. }
  4. obrazek a.link:hover {
  5. backgroud-image: url (1 kopia.jpg);
  6. }
[HTML] pobierz, plaintext


dokument html

[HTML] pobierz, plaintext
  1. <div id="obrazek">
  2. <IMG SRC="SDC10035.JPG" WIDTH="3648" HEIGHT="2736" BORDER="0">
  3. </div>
[HTML] pobierz, plaintext


No nie wiem, nie masz nigdzie w divie A, aby to chulało.
Pawel_W
Cytat(Kethrax @ 5.01.2010, 20:37:02 ) *
To tylko przykład, z replace sie zgadzam i sory za nieodpowiednią nazwę.
Z wymiarami div'a oczywiście też masz racje. smile.gif



No nie wiem, nie masz nigdzie w divie A, aby to chulało.

no i musiałby ustawić display: block dla odsyłacza, żeby był elementem blokowym winksmiley.jpg
Darek82
dodałem "a"..i co dalej:/

  1. <div id="obrazek">
  2. <a href="SDC10035.JPG"><IMG SRC="SDC10035.JPG" WIDTH="3648" HEIGHT="2736" BORDER="0"></a>
  3.  
  4. </div>
Pawel_W
Boże, trzymaj mnie bo zaraz padnę...

GOOGLE -> ROLLOVER!!!!

pierwszy wynik
http://webmaster.helion.pl/kurshtml/skrypt/rollover.htm

od myślenia głowa nie boli...
Darek82
Juz Mnie to dobija zrobilem tak jak tu i dalej nic

http://webmade.org/porady/efekt-rollover-css.php

Pawel ten Twoj dziala ale wolalbym na zewnetrznym arkuszu CSS zeby to bylo
Kethrax
Cytat(Darek82 @ 5.01.2010, 21:33:15 ) *
Juz Mnie to dobija zrobilem tak jak tu i dalej nic

http://webmade.org/porady/efekt-rollover-css.php

Pawel ten Twoj dziala ale wolalbym na zewnetrznym arkuszu CSS zeby to bylo


Darek82: dostałeś wskazówki, czystego kodu nie ma siły, nikt pisał za Ciebie nie będzie.
Jak to mówią http://google.pl i heyah do przodu. smile.gif
Tego czego sam sie nauczysz nikt Ci nie zabierze.

Pozdrawiam
Spawnm
Boże jeszcze trochę a zaczną się pojawiać pytania jak w html ustawić title ...
Zamykam.
Darek82
dzieki
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.