logo elektroda
logo elektroda
X
logo elektroda
Szukanie Zaawansowane
logo elektroda
REKLAMA
REKLAMA
Adblock/uBlockOrigin/AdGuard mogą powodować znikanie niektórych postów z powodu nowej reguły.

Zmiana koloru elementu grafiki po kliknięciu przycisku w HTML, JavaScript, PHP

Jashi 01 Lut 2007 18:53 1681 9
REKLAMA
Zgłoś naruszenie prawa
| Nowy temat
  • #1 3516017
    Jashi
    Poziom 11  
    Posty: 33
    Ocena: 5
    Napotkałem problem i proszę o pomoc.
    Mianowicie
    Mam podzieloną grafikę, za pomocą photoshopa. I chciałbym aby po kliknięciu obok tej grafiki na przycisk np: zmień na żółty zmieniał się tylko jeden z wyciętych elementów, a reszta została taka jak była.
    Zmiana koloru elementu grafiki po kliknięciu przycisku w HTML, JavaScript, PHP
    po
    Zmiana koloru elementu grafiki po kliknięciu przycisku w HTML, JavaScript, PHP

    Jeśli macie jakieś pomysły to proszę o pomoc.
    W pełni konfigurowalna automatyzacja domu - prezentacja Fox Wi-Fi Quad Input [sponsorowany]
  • REKLAMA
  • #3 3516130
    Jashi
    Poziom 11  
    Posty: 33
    Ocena: 5
    z tego co tutaj widze to grafika jest podzielona i jak się na nią kliknie to pokazuje sie ten obrazek w nowym oknie a mi chodzi o to a żeby obok było menu i np: zrób pomieszczenie 1 żółtym i zmienił się by tylko ten jedyny fragment grafiki z szarego na żółty.
    chodzi tu o włącz światło w pomieszczeniu 1( wycieta grafika zmienia się na żółtą) i wyłącz światło (grafika zmienia się na szarą)
  • REKLAMA
  • #4 3516153
    krzychoocpp
    VIP Zasłużony dla elektroda  
    Posty: 1866
    Pomógł: 387
    Ocena: 58
    Witam, ja mam taki pomysł: cały plan mieszkania to jeden obrazek, z wygaszonym światłem. Kliknięcię na coś uruchamia funkcję w JS, która pokazuje takie żółte przezroczyste coś zakrywające odpowiedni element. Nie jest to mocno skomplikowane, Mogą to być obrazki (żółty jednopikselowy przezroczysty PNG) lub spozycjonowane divy z ustawionym odpowiednim stylem. Tylko jest jeden problem, w Operze i FF zadziała na 100%, nie wiem jak będzie w IE...

    Pozdrawiam, Krzysztof.
  • REKLAMA
  • #5 3516251
    Jashi
    Poziom 11  
    Posty: 33
    Ocena: 5
    z tym by było dużo kombinowania. bo jak widać po pomieszczeniu numer 3 jest ono nie prostokątne tak wiec składa się z dwóch prostokątów. a istnieje taka możliwość zmiany właśnie tej grafiki z wyłączonym światłem na tą z włączonym?
  • REKLAMA
  • #6 3516315
    krzychoocpp
    VIP Zasłużony dla elektroda  
    Posty: 1866
    Pomógł: 387
    Ocena: 58
    Witam, tak, można, ale wtedy rodzi się drugi problem - trzeba pociąć obrazek i poustawiać go na stronie. Ale można tak zrobić.

    Pozdrawiam, Krzysztof.
  • #7 3516396
    Jashi
    Poziom 11  
    Posty: 33
    Ocena: 5
    krzychoocpp napisał:
    Witam, tak, można, ale wtedy rodzi się drugi problem - trzeba pociąć obrazek i poustawiać go na stronie. Ale można tak zrobić.

    Pozdrawiam, Krzysztof.


    mam juz pociętą grafikę i idealnie zgraną w html. szukam teraz skryptu który mi pozwoli na zmianę wlaśnie tego jenego elementu grafiki.
    Może kombinować ta jak to sie odbywa z slajdami slajdami(ręcznie) tzn. jak zmienia się slajd to i zmieni sie obrazek z żółtego na szary i odwrotnie. ale czy inne grafiki obok sie nie poprzestawiają.
    jeśli znacie jakiś strony z toutorilem podobnym do tego problemu to proszę o link
  • #8 3516835
    krzychoocpp
    VIP Zasłużony dla elektroda  
    Posty: 1866
    Pomógł: 387
    Ocena: 58
    Witam, chyba najprosciej zrobic to tak:
    jeśli obrazek jest umieszczony jako obrazek, to napisac np. tak:
    Kod: text Rozwiń Zaznacz wszystko Kopiuj do schowka
    
<img id="pokoj1" src="pokoj1zgaszony.png" alt="pokoj1">

    i skrypt który zamieni obrazek będzie wyglądał mnie więcej tak:
    Kod: text Rozwiń Zaznacz wszystko Kopiuj do schowka
    
