Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript][HTML] Zmiana obrazu
damian0021
post
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
 
 Start new topic
Odpowiedzi
damian0021
post
Post #2





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:
(IMG:https://zapodaj.net/images/ff34436297ab0.jpg)

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

Posty w temacie
- damian0021   [JavaScript][HTML] Zmiana obrazu   21.06.2017, 19:23:55
- - lustfingers   Tu masz przykład podobnego rozwiązania:http://jsfi...   21.06.2017, 20:43:55
- - damian0021   Dzięki, pokombinuje. Chyba czegoś nie rozumiem: h...   21.06.2017, 21:57:28
- - lustfingers   Jest błąd ponieważ myclass i myClass to nie to sam...   22.06.2017, 04:26:15
- - damian0021   Na jsfiddle.net wszystko działa jak chce, jak wrzu...   22.06.2017, 08:47:47
- - viking   id może być jedno w dokumencie. Ma być unikalne. D...   22.06.2017, 08:49:22
- - damian0021   O jakim ID mówisz?   22.06.2017, 09:02:50
- - viking   [HTML] pobierz, plaintext <td> <a id=...   22.06.2017, 09:19:26
- - damian0021   A, tak, tak. To już poprawiłem + dodałem najnowsz...   22.06.2017, 19:49:55

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

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 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 Aktualny czas: 2.10.2025 - 16:43
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn