/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Quick help with HTML code please! Image resizing

Need a little help if possible as I have been stuck on this for ages.

Looking to make a header for a website that adjusts sae to fit the browser. I have made the image with selectable hotspots in Fireworks.

I can make the image resize fine, but the hotshots do not move with the image so they are not in the right place.

Any help sorting this would be amazing.

Here is the code

[code=html]
<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<img usemap=”#m_z” id=”z” src=”http://stonehengecycles.web-epos.com/images/stonehengecycle/stonehenge.png” style=”width: 100%;” />

<map id=”m_z” name=”m_z”><area alt=”” href=”http://www.stonehengecycles.com/page/7/contact” coords=”1224,20,1412,188″ shape=”rect” />
<area alt=”” href=”http://www.stonehengecycles.com/page/7/contact” coords=”1039,141,1169,188″ shape=”rect” />
<area alt=”” href=”http://www.stonehengecycles.com/page/30/gallery” coords=”881,141,1002,188″ shape=”rect” />
<area alt=”” href=”http://www.stonehengecycles.com/page/22/Free_24_months” coords=”718,141,842,188″ shape=”rect” />
<area alt=”” target=”_blank” href=”http://www.stonehengecycles.com” coords=”246,140,358,187″ shape=”rect” />
<area alt=”” href=”http://www.stonehengecycles.com/page/8/About_UsCervelo_R3_Wilier_Bikes_Wilier_Road_Bikes” coords=”564,141,677,188″ shape=”rect” />
<area alt=”” href=”http://www.stonehengecycles.com/page/22/services” coords=”394,140,522,187″ shape=”rect” /> </map>
</body>
</html>
[/code]

to post a comment
HTML

4 Comments(s)

Copy linkTweet thisAlerts:
@Code-tardSep 30.2014 — Hey Nick,

Just a newbie myself but fan off Fireworks a long time myself.. Dude I just dont think its an option.. The whole slice and hot spot thing is a 15yr old method, that was great when screens were all 800x600 or 1024x768 but its just not practical anymore...

If you need the nav to be scalable/fluid build it separately, on top or below the header....

Luck ?
Copy linkTweet thisAlerts:
@LenKaiserSep 30.2014 — A link to the site would have been better. The Firework hotspot idea is a bad one as said above. If you want a menu that creates a roll over effect or anything that has a roll over effect you can easily achieve it with CSS & possibly JavaScript. Also I believe posting your code without the code tags implemented in your post is a no-no here.
Copy linkTweet thisAlerts:
@deathshadowSep 30.2014 — Not sure what the blazes a "hotspot" is, but it LOOKS like you've been:

1) relying on fireworks WYSIWYG features which is a disastrously bad way of building a site.

2) Using an 'image map'.

Image maps are inherently measured in system pixels... when you resize the image it is no longer 1:1 with system pixels, so of course the map doesn't line up.

You could probably replicate MAP's behavior by absolute positioning a bunch of anchors off a parent wrapper around both the image and the map, setting top, bottom, left and right on the anchors in percentages so that when the image (and the DIV wrapping it) change size, the anchors will change position accordingly.

But really, any image large enough to do this with is probably too big to have any blasted business on a website, and designing from a pixel pusher like Fireworks or Dreamweaver is a back-assward approach to building site elements.

I'd have to see the image in question to say for sure and to put together a proper working example, but really what you are trying to do is a horrible way of building anything on a website, no matter what "tools" like fireworks will con you into thinking. There's a reason I often say that from a web development perspective "the only thing about Adobe software that can be considered professional grade tools are the people promoting it's use!"
Copy linkTweet thisAlerts:
@nickrace17authorSep 30.2014 — Cheers guys, I have no ideas what I am doing so its no surprise I'm doing it wrong! Will try and do some more research
×

Success!

Help @nickrace17 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...