🚀 go-pugleaf

On Tue, 4 Sep 2012 03:42:53 -0700 (PDT)
BooB <max-in@wp.pl> wrote:

> są dwa obrazki . jak zrobić aby po kliknięciu drugiego obrazka chował się 
> div przypisany do pierwszego ?? i na odwrót.
> na razie to muszę kliknąć aby wpierw schować poprzedni div .
[wipe]

Onclicki, style inline, zepsute linki… Na zadanie domowe zastanów się
jak to naprawić, żeby działało BEZ włączonego javascriptu w
przeglądarce.

-- >8 ---
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Js</title>
    <script>
        window.onload = function(){
            var $ = function(arg){
                return document.getElementById(arg);
            };

            function toggleVisibility(obj){
                var child = null;
                if (obj.parentNode.hasChildNodes())
                    var child = obj.parentNode.firstElementChild;

                while(child){
                    if (child.id != obj.id && child.classList.contains('on')){
                        child.classList.remove("on");
                        child.classList.add("off");
                    }
                    child = child.nextElementSibling;
                }
                obj.classList.remove("off");
                obj.classList.add("on");
            }


            var get_callback = function(elem_id){
                return function(){
                    toggleVisibility($(elem_id));
                }
            };

            var form = $("form");
            form.onsubmit = function(){ return false; };

            var child = null;

            if(form.hasChildNodes())
                child = form.firstElementChild;

            while(child){
                child.onclick = get_callback(child.getAttribute("data-rel"));
                child = child.nextElementSibling;
            }
        };
    </script>
    <style>
        .img {position: absolute; width: 100px; height: 100px; left: 300px; 
            top: 150px}
        #wr11 {background-color: yellow}
        #wr12 {background-color: green}
        #wr13 {background-color: red}
        #wr14 {background-color: blue}
        #wr15 {background-color: black}
        .on {visibility: visible}
        .off {visibility: hidden}
    </style>
</head>
<body>
    <div>
        <div id="wr11" class="img off"></div>
        <div id="wr12" class="img off"></div>
        <div id="wr13" class="img off"></div>
        <div id="wr14" class="img off"></div>
        <div id="wr15" class="img off"></div>
    </div>

    <form id="form" action="js.html">
        <button id="yellow" data-rel="wr11">yellow</button>
        <button id="green" data-rel="wr12">green</button>
        <button id="red" data-rel="wr13">red</button>
        <button id="blue" data-rel="wr14">blue</button>
        <button id="black" data-rel="wr15">black</button>
    </form>
</body>
</html>
-- >8 ---

-- 
      -^-  _        coś tam w tle sobie gra, np:
   _ /O)_\//        haujobb - Unseeing
  (_(|__(_(_) grf.  

dzięki , Twój kod działa bez problemu .
teraz :"jak to naprawić, żeby działało BEZ włączonego javascriptu"
czyżby tylko CSS ??

On Wed, 5 Sep 2012 04:32:06 -0700 (PDT)
BooB <max-in@wp.pl> wrote:

> dzięki , Twój kod działa bez problemu .
> teraz :"jak to naprawić, żeby działało BEZ włączonego javascriptu"
> czyżby tylko CSS ??

Nie tędy droga. Server side + szablony + formularz.

-- 
      -^-  _        coś tam w tle sobie gra, np:
   _ /O)_\//        haujobb - Violator
  (_(|__(_(_) grf.  

> 
> BooB <max-in@wp.pl> wrote:
> 
> > są dwa obrazki . jak zrobić aby po kliknięciu drugiego obrazka chował się 
> 
> > div przypisany do pierwszego ?? i na odwrót.
> 


A nie lepiej podmieniać obrazki w jednej divce, po co dwie divki.


> > na razie to muszę kliknąć aby wpierw schować poprzedni div .
> 

A chesz bez kliknięcia? to:

.pic {top:0; left:0; width:50px; height:80px; background:url('f1.jpg');}
.pic:hover {background:url('f2.jpg');}

<div class="pic">pic...</div>


Nie wiem czy inne przeglądarki obsługują zIndex, IE to ma,
a wtedy tylko zmieniasz w JS ten zIndex obrazka.
Kod możesz również umieścić w onClick="if(){itd...}"

Jeśli te obrazki są na stałe to zainteresuj się spritami
(wszystkie obrazki w jednym obrazku i w JS lub CSS jest tylko przesuwanie).

Andrzej.