In this article, you learn how to get and set a webpage element's z-index. The example code provided used these principles to shuffle a small deck of playing cards by clicking or double-clicking on their images. You might use this information to create your own webpage card game, or for some other interesting application.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

How to Shuffle the Deck With Java Script

An element on a webpage can be overlapping or on top of another element. If you specify several elements positions such that they overlap or are on top of each other, by default they are stacked from bottom to top in the order that their code appears in the webpage document. The relative position of an element in the stack is indicated by a number called its z-index. The lower the z-index, the closer the element will be to the bottom of the stack. An element's z-index can be a negative number.

In this article, I demonstrate how to get and set a webpage element's z-index. In this example I display a small deck of playing cards. When you click on a card, it moves to the top of the stack. When you double-click on a card, it moves to the bottom of the stack. You can probably think of many interesting applications for the principles demonstrated in this article. Below is a working example of the code that I will provide.

The code to achieve this effect is amazingly simple. Each playing card image is contained within a div element. Each div is given an id attribute and a style attribute. The id attribute is used to refer to each specific card to get and set its z-index. The style attribute sets the location and initial z-index of each playing card image. The code for this is shown below.

<div id="card1" style="position:absolute; left:0px; top:0px; z-index:0;" onclick="movetoFront(this)" ondblclick="movetoBack(this)"><img src="c_a.png"></div>
<div id="card2" style="position:absolute; left:30px; top:30px; z-index:1;" onclick="movetoFront(this)" ondblclick="movetoBack(this)"><img src="c_2.png"></div>
<div id="card3" style="position:absolute; left:60px; top:60px; z-index:2;" onclick="movetoFront(this)" ondblclick="movetoBack(this)"><img src="c_3.png"></div>
<div id="card4" style="position:absolute; left:90px; top:90px; z-index:3;" onclick="movetoFront(this)" ondblclick="movetoBack(this)"><img src="c_4.png"></div>
<div id="card5" style="position:absolute; left:120px; top:120px; z-index:4;" onclick="movetoFront(this)" ondblclick="movetoBack(this)"><img src="c_5.png"></div>

In the code above, note that the position property is set to absolute. The left and top properties set the upper-left corner of each playing card image to its desired position on the webpage. The z-index property sets the stacking order of the cards. If you would like to try this example on your own webpage, right-click on each card and in the popup menu that appears, select "save Picture As...". Then in the "Save Picture" dialog box that appears navigate to a folder where you want to save the image file.

In the code, each div defines two events, onclick and ondblclick. When you click on a playing card, the onclick event calls a Java Script funtion named movetoFront, passing a reference to the div element to the function. When you double-click on a playing card, the ondblclick event calls a Java Script function named movetoBack, passing a reference to the div element to the function. Shown below is the code for the movetoFront function.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268