<script type="text/javascript">
function zapal()
{
document.getElementById("pokoj1").src = "pokoj1zapalony.png";
}
</script>

    i podpiąć to pod guzik np. tak:
    Kod: text Rozwiń Zaznacz wszystko Kopiuj do schowka
    
<button onclick="zapal()">Zapal pokój 1</button>

    To nie jest skomplikowany javascript, polecam przeszukać w celu znalezienia informacji google albo www.w3schools.com

    Pozdrawiam, Krzysztof.
  • #9 3519005
    roofy_1
    Poziom 17  
    Posty: 218
    Pomógł: 16
    Ocena: 16
    Witam!!!
    Możeby grafikę taką zrobić we flashu (funkca onMouseover() zmienia się kolor i kształt obiektu na który się najeżdża; oczywiście wcześniej należy to podzielić graficznie i pokolorować; myślę że jest to do zrobienia...jeśli o to chodzi ;)
  • #10 3571021
    Jashi
    Poziom 11  
    Posty: 33
    Ocena: 5
    ja zrobiłem to tak. Aby zamknąć ten temeat podam źrodło

    Kod: text Rozwiń Zaznacz wszystko Kopiuj do schowka
    <script type="text/javascript">
function wylacz(numer)
{
    var el_id = new Array()
    el_id[1] = "el1"
    el_id[2] = "el2"
    el_id[3] = "el3a el3b"
    el_id[4] = "el4"

    var imgs = new Array()
    imgs[1] = "piewnica_07.gif"
    imgs[2] = "piewnica_09.gif"
    imgs[3] = "piewnica_03.gif piewnica_08.gif"
    imgs[4] = "piewnica_06.gif"

    if (numer == -1)
    {
        for (numer=1; numer<el_id.length; numer++)
        {
            var ids = el_id[numer].split(" ")
            var ims = imgs[numer].split(" ")

            for (var i=0; i<ids.length; i++)
            {
                document.getElementById(ids[i]).src = "images/"+ims[i]
            }
        }
    }
    else
    {
        var ids = el_id[numer].split(" ")
        var ims = imgs[numer].split(" ")

        for (var i=0; i<ids.length; i++)
        {
            document.getElementById(ids[i]).src = "images/"+ims[i]
        }
    }
    document.getElementById("loc").src = "zmien.php?id=p&off="+i
}

function wlacz(numer)
{
    var el_id = new Array()
    el_id[1] = "el1"
    el_id[2] = "el2"
    el_id[3] = "el3a el3b"
    el_id[4] = "el4"

    var imgs = new Array()
    imgs[1] = "piewnica_07a.gif"
    imgs[2] = "piewnica_09a.gif"
    imgs[3] = "piewnica_03a.gif piewnica_08a.gif"
    imgs[4] = "piewnica_06a.gif"

    if (numer == -1)
    {
        for (numer=1; numer<el_id.length; numer++)
        {
            var ids = el_id[numer].split(" ")
            var ims = imgs[numer].split(" ")

            for (var i=0; i<ids.length; i++)
            {
                document.getElementById(ids[i]).src = "images/"+ims[i]
            }
        }
    }
    else
    {
        var ids = el_id[numer].split(" ")
        var ims = imgs[numer].split(" ")

        for (var i=0; i<ids.length; i++)
        {
            document.getElementById(ids[i]).src = "images/"+ims[i]
        }
    }
    document.getElementById("loc").src = "zmien.php?id=p&on="+i
}

    no i do przyciskow dodałem img id. w celu odwolania sie do poszczegolnego obrazka.
| Nowy temat
Zgłoś naruszenie prawa

Podsumowanie tematu

LABEL_AI_GENERATED
Dyskusja dotyczy problemu zmiany koloru pojedynczego elementu podzielonej grafiki po kliknięciu przycisku w HTML i JavaScript. Autor posiada grafikę podzieloną na fragmenty (wycięte elementy) i chce, aby kliknięcie przycisku obok grafiki zmieniało kolor tylko jednego wybranego fragmentu (np. z szarego na żółty), bez wpływu na pozostałe części. Proponowane rozwiązania obejmują: użycie map obrazkowych (image maps), nakładanie przezroczystych żółtych warstw (np. przezroczyste PNG lub pozycjonowane divy) na odpowiednie fragmenty, a także prostą zamianę źródła obrazka w elemencie za pomocą JavaScript (np. zmiana atrybutu src). Wskazano, że nieregularne kształty elementów (np. pomieszczenie składające się z dwóch prostokątów) mogą wymagać pocięcia grafiki na mniejsze części i odpowiedniego ułożenia w HTML. Zaproponowano również możliwość realizacji efektu we Flashu z funkcją onMouseover(). Ostatecznie podano przykładowy skrypt JavaScript, który zmienia obrazek konkretnego elementu po kliknięciu przycisku, co jest najprostszym i najczęściej stosowanym rozwiązaniem.
Podsumowanie AI na podstawie dyskusji. Może zawierać błędy.
REKLAMA