overlay images

**benosullivan** · 04-15-2005, 11:20 AM

Dar All

If I want images to overylay and use them as active links...

effectively - I have a large background picture which takes up most of the webpage and I want little images that overly that one that I can use as links.

what code do I need - any idea?

Manu Thanks,
Ben

**mwinter** · 04-15-2005, 06:08 PM

Originally Posted by benosullivan

I have a large background picture which takes up most of the webpage and I want little images that overly that one that I can use as links.

what code do I need - any idea?

You would use CSS to position the links containing the images. For example,

HTML Code:

<head>
  <!-- ... -->

  <style type="text/css">
    #container {
      background: url(http://www.example.com/background.jpeg) #000000 no-repeat;
      color: #ffffff;
      position: relative;
      height: <nn>px;
      width: <mm>px;
    }
    #container a {
      position: absolute;
    }
    #container a img {
      border-style: none;
    }

    #blah {
      top: <y>px;
      left: <x>px;
    }
  </style>
</head>

<body>
  <div id="container">
  <a id="blah" href="..."><img alt="text equivalent of image" src="..."></a>
  </div>
</body>

Clearly, there are several parts that you need to alter:

The width, height, background colour, foreground colour, and background image of the "container" div.
The border around the linked images. Most of the time, borders aren't desired (so the border is removed above), but your requirements might be different.
The list of links and images; their id, href, alt, and src attributes.
The position of each link.

Hope that helps,
Mike

**benosullivan** · 04-17-2005, 08:14 PM

extremely helpful - thank you!

Ben

**benosullivan** · 04-19-2005, 10:32 AM

Dear Mike,

Thanks for your help so far. I have the background image loaded and the overlaying one on top, but I cannot reposition the overlaying image.

so it just sits flush against the left hand border and the top border. How do i define the overlaid image's position?

Many thanks
Ben

**mwinter** · 04-19-2005, 06:11 PM

Originally Posted by benosullivan

How do i define the overlaid image's position?

You need to alter the parts I mentioned.

First, give each a element a unique id attribute. Then, in the style sheet, use the top, left, bottom and right properties in combination to arrange the link and its image within the container. Each link-related rule in the style sheet will have the pattern:

Code:

#id {
  /* positioning properties */
}

where id is the id attribute for that link.

For example, to place a link with the id, chapter-1, twelve pixels from the left edge, and fifteen from the top, you'd place

Code:

#section-1 {
  left: 12px;
  top: 15px;
}

in your style sheet.

Mike

**The Red** · 04-04-2009, 02:31 PM

Is it possible to use the div as the border? That way you dont have to say 300 px from the top? if you specify position and use absolute positioning will the size of the page (it gets bigger with more content) no longer affect the positioning?

Thanks

Thread: overlay images

Thread Tools

Search Thread

overlay images

not quite there, yet...

Bookmarks

Bookmarks

Posting Permissions