Вопросы Теги

Изменение z-индекса перекрывающихся изображений с помощью jQuery

У меня есть три прямоугольных изображения, перекрываемых диагональной линией, первое полностью видно в верхнем левом углу, второе в центре частично скрыто первым, а последнее в правом нижнем углу частично скрыт вторым. Я хочу, чтобы изображение, по которому щелкнули, размещалось поверх других. Я пытаюсь добиться этого, манипулируя z-index с помощью jQuery, но, похоже, это не работает. На самом деле кажется, что jQuery даже не распознается.

Это мой тестовый код: 

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
    $(document).ready(function () {
        $('#launch').click(function () {
            alert('Ok');
        });

        $('.bottom-pic').click(function () {
            $(this).css('z-index' : '1');
            $('.bottom-pic').not(this).css('z-index' : '0');
        });
    });
    </script>
    <style type="text/css">
    #pictures {
        width: 650px;
        height: 300px;

        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        margin-bottom: 50px;

        position: relative;
    }

    #top {
        top: 0;
        left: 0;

        position: absolute; 
        z-index: 1;
    }

    #center {
        top: 60px; 
        left: 200px;

        position: absolute; 
        z-index: 1;
    }

    #bottom {
        top: 150px; 
        left: 400px; 

        position: absolute; 
        z-index: 0;
    }
    </style>
    </head>
    <body>
    <div id="pictures">
         <img src="bottom-pic.jpg" id="top" class="bottom-pic">
         <img src="bottom-pic.jpg" id="center" class="bottom-pic">
         <img src="bottom-pic.jpg" id="bottom" class="bottom-pic">
    </div>
    <input type="button" value="Try" id="launch">
</body>
</html>

По-прежнему, когда я нажимаю кнопку «запустить», ничего даже не происходит.

6
задан Davide Valdo 28 December 2011 в 09:41
поделиться