PDA

View Full Version : overlay images



benosullivan
04-15-2005, 12:20 PM
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 :confused:

mwinter
04-15-2005, 07:08 PM
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,


<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, 09:14 PM
extremely helpful - thank you!

Ben

benosullivan
04-19-2005, 11: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, 07:11 PM
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:


#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


#section-1 {
left: 12px;
top: 15px;
}in your style sheet.

Mike

The Red
04-04-2009, 03: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