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%)
-----

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

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: 7.10.2025 - 08:29
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn