SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2008
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    bring front,bring back images

    How to do bring front,bring back an images using javascript.plz tell the logic.

  2. #2
    SitePoint Enthusiast PicklePete's Avatar
    Join Date
    Apr 2008
    Location
    England
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By 'bring front', do you mean change their z-index? If so, you could try something like this:

    HTML Code:
    <input type="button" value="Image One Front" onclick="changeZ('img1');" />
    <input type="button" value="Image Two Front" onclick="changeZ('img2');" />
    <img id="img1" src="media/imageOne.jpg" />
    <img id="img2" src="media/imageTwo.jpg" />
    Just for the sake of overlapping the images, I added a CSS rule to img:

    Code:
    img { position: fixed; left: 0px; top: 40px; }
    And finally the JS:

    Code:
    function changeZ(id) {
    	var obj = document.getElementById(id);
    	obj.style.zIndex += 1;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •