Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Obrazek po najechaniu na link
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
szyn33k
12.09.2013, 17:01:06
Witam,
uczę się obecnie JS i wymyślam sobie zadania, lecz jednego nie mogę wykonać i proszę o pomoc.
Mianowicie.
Mam dwa linki na stronie i jeden obrazek na srodku.
Po najechaniu na link obrazek na srodku zmienia się na 1.jpg a po zjechaniu z linku wraca poprzedni, i tak samo z drugim linkiem tyle ze wyswietla się obrazek 2.jpg.

Mam coś takiego, tylko nie wiem jak wstawić zmienną do tagu img
[HTML] pobierz, plaintext 
  1. <head>
  2. <script>
  3. 	function zdjecie(www)
  4. 	{
  5. 		if(www=='o2')
  6. 		document.write='o2.png';
  7. 		else
  8. 		document.write='wp.png';
  9. 	}
  10. </script>
  11. </head>
  12.  
  13. <center>
  14. <a href="http://wp.pl" onMouseOver="zdjecie(wp)" name="wp">WP.PL</a>
  15. <a href="http://o2.pl" onMouseOver="zdjecie(o2)" name="wp">O2.PL</a>
  16. <br/>
  17. <img src="0.png" name="zdj" />
  18. </center>
[HTML] pobierz, plaintext


lukasz1985
12.09.2013, 19:55:07
No na pewno nie "document.write" - ta instrukcja przepisuje całą stronę internetową jeśli jest wykonana po załadowaniu strony. Musisz przechwycić referencje do obrazka i potem dynamicznie zmieniać jego źródło

[HTML] pobierz, plaintext 
  1. <head>
  2. <script>
  3. 	function zdjecie(www)
  4. 	{
  5.                 var obrazek = document.getElementById("zdjecie"); // pobranie referencji do obrazka poprze id
  6. 		if(www=='o2')
  7.                   obrazek.src = "o2.png"; // zmiana źródła obrazka
  8. 		else if (www = 'wp')
  9.     		  obrazek.src ='wp.png';  // j.w.
  10.                 else 
  11.                   obrazek.src = "0.png";
  12. 	}
  13. </script>
  14. </head>
  15.  
  16. <center>
  17. <a href="http://wp.pl" onMouseOver="zdjecie('wp')" name="wp" onMouseOut= "zdjecie(0)">WP.PL</a>
  18. <a href="http://o2.pl" onMouseOver="zdjecie('o2')" name="wp" onMouseOut ="zdjecie(0)">O2.PL</a>
  19. <br/>
  20. <img src="0.png" id="zdjecie" />
  21. </center>
[HTML] pobierz, plaintext
szyn33k
12.09.2013, 20:09:21
Dzięki, niestety ciągle się wyświetla 0.jpg :/
NIe wiem jak to poprawić aby było poprawnie.
WiruSSS
12.09.2013, 21:36:19
..tam w else if wkradła się literówka i zjadło jeden znak = powinno być else if (www == 'wp'), druga sprawa to zapewne konflikt id zdjęcia z nazwą funkcji ...a tak poza tym to powinno działać. Weź to skopiuj i wklej w całości, dodaj brakujący znak = zmień id zdjęcia na jakieś inne (w skrypcie też) i będzie hulać smile.gif
szyn33k
13.09.2013, 14:55:43
zrobiłem tak, bazując na powyzszych skryptach.
Działa smile.gif
[HTML] pobierz, plaintext 
  1. <head>
  2. <script>
  3. 	function zdjecie(www)
  4. 	{
  5. 		if(www=='o2')
  6. 			document.getElementById("myImage").src="o2.png";
  7. 		else if (www=='wp')
  8. 			document.getElementById("myImage").src="wp.png";
  9.         else
  10. 			document.getElementById("myImage").src="0.png";
  11. 	}
  12. </script>
  13. </head>
  14.  
  15. <center>
  16. <a href="http://wp.pl" onMouseOver="zdjecie('wp')" name="wp" onMouseOut= "zdjecie(0)">WP.PL</a>
  17. <a href="http://o2.pl" onMouseOver="zdjecie('o2')" name="o2" onMouseOut ="zdjecie(0)">O2.PL</a>
  18. <br/>
  19. <img id="myImage" src="0.png">
  20. </center>
[HTML] pobierz, plaintext
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.