Image maps over a background image? How?

HTML & CSS
1

Hey guys,
Took over a project from someone that designed the homepage using a background image only. I need to add a link over the background image, but it needs to be a graphic, not text. Look at this page:

http://www.ogmda.com/moh_test/index.html

See the AF logo at the bottom left of the page? How do we link that to another page? I’m assuming we need to make that image a seperate image and then do some positioning in CSS?

Thanks for any info!

2

Hmm, a website that’s basically just a background image is not much of a website. (Think of what will happen if images don’t load!)

Still, to answer your question, you could just position a link over that part of the image, but it’s not a great idea. E.g.

HTML

<div id="container">
	<div id="links">
    	<ul>
        	<li><a href="about.html" id="about-medal" title="About the Medal"></a></li>
            <li><a href="alpha.html" id="by-name" title="Search by Name"></a></li>
            <li><a href="war.html" id="by-war" title="Search by War"></a></li>
        </ul>
    </div>
    [COLOR="Blue"]<p class="link"><a href="#"></a></p>[/COLOR]
</div>

CSS

p.link {height: 60px; width:140px; position:absolute; top:500px; left:60px}
.link a {display:block;width: 140px; height:60px;}
3

If you are set on using the image, why make it a background? If you make it a normal image, you can map the image and have your links.

I would think a better idea would be to use the parchment background and program the site using real text and images from the current graphic.

4

hey guys, thanks. I agree wth you, but it’s too late now.

Either way, that graphic idea worked. THanks!