Przesunięcie obrazka w CSS za pomocą JS.

0 
<style>
button{
	position: absolute;
}

#gora{
	left: 50%;
}

#lewo{
	top: 50%;
}

#dol{
	bottom: 0;
	left: 50%;
}

#prawo{
	right: 0;
	top: 50%;
}

img{
    position: absolute;
    height: 100px;
    top: 50%;
    left: 50%;

}
</style>
</head>

<body>

<img onclick="klik()" src="a6.jpg">
<button id="gora" onclick="gora()">Góra</button>
<button id="lewo" onclick="lewo()">Lewo</button>
<button id="dol" onclick="dol()">Dół</button>
<button id="prawo" onclick="prawo()">Prawo</button>
<script>

Potrzebuję, żeby obrazek na początku pojawiał się na środku strony, a po kliknięciu przycisku przesuwał się o 10px w daną stronę.
Problem nr 1 jest taki, że obrazek nie wyświetla się na środku.
Problem nr 2 - po kliknięciu przycisku obrazek się nie przesuwa.

1

https://jsfiddle.net/rv86p4Le/
coś takiego może, szkoda, że nie pokazałeś funkcji klik - może wtedy było by łatwiej pomóć ;)
Jaki jest Twój cel? Chcesz zrobić grę?

0

Funkcja klik ma za zadanie schować obrazek po naciśnięciu na niego i z tym nie mam problemu.
A do zrobienia mam zadanie, które brzmi następująco:
Stwórz dokument zawierajacy znacznik img oraz cztery
przyciski ’lewo’, ’prawo’, ’góra’, ’dół’ umieszczone na srodach odpowiednich krawedzi
okna przegladarki. Poczatkowo obrazek powinien znalezc sie na srodku strony i
miec wysokosc 100px. Przycisniecie któregos z przycisków powinno przesuwac obrazek
o 10px w wybranym kierunku. Klikniecie na na obrazek powinno powodowac jego
znikniecie. Do wszystkich obiektów zastosuj position:absolute.

1

ad1. spróbuj tak:

img {
    position: absolute;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

ad2. Potrzebujesz użyć JS do manipulowania transition z CSS:

https://css-tricks.com/controlling-css-animations-transitions-javascript/
https://www.w3schools.com/jsref/prop_style_transition.asp

1 użytkowników online, w tym zalogowanych: 0, gości: 1