Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Banned
    Join Date
    Nov 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb Overlapping image links

    How does one create links similar to those on the following site (bottom right):

    http://www.nycgarbage.com/press.html

    What I’m looking for is having image links, but allowing them to overlap when rolled over as seen in that link. Is it hard to do? I was thinking having each image in a separate layer.
    Last edited by WA; 12-28-2007 at 02:46 AM.

  • #2
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,468
    Thanks
    8
    Thanked 1,085 Times in 1,076 Posts
    You can see what they did by looking at their HTML source.

    They are using a gazillion .jpg images with Javascripting to do mouse-overs.

    View the HTML and then look at several of the .jpg images by themselves.

    A very elaborate scheme for what it does ... whether or not there's a simpler way?
    If the links were a little bit further apart so the mouse-over on one image doesn't
    affect another ... that would be easier.

    I guess I wouldn't have the patience to make all of those images for mouse-overs ...
    but, it's their site not mine.

  • #3
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    I created a very simple page that does this.

    For each link, you need one image with the onmousover event defined. This makes the second image visible (display=block). This second image has an onmouseout defined, which makes it invisible (display=none). The second image is larger than the first, and will overlap adjacent images.

    It is important that the second image is precisely aligned over the first, which is why I have used absolute positioning for all the images. All these images are gifs with transparent backgrounds (so that the first images show through). You could also do this with png files with transparency.

    John Rostron

  • #4
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,468
    Thanks
    8
    Thanked 1,085 Times in 1,076 Posts
    Nefrit ... there you go ...
    John has a terrific CSS method, which is 1000 times simpler than the 100% Javascript
    method the other author used. You still use Javascripting for the mouse-over part.

    John has a good example --> the power of CSS.


  •  

    Posting Permissions

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