Obrazek zamieniajacy tło po najechaniu

pytanie zadane 14 stycznia 2018 w HTML i CSS przez KonDZIKs Bywalec (2,770 p.)

Witam. :)
Chciałbym zrobić stronę startową na, której były by na środku trzy bloki z czego każdy był by innym hiperłączem i miałby inny wygląd (obrazek). A po najechaniu na blok obraz z bloku zastępowałby tło strony.

Przykładowo po najechaniu na blok czerwony tło strony zmieniłoby się na czerwone.

Podam jeszcze kody dość ubogie ale nie mam pojęcia jak się za to zabrac

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="style.css">
	</head>
	
	<body>
	<div id="kontener">
		<div id="lewy_blok"><a href="#">asd</a></div>
		<div id="srodek_blok"><a href="#">asd</a></div>
		<div id="prawy_blok"><a href="#">asd</a> </div>
	</div>
	</body>
</html>

body
{
	background-color: green;

}
#kontener
{
	margin-left: auto;
	margin-right: auto;
	width: 620px;
	background-color:green;
}

#lewy_blok
{
	background-color: red;
	width: 200px;
	height: 600px;
	display: inline-block;

}

#srodek_blok
{
	background-color: blue;
	width: 200px;
	height: 600px;
	display: inline-block;
	margin-left: 6px;

}

#prawy_blok
{
	background-color: yellow;
	width: 200px;
	height: 600px;
	display: inline-block;
	margin-left: 6px;

}

#lewy_blok:hover
{
	background-color: cyan;
}

#srodek_blok:hover
{
	background-color: black;
}

#prawy_blok:hover
{
	background-color: purple;
}

Z tego na jaki pomysł wpadłem to ,że trzeba by było w js zastosować fukncje if z warunkami: jeżeli kursor jest na niebieskim bloku zmień tło na niebieskie jeżeli nie wróć do normalnego tła.

1 odpowiedź

odpowiedź 15 stycznia 2018 przez pablop76 VIP (123,120 p.)

Myślę, że można by wykorzystać atrybut data.

Stworzyć listę jako elementy nawigacji, przypisać do tagów a atrybut np: data-nazwa_obrazka. Nasłuchiwać mouseover na dokumencie i jeżeli e.target.dataset.nazwa_obrazka jest true przypisać do body czy tam innego pojemnika .src = e.target.dataset.nazwa_obrazka

komentarz 17 stycznia 2018 przez KonDZIKs Bywalec (2,770 p.)

Znalazłem na forum coś takiego https://jsfiddle.net/mordimer/2oo1x2yu/ i jeżeli html i css mi działa to niestety kod js juz nie nie wiem dlaczego :(

komentarz 17 stycznia 2018 przez pablop76 VIP (123,120 p.)

Dołączyłeś bibliotekę jquery?

Moja propozycja była taka

komentarz 28 stycznia 2018 przez KonDZIKs Bywalec (2,770 p.)
edycja 28 stycznia 2018 przez KonDZIKs

Dziękuje za pomoc :)

Mógłbyś wytłumaczyć kod js? :)

Oraz jeżeli zamiast koloru chciałbym wstawić obraz. To zamiast data-color użyć data-src? Próbowałem z data-src oraz data-img lecz to nie rozwiązało mojego problemu :/