Klikanie 1 obrazka i pojawianie sie innych

pytanie zadane 27 sierpnia 2015 w HTML i CSS przez NoReK Nowicjusz (120 p.)

Szukam i szukam i próbuje coś robić ale i tak tego nie umiem . Chodzi o to aby na stronie był obrazek1 i jak w niego klikniemy pokażą sie 4 inne mniejsze obrazki (fb,kontakt,yt,inne) 1 ma byc na gorze ,2 na dole 3 prawo 4 lewo.

Nie mam pojęcią jak to zrobić .

W skócie : Po kliknięciu w główny obrazek1 pojawiają się ( na gorze , prawo , lewo i na dole ) inne obrazki no i ten główny też ma zostać . Coś s tylu dzikoysk.net tylko nie musi tej animacji byc ale maja pokazac sie obrazki . Juz pare dni próbuje i nic . Wiec pisze tu o pomoc :)

3 odpowiedzi

odpowiedź 27 sierpnia 2015 przez Mizukage Pasjonat (21,750 p.)

Moze zmiana z hidden po kliknieciu w glowny obrazek?

komentarz 27 sierpnia 2015 przez NoReK Nowicjusz (120 p.)

Taki miałem pomysł żeby te obrazki z hidden pokazały się , ale pogubiłem się pod koniec i nie działało

komentarz 27 sierpnia 2015 przez Mizukage Pasjonat (21,750 p.)

pokaz kod, bedzie latwiej

odpowiedź 27 sierpnia 2015 przez karolk1235 Użytkownik (860 p.)

Może to pomoże:

1. Ustaw w CSS i w HTML obrazki tam gdzie powinny się znajdować.

2. Nadaj im w CSS właściwość visibility: hidden lub display: none (jak wolisz).

3, Dodaj do tego pierwszego obrazka (ten który ma być widoczny cały czas) akce onclick="tutaj_wpisz_nazwe_funkcji()".

4.I w javascripcie zrub coś takiego:

dla właściwości display: block

function tutaj_wpisz_nazwe_funkcji()
{
document.getElementById("id_obrazka_1").style.display = "block";
document.getElementById("id_obrazka_2").style.display = "block";
document.getElementById("id_obrazka_3").style.display = "block";
document.getElementById("id_obrazka_4").style.display = "block";
{

lub jeśli chcesz użyć własciwości hidden zrób tak:

function tutaj_wpisz_nazwe_funkcji()
{
document.getElementById("id_obrazka_1").style.visibility = "visible";
document.getElementById("id_obrazka_2").style.visibility = "visible";
document.getElementById("id_obrazka_3").style.visibility = "visible";
document.getElementById("id_obrazka_4").style.visibility = "visible";
{

W miejsce id_obrazka_1, 2, 3, 4 wpisz id tych obrazków które mają się pojawić

komentarz 27 sierpnia 2015 przez Mizukage Pasjonat (21,750 p.)

Nie lepiej nadac klase i sie nie powtarzac 4x w kodzie JS'a?

komentarz 27 sierpnia 2015 przez karolk1235 Użytkownik (860 p.)

No można. Wtedy Albo wsadzić w pętle albo użyć jquery

odpowiedź 27 sierpnia 2015 przez Ivan Maniak (60,650 p.)

Nie bardzo rozumiem czy chcesz zrobić takie "menu" czy po prostu ukryć / pokazać obrazki.

Jeżeli ukryć / pokazać to JavaScript + Jquery

$(".socials").hide(); //ukrycie obrazków .socials = klasa tych obrazkow
$("#glowny-obrazek").click(function(){
  $(".socials").toggle(200); //ukrycie / pokazanie obrazków
});

Jeżeli potrzebujesz takiego menu to na codepenie znajdziesz ich masę pod "circular menu" np. http://codepen.io/CreativePunch/pen/lAHiu