lost with hot spots

..really dont know what i'm doing..

[exodusinperil]

i'm trying to design a band's website that has a banner with their name and a background, and a main section that has this landscape image. they've told me that they want sections of this image [doors, to be exact] to be the navigation so basically when you click a specific door your content [for example, their bio, or their 'shows' page] will come up at the top of this image where the colours are more neutral and they contrast the font colour.

i've tried designing it as 3 iframes. the banner, then the image split into 2. in the "main" frame i have half the image as a background and the content on that. in the bottom frame i have the "menu" which is the bottom half of the image and i have hot spots on the doors, eack link 's target is in the main frame but i cant get it to open.

so my question is: how can i have a menu frame that i can click hot spots on and have the bottom part of an image on, and have the links open in the main frame that has the top half of the image. and also, since the hot spot is defined by coordinates, what if i want the 2 halves of the picture to be in percent to fit other's computers, rather than in pixels? can the coordinates be in percentage form, or will they line up anyways?

is there an easier way i could be doing this, im not very experienced.

[edited by: BlobFisk at 3:38 pm (utc) on Oct. 11, 2004]
[edit reason] No URLs please! See TOS [webmasterworld.com] [/edit]

[encyclo]

Welcome to WebmasterWorld [webmasterworld.com], exodusinperil.

This sounds like just the job for a client-side image map. If you want just parts of an image clickable, it's the only way.

Here's a basic image map example:

<map name="ImageMap">
<area shape="rect" coords="0,0,250,85" href="link1.html" alt="link1">
<area shape="rect" coords="59,0,118,20" href="link2.html" alt="link2">
</map>

<p><img width="715" height="60" alt="" src="/path/to/image.jpg" usemap="#ImageMap"></p>

The basic idea is that you can specify the coordinates of the part of the image you want clickable, then you add

usemap

to the image element to make it all work. You get the coordinates from opening the image in your image editor - mousing over the image usually shows the X/Y coordinates.

My example uses rectangular areas, but you can also use circles or polygons:

<area shape="circle" coords="86,177 104,166" href="link3.html" alt="link3">

<area shape="poly" coords="4,90 45,71 59,144 96,121 94,165 22,240" href="link4.html" alt="link4">

It takes a while to get it just right, but the end result works well. However, you should duplicate the image map links with standard links elsewhere on the page for those few users whose browser does not support image maps, and for the search engine spiders who may not be able to follow the image map links.

[vkaryl]

Image maps got a certain amount of "bad press" in the last few years, after some sites went WAY overboard with the slicer-dicer tecnology; ran across one site a couple years back that sliced one of Rembrandt's huge paintings into 1/2 inch sections to use as a "site map/splash page" - wasn't of course usable as either one, besides it took FOREVER to load on dialup....

I use small graphics as image maps on sites where it's a logical thought - like the site exodusinperil is talking about. Nice idea, actually - pretty creative thinking.... and yes for whoever stops by next to say "oh that's been done" - I'm sure it has, but that's not the point....

If you don't slice a 12000 x8000 graphic into tiny pieces, it's a quite workable solution. Largest one I've got right now is about 340x280, with 4 "hot spots". Takes less than 2 secs to load even on my crap antique phone lines/dialup....

[tedster]

Make sure you give each frame a name attribute, such as name="main", when you write your frameset document. Then use those same names for target attributes in your image map, to let the browser know which frame to load the new page into.

Example:
<area shape="rect" coords="aa,bb,cc,dd" href="newpage2.html" target="main">

When the hotspot is clicked, that mark-up will load newpage2.html into whatever frame you named "main".

[tedster]

what if i want the 2 halves of the picture to be in percent to fit other's computers, rather than in pixels?

You can set up frames as a percent, but not the images. In fact, your frameset MUST have the ability to stretch and compress to exactly fill the viewport, no matter what its size.

One approach may be to have two "empty" frames in your frameset, one on either side, so those frames can do the expanding or contracting depending on the visitor's resolution. That leaves your "inside" frames able to match up the way you want.

[exodusinperil]

okay well in my main window ive got:
<FRAME name=maina src="maina.htm">
and in my menu window ive got:
<blah blah blah target="maina">
so then what am i doing wrong?
is it because they are iframes, not frames?

can i use percentages as coordinates in hot spots? or is there a resizing function where i can still use hot spots on specific places but be able to have it fit many broswers?

[tedster]

You apply an image map to an x,y coordinate of the image itself and not an x,y coordinate of the window. Because the coordinates are relative to the image's top left corner, they won't change with various window dimensions.