Menu
I have three rectangular images overlapped within a diagonal line, the first fully visible on the top-left corner, the second in the center partially hidden by the first and the last in the bottom-right corner partially hidden by the second. I want the image which is clicked to go on top of the others. I'm trying to achieve this by manipulating z-index with jQuery but it doesn't seem to work. It actually seems like jQuery isn't even recognized.
This is my test code:
<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>
Still when I click the "launch" button nothing even happens.
330
Okay i just realized that you made small mistake you are using the SAME tag for both loading query and DECLARING your inline javascript... you can't do that. You have to use two separate script tags.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
</script>
NOTE the new script tag:
<script type="text/javascript">
$(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>
...
The rest of the answer still applies.. Namely you have to get rid of the z-index in #top, #middle, and #bottom....
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
