Jump to content

image mapping with background image


cspal
 Share

Recommended Posts

I have made a background image and use it from CSS file in the web page:

<link href="base.css" type="text/css" rel="Stylesheet" />

The CSS file look so:

body { background-image: url("images/background.gif");background-repeat: no-repeat;background-position: 0% 0%; background-attachment: fixed;background-color: #e5f5fc;}

I have made on this background image seven buttons and want to use these for the navigation with image mapping. I have made image mapping on this background image. I dont know how to write code (CSS or HTML) to use this image as a background image. Is it possible to use image mapping on the background image?If this is not possible then how can I use this image as not a background image along with a div box so that the div box stand over this image and not bellow from this image?The div box look in the CSS file so:

.main {overflow: auto;margin-top: 92px;margin-bottom: 10px;margin-left: 180px;margin-right: 180px;border: groove;border-color: #F6DD90;padding: 1em;float: left;width: 600px;height: 310px;}

and I use it in HTML document so:

<DIV class="main"> ... </DIV>

Thanks for any advices!

Link to comment
Share on other sites

If you set your image as the background you could try creating transparent gif's that sit on top of the 7 buttons to be clicked, this would give the appearance that you were clicking the background buttons but you'd acctually be clicking an invisible image sitting on top of it.This is the only way i can think of to have a background on your document with an image map. :)

Link to comment
Share on other sites

If you set your image as the background you could try creating transparent gif's that sit on top of the 7 buttons to be clicked, this would give the appearance that you were clicking the background buttons but you'd acctually be clicking an invisible image sitting on top of it.This is the only way i can think of to have a background on your document with an image map. :)

Thank You for your advice! :( Probably there is other way to get the navigation panel with buttons, isn't? :)What is the preferred way to do this?
Link to comment
Share on other sites

What is the preferred way to do this?

I depends on each user, the easiest way would be to put an anchor tag around the image.
<a href="http://www.google.com"><img style="border:0px;width:100px;height:100px" src="http://www.google.co.uk/intl/en_uk/images/logo.gif" /></a><br /><a href="http://www.ebay.co.uk"><img style="border:0px;width:100px;height:100px" src="http://pics.ebaystatic.com/aw/pics/uk/logos/logoEbay_150x70.gif" /></a><br /><a href="http://www.w3schools.com"><img style="border:0px;width:100px;height:100px" src="http://www.w3schools.com/images/w3default80.jpg" /></a>

Link to comment
Share on other sites

I depends on each user, the easiest way would be to put an anchor tag around the image.
<a href="http://www.google.com"><img style="border:0px;width:100px;height:100px" src="http://www.google.co.uk/intl/en_uk/images/logo.gif" /></a><br /><a href="http://www.ebay.co.uk"><img style="border:0px;width:100px;height:100px" src="http://pics.ebaystatic.com/aw/pics/uk/logos/logoEbay_150x70.gif" /></a><br /><a href="http://www.w3schools.com"><img style="border:0px;width:100px;height:100px" src="http://www.w3schools.com/images/w3default80.jpg" /></a>

Wow! It's ace! Thank You!!! :):):(
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...