Koło w HTML'u.

pytanie zadane 26 marca 2017 w Systemy operacyjne, programy przez Heli1922 Nowicjusz (140 p.)
edycja 27 marca 2017 przez Heli1922

Siemanko, jestem tu nowy, takze prosze o zrozumienie :) ostatnio dostalem zadanie zrobienia kuli w HTML, JS i oczywiście CSS żeby nadać wyglad, ale zupełnie nie rozumiem jak to zrobić, moglby ktos pomoc? Tresc zadania brzmi: na stronie znajduje sie kolo i przycisk. Po kliknięciu przycisku kolo sie pojawia, po najechaniu myszka na kolo zmienia ono swój kolor, po zjechaniu z kola zmienia swój kolor.

Obecnie wygląda to tak:

HTML

<!DOCTYPE html>

<html>

<head>

<title>fsdf</title>

<link rel="stylesheet" href="sprawdzian.css">

<script src="sprawdzian.css"></script>

<meta charset="UTF-8">

</head>

<body>

<div id="lol">

<button class="kuleczka" onclick="kolo()" onmousemove="muv()"

</div>

</body>

</html>

CSS:

#kuleczka{

height:100px;

width:70px;

border-radius:50px;

position:relative;

}

#lol{

height:250px;

width:250px;

background-color:grey;

border-radius:125px;

margin-left:100px;

position:relative;

}

function kolo()

{

document.getElementById("kolo").style.backgroundColor="yellow"

}

function muv()

{

document.gEBI("muv").style.backgroundColor="red"

}

tyle mam i nie działa, co jeszcze mogę zrobić i co poprawić?

3 odpowiedzi

odpowiedź 27 marca 2017 przez pablop76 VIP (123,180 p.)

Witam.

1. Dwa elementy na stonie.

a. button

b.koło (kwadrat z border-radius: 50%;) np: id="kolo" oraz display: none; (żeby ukryć na początku) i jakiś background-color. np: red; bo inaczej go nie zobaczysz po odkryciu.

2. funkcja javascript o nazwie np" pokaz(). Znajdź na stronie element o id="kolo" i dodaj do niego .style.display = "block";

3. Dołącz do button zdarzenie onclick dla funkcji pokaz().

4. W css dodaj hover dla #kolo z innym background-color niż w oryginale. np: green;

I TO WSZYSTKO :)

komentarz 27 marca 2017 przez Heli1922 Nowicjusz (140 p.)
edycja 27 marca 2017 przez Heli1922

Czyli w HTML zrobić diva z id kolo oraz button class z onclick? A onmousemove nie? Czy zostawic tak jak tam mam zrobione? Nastepnie w CSS #kolo i wpisywać tam background oraz display, dobrze rozumiem? O co chodzi z hoverem? Nie mieliśmy tego na lekcjach i nie wiem jak go dodać, a-hover:red; czy jak? I w JS zamiast style.bC dodać to co napisałeś tak?

komentarz 27 marca 2017 przez pablop76 VIP (123,180 p.)

button bez klasy - chyba , że chcesz go wystylizować.

Dodanie zdarzenia onclick="nazwafunkcji(); to znaczy , że button ma po kliknięciu uruchamiać funkcję nazwafunkcji().

pseudoklasa :hover

oznacza co ma się dziać z elementem po najechaniu na niego myszką.

czyli:

#kolo:hover{

background-color: green;

}

oznacza, że po najechaniu na #kolo zmieni się jego tło na zielony a po zjechaniu wróci na czerwony.

odpowiedź 26 marca 2017 przez Boshi VIP (100,240 p.)

Div z klasą, w CSS dodajesz border radiu 40-50%. Ustawiasz Homer zmieniając kolor. W js obslugujesz przycisk, dodając np display nonę

komentarz 26 marca 2017 przez Heli1922 Nowicjusz (140 p.)

Dodałem wyżej prawie całą zrobioną stronkę, poradzisz coś zmienić lub dodać?

komentarz 26 marca 2017 przez Boshi VIP (100,240 p.)

masz specjalne znaczniki od kodu..

komentarz 27 marca 2017 przez Heli1922 Nowicjusz (140 p.)

zmieniłem

komentarz 27 marca 2017 przez Boshi VIP (100,240 p.)

A co nie działa? nie masz hovera ustawionego aby po najechaniu zmienić kolor. I raczej po kliknięciu to masz pokazać koło a nie zmieniać jego kolor. Wystarczy ustawić display:block, a domyślnie po otwarciu strony, #lol na display:none.