Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript][HTML] Zmiana obrazu
damian0021
post 21.06.2017, 19:23:55
Post #1





Grupa: Zarejestrowani
Postów: 38
Pomógł: 0
Dołączył: 7.05.2010

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

Witajcie,

mam pewne pytanie, zaczynam dopiero swoją przygodę i mam pewien kłopot:

Chciałem uzyskać podobny efekt na swojej stronie jak na: https://www.powerbulbs.com/vehicles/cars/uk...headlight-bulbs - dokładnie chodzi mi o to, gdy najadę w tabeli to zmienia się obrazek, czy możecie mi doradzić jak mogę to ogarnąć?

Czy 'onmouseover' będzie rozwiązaniem ?

Ten post edytował damian0021 21.06.2017, 19:54:26
Go to the top of the page
+Quote Post
lustfingers
post 21.06.2017, 20:43:55
Post #2





Grupa: Zarejestrowani
Postów: 99
Pomógł: 5
Dołączył: 18.03.2015

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

Tu masz przykład podobnego rozwiązania:http://jsfiddle.net/dGnMX/533/
Go to the top of the page
+Quote Post
damian0021
post 21.06.2017, 21:57:28
Post #3





Grupa: Zarejestrowani
Postów: 38
Pomógł: 0
Dołączył: 7.05.2010

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

Dzięki, pokombinuje.

Chyba czegoś nie rozumiem: http://jsfiddle.net/dGnMX/540/

Daje na linki float:left, na img + rozmiar też i nic.

Go to the top of the page
+Quote Post
lustfingers
post 22.06.2017, 04:26:15
Post #4





Grupa: Zarejestrowani
Postów: 99
Pomógł: 5
Dołączył: 18.03.2015

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

Jest błąd ponieważ myclass i myClass to nie to samo http://jsfiddle.net/dGnMX/541/

Ten post edytował lustfingers 22.06.2017, 14:23:03
Go to the top of the page
+Quote Post
damian0021
post 22.06.2017, 08:47:47
Post #5





Grupa: Zarejestrowani
Postów: 38
Pomógł: 0
Dołączył: 7.05.2010

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

Na jsfiddle.net wszystko działa jak chce, jak wrzucam to do pliku i chce odpalić lokalnie np. XAMPP'em to niestety nie działa - podrzucam Ci mój plik html.
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.  
  8.       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  9.  
  10. <script type="text/javascript">
  11.   $("#first").hover(function () {
  12.  
  13.     $(".myClass").css("background-image", 'url("img.jpg")');
  14.  
  15. });
  16.  
  17. $("#second").hover(function () {
  18.  
  19.     $(".myClass").css("background-image", 'url("http://i.telegraph.co.uk/multimedia/archive/02179/Milky-Way_2179177b.jpg")');
  20.  
  21. });
  22.  
  23. $("#third").hover(function () {
  24.  
  25.     $(".myClass").css("background-image", 'url("http://www.thatsreallypossible.com/wp-content/uploads/2012/12/Space-Colonialisation.jpg")');
  26.  
  27. });
  28. </script>
  29.  
  30.      <meta name="robots" content="index,follow" />
  31.  
  32.  
  33. <style>
  34. 	.myClass{
  35.   background-color: #cccccc;
  36.   width:200px;
  37.   height:200px;
  38. }
  39.  
  40. table, th, td {
  41.     border: 1px solid black;
  42.     border-collapse: collapse
  43. }
  44. </style>
  45.   </head>
  46. <body>
  47.  
  48. <div class="myClass"></div>
  49.  
  50. <table style="width:100%">
  51.  
  52.   <tr>
  53.     <th>ABC</th>
  54.     <th>CDE</th> 
  55.     <th>EFG</th>
  56.   </tr>
  57.   <tr>
  58.     <td> <a id="third">Link 1</a></td>
  59.     <td> <a id="third">Link 1</a></td>
  60.     <td> <a id="third">Link 1</a></td>
  61.   </tr>
  62.   <tr>
  63.   <td><a id="second">Link 1</a></td>
  64.     <td>Eve</td>
  65.     <td>94</td>
  66.   </tr>
  67.   <tr>
  68.   <td> <a id="third">Link 1</a></td>
  69.     <td>John</td>
  70.     <td>Doe</td>
  71.  
  72.   </tr>
  73. </table>
  74.  
  75.  
  76. </body>
  77. </html>
