[oneeyeproduction]

How do you make the background resize for the browser in dreamweaver with out affecting content.
I'm using

<img src="one eye production website home2.jpg" width="100%" height="100%" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="rect" coords="147,385,296,423" href="portfolio.html" target="_self" />
  <area shape="rect" coords="323,387,463,423" href="services.html" target="_self" />
  <area shape="rect" coords="493,385,652,424" href="about us.html" target="_self" />
  <area shape="rect" coords="678,384,865,422" href="contact us.html" />

for the code and my hotspots are in the middle of the page when I open the html file in my browser.
anyone have any ideas on how to fix the problem?

*** Edit ***
Please use code tags when posting code.

This post has been edited by GunnerInc: 06 December 2012 - 08:05 PM
Reason for edit:: Code tags

[Atli]

You don't. Using the method you are currently using, the positions of the areas are defined using absolute coordinates. As such, if you scale the background image, the defined coordinates lose sync and appear out of position.

There are other ways to do what you are after, that you can control better. What I would suggest is setting up normal links and overlay them over the background image in the correct positions, using absolute percentage vales. So instead of saying that the portfolio link is X number of pixels from the left and Y number of pixels from the top, according to the original size of the background image, you say it's X percent from the left and Y percent from the top. That way you can scale both the sizes and the positions, and they will not lose sync.

For example, consider if you set your body HTML up to look like this:

<div id="container">
    <img id="background" src="background.jpg" alt="Background">
    <a id="page1" href="#page1"></a>
    <a id="page2" href="#page2"></a>
</div>

The #container div is there to fill out the screen, so that that #background image can be made to fill out the screen as well. (That could potentially be done without the #container, using the body, but that's more complex so I'll keep it like this.) To do that, you can simply give the #container a fixed position that has 0 for all left, top, right and bottom values. That will effectively make it fill out the screen, regardless of it's size. Giving the #background image 100% height and width makes it fill out that area as well, scaling as the window does.

The two links is where the interesting part happens. Those you would absolutely position into place using percentages, so that they will cover the area of the image that the link is supposed to work on. You'd also have to make them block elements.

This CSS demonstrates that:

#container {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
#background {
    width: 100%;
    height: 100%;
}
#container > a {
    position: absolute;
    border: none;
    display: block;
}
#page1 {
    top: 10%;
    left: 10%;
    width: 25%;
    height: 25%;
    background-color: #f00;
}
#page2 {
    top: 25%;
    left: 45%;
    width: 35%;
    height: 10%;
    background-color: #0f0;
}

I've made the page1 and page2 areas red and green, just so you can track how they scale with the image. Remove the "background-color" styles and they will be hidden, appearing more or less exactly like your <area> tags do now, except without losing sync with the background.

[Atli]

P.S.

I just have to comment on this bit:

oneeyeproduction, on 07 December 2012 - 03:02 AM, said:

How do you make the background resize for the browser in dreamweaver ...

This is the wrong way to think, when asking questions like these. Instead, think: "How can I do this in HTML and CSS?". IDEs like Dreamweaver are just tools. You should never rely on them to do your coding for you. If you can't write HTML/CSS without using Dreamweaver, you are severely limiting yourself.

HTML and CSS are not complicated languages. Learning how to use them is no more difficult than learning how to use the various Dreamweaver tools. (And it's a whole hell of a lot cheaper.)