All geek questions in one place

Change z-index overlay images with jQuery

I have three rectangular images superimposed on a diagonal line, the first fully visible in the upper left corner, the second in the center, partially hidden by the first and last in the lower right corner, partially hidden by the second. I want the image to be clicked to go to others. I am trying to achieve this by manipulating z-index using jQuery, but it does not seem to work. Actually, it looks like jQuery is not 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>

However, when I press the start button, nothing happens.

+6
source share
5 answers

Well, I just realized that you made a small mistake when using the SAME tag to load a request and DECLARING your built-in javascript ... you cannot do this. You must use two separate script tags.

 <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"> </script>

NOTE 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 is still applicable. Namely, you need to get rid of the z-index in #top, #middle and #bottom ....

+1
source

I recommend removing all z-indexes from your css. Then create a class called ".veryHighZ-Index", for example, and add this class to the clicked image and remove the class from the previously clicked image ...

I modified your code a bit, but this code should work here.

 <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> $(document).ready(function () { // #pictures div catches all divs inside the #pictures $('#pictures div').click(function () { $('.veryhighz-index').removeClass('veryhighz-index'); $(this).addClass('veryhighz-index'); }); }); </script> <style type="text/css"> #pictures { width: 650px; height: 300px; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 50px; background: lime; position: relative; overflow: hidden; } #top { top: 0; left: 0; position: absolute; } #center { top: 60px; left: 200px; position: absolute; } #bottom { top: 150px; left: 400px; position: absolute; } .top, .center, .bottom { width: 300px; height: 300px; border: 2px solid red; } .top {background: red;} .center {background: yellow;} .bottom {background: blue;} .veryhighz-index { z-index: 999999; } </style> </head> <body> <div id="pictures"> <div id="top" class="top"></div> <div id="center" class="center"></div> <div id="bottom" class="bottom"></div> </div> </body> </html>

In short, add the following code to your css

  .veryhighz-index { z-index: 999999; }

and this code for javascript functions

  // #pictures img catches all images inside the #pictures $('#pictures img').click(function () { $('.veryhighz-index').removeClass('veryhighz-index'); $(this).addClass('veryhighz-index'); });
0
source

You have a javascript syntax error. In your css commands, replace: with.In addition, you need to wrap your own script in your own javascript tag, and not inside the jqueryimport tag

0
source

Modify your scripts as follows:

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <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>

That should work.

0
source

just some suggestions here

  • As Ahmed noted, your script is inside a script tag that has a separate src and url value - create a separate one for your built-in script. Are you happy you did it right?
  • Try entering button input between the opening and closing tags of the form, or at least some block-level element such as div or p. Apparently, some creaking doctrines do not accept it otherwise.
  • I had some problems with scripts that do not work when connecting to js files with multiple dots in the file name, for example 1.7.1.min.js. - I refer to the code posted in google, which has these points in the directory path instead of such as ... /1.7.1/jquery.js

I obviously need to decide how to include code samples - pressing the "{}" button or adding 4 spaces does not work!

0
source

Source: https://habr.com/ru/post/904589/

More articles:


All Articles