Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Div, Background Image, and Image Map

On a web page I'm creating, I have a div with a background image. I overlay some text over the image that I'll be changing frequently, so that's why I'm using a background image and real text instead of an img tag that contains the text.

The background image contains some click-able areas, so I need an image map.

I think the best way to do this is to have another overlay div with a transparent image, and have an image map for the transparent image that corresponds to the background area click-able areas.

Am I on the right track, or is there a better way?

like image 924
Coolmoondog Avatar asked Nov 13 '09 12:11

Coolmoondog


People also ask

Can you put background image in a div?

One way is to use the background-image CSS property. This property applies one or more background images to an element, like a <div> , as the documentation explains. Use it for aesthetic reasons, such as adding a textured background to your webpage.

What are the two types of image maps?

Two types of image maps are client side and server side. Client side image maps provide multiple active regions through the browser and they can be made accessible relatively easily. Server side image maps require a mouse to be used and transfer click data to the server for processing.

Are image maps still used?

The bottom line is that if you want or need to use an image map, they are still a part of the standard, and they do have valid uses.


1 Answers

If you only need the "rectangle" shape for the links in the image map, you could use css defined link positions instead. This is accomplished by specifying the position and setting the background-color to transparent. Here is an example: http://www.position-relative.com/tutorials/tute1_css_bg_image.php

like image 90
James Kolpack Avatar answered Sep 18 '22 11:09

James Kolpack