Forum PHP.pl > [JavaScript][HTML] Zmiana obrazu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][HTML] Zmiana obrazu

damian0021

21.06.2017, 19:23:55

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 ?

lustfingers

21.06.2017, 20:43:55

Tu masz przykład podobnego rozwiązania:http://jsfiddle.net/dGnMX/533/

damian0021

21.06.2017, 21:57:28

Dzięki, pokombinuje.

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

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

lustfingers

22.06.2017, 04:26:15

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

damian0021

22.06.2017, 08:47:47

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 
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 
<script type="text/javascript">
  $("#first").hover(function () {
 
    $(".myClass").css("background-image", 'url("img.jpg")');
 
});
 
$("#second").hover(function () {
 
    $(".myClass").css("background-image", 'url("http://i.telegraph.co.uk/multimedia/archive/02179/Milky-Way_2179177b.jpg")');
 
});
 
$("#third").hover(function () {
 
    $(".myClass").css("background-image", 'url("http://www.thatsreallypossible.com/wp-content/uploads/2012/12/Space-Colonialisation.jpg")');
 
});
</script>
 
     <meta name="robots" content="index,follow" />
 
 
<style>
	.myClass{
  background-color: #cccccc;
  width:200px;
  height:200px;
}
 
table, th, td {
    border: 1px solid black;
    border-collapse: collapse
}
</style>
  </head>
<body>
 
<div class="myClass"></div>
 
<table style="width:100%">
 
  <tr>
    <th>ABC</th>
    <th>CDE</th> 
    <th>EFG</th>
  </tr>
  <tr>
    <td> <a id="third">Link 1</a></td>
    <td> <a id="third">Link 1</a></td>
    <td> <a id="third">Link 1</a></td>
  </tr>
  <tr>
  <td><a id="second">Link 1</a></td>
    <td>Eve</td>
    <td>94</td>
  </tr>
  <tr>
  <td> <a id="third">Link 1</a></td>
    <td>John</td>
    <td>Doe</td>
 
  </tr>
</table>
 
 
</body>
</html>
[HTML] pobierz, plaintext

viking

22.06.2017, 08:49:22

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

damian0021

22.06.2017, 09:02:50

O jakim ID mówisz?

viking

22.06.2017, 09:19:26

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

damian0021

22.06.2017, 19:49:55

A, tak, tak.

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

Mój aktualny kod:

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 
<script type="text/javascript">
  $("#first").hover(function () {
 
    $(".myClass").css("background-image", 'url("/img.jpg")');
 
});
 
$("#second").hover(function () {
 
    $(".myClass").css("background-image", "#fff");
 
});
 
$("#third").hover(function () {
 
    $(".myClass").css("background-color", 'url("http://www.thatsreallypossible.com/wp-content/uploads/2012/12/Space-Colonialisation.jpg")');
 
});
</script>
 
<style>
	.myClass{
  background-color: #cccccc;
  width:200px;
  height:200px;
}
 
table, th, td {
    border: 1px solid black;
    border-collapse: collapse
}
</style>
  </head>
<body>
 
<table style="width:100%">
 
  <tr>
    <th>ABC</th>
    <th>CDE</th> 
    <th>EFG</th>
  </tr>
  <tr>
    <a id="third"><td >Link 1</td> </a>
    <td> <a>Link 1</a></td>
    <td> <a>Link 1</a></td>
  </tr>
  <tr>
  <td><a id="second">Link 1</a></td>
    <td>Eve</td>
    <td>94</td>
  </tr>
  <tr>
  <td> <a id="first">Link 1</a></td>
    <td>John</td>
    <td>Doe</td>
 
  </tr>
</table>
 
 
 
<div class="myClass"></div>
 
</body>
</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

});

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.