[HTML] pobierz, plaintext


Ten post edytował damian0021 22.06.2017, 08:53:19
Go to the top of the page
+Quote Post
viking
post 22.06.2017, 08:49:22
Post #6





Grupa: Zarejestrowani
Postów: 6 378
Pomógł: 1116
Dołączył: 30.08.2006

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

id może być jedno w dokumencie. Ma być unikalne. Do tego zdecyduj się na jedną wersję jquery - najlepiej najnowszą.


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
damian0021
post 22.06.2017, 09:02:50
Post #7





Grupa: Zarejestrowani
Postów: 38
Pomógł: 0
Dołączył: 7.05.2010

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

O jakim ID mówisz?
Go to the top of the page
+Quote Post
viking
post 22.06.2017, 09:19:26
Post #8





Grupa: Zarejestrowani
Postów: 6 378
Pomógł: 1116
Dołączył: 30.08.2006

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

[HTML] pobierz, plaintext 
  1.     <td> <a id="third">Link 1</a></td>
  2.     <td> <a id="third">Link 1</a></td>
  3.     <td> <a id="third">Link 1</a></td>
[HTML] pobierz, plaintext


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
damian0021
post 22.06.2017, 19:49:55
Post #9





Grupa: Zarejestrowani
Postów: 38
Pomógł: 0
Dołączył: 7.05.2010

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

A, tak, tak.

To już poprawiłem + dodałem najnowszą wersję jQuery.

Mój aktualny kod: 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.  
  8.      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  9.  
  10. <script type="text/javascript">
  11.   $("#first").hover(function () {
  12.  
  13.     $(".myClass").css("background-image", 'url("/img.jpg")');
  14.  
  15. });
  16.  
  17. $("#second").hover(function () {
  18.  
  19.     $(".myClass").css("background-image", "#fff");
  20.  
  21. });
  22.  
  23. $("#third").hover(function () {
  24.  
  25.     $(".myClass").css("background-color", 'url("http://www.thatsreallypossible.com/wp-content/uploads/2012/12/Space-Colonialisation.jpg")');
  26.  
  27. });
  28. </script>
  29.  
  30. <style>
  31. 	.myClass{
  32.   background-color: #cccccc;
  33.   width:200px;
  34.   height:200px;
  35. }
  36.  
  37. table, th, td {
  38.     border: 1px solid black;
  39.     border-collapse: collapse
  40. }
  41. </style>
  42.   </head>
  43. <body>
  44.  
  45. <table style="width:100%">
  46.  
  47.   <tr>
  48.     <th>ABC</th>
  49.     <th>CDE</th> 
  50.     <th>EFG</th>
  51.   </tr>
  52.   <tr>
  53.     <a id="third"><td >Link 1</td> </a>
  54.     <td> <a>Link 1</a></td>
  55.     <td> <a>Link 1</a></td>
  56.   </tr>
  57.   <tr>
  58.   <td><a id="second">Link 1</a></td>
  59.     <td>Eve</td>
  60.     <td>94</td>
  61.   </tr>
  62.   <tr>
  63.   <td> <a id="first">Link 1</a></td>
  64.     <td>John</td>
  65.     <td>Doe</td>
  66.  
  67.   </tr>
  68. </table>
  69.  
  70.  
  71.  
  72. <div class="myClass"></div>
  73.  
  74. </body>
  75. </html>
[HTML] pobierz, plaintext


Witajcie,

lokalnie naprawiłem, wystarczy, że przeniosłem kod poniżej div'a myClass i zadziałało.

Jednak gdy przenoszę to na stronę docelową, której chciałbym wyświetlać to niestety nie działa.


Utworzyłem plik test.js, test.css (i dodałem tam powyższe kody) - wrzuciłem je na FTP w kodzie strony je widać.

We wpisie dodałem tabele + myClass i niestety, wiecie jak może być przyczyna ? Dodam, że jest to wordpress.

Mam taki komunikat:


Zrobione, w pliku test.js - trzeba było dodać:

jQuery(document).ready(function($){

//code

});

Ten post edytował damian0021 22.06.2017, 19:44:43
Go to the top of the page
+Quote Post
« 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: Standardowy · Przełącz na: 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: 9.07.2025 - 04:26
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn