Web Design and Graphics Room. Thread, I'm Stuck on this one - any ideas?

Bellerophon · #1 6th-January-2005, 08:54 PM

Here's the problem. I'm putting together an index web page that is one big image map. Click on a particular part of it and it performs some action. It works fine, but only for the resolution I made it in - 1024x768. In other resolutions the coordinates are all off.
"Cascading Style Sheets!" I hear you all say.
Yes, done that, and it all works except for the image map. I just can't find the right .css code to pass the coords to the <area> tag.
Here's the raw code in the "index.html" file -

Code:

[img]images/wolf2a.jpg[/img]
<map id="wolfmap" name="wolfmap" >
<area shape="rect" coords="1,450,250,650" 
onclick="document.getElementById('contents').style.display='';">
</map>

As I said, that works.
What I need to do is put the coords in the appropriate style sheets, 1 set for each resolution/sheet. So I'm thinking I need something like -

Code:

<area class="wolf" onclick="document.getElementById('contents').style.display='';">

and a style sheet statement like

Code:

area.wolf
{
coords: "1,450,250,650";
shape: "rect"
}

But that does NOT work. Nor several similar permutations. :?

Where am I going wrong?

CPS · #2 6th-January-2005, 10:15 PM

You need a better man/woman than me on this one, I have never done anything on this subject.
One thing that I can think of and I dont know this as a fact. Have you tried using a percentage figure for cordinates and map in place of pixals or whatever unit you are using.
This works on other things you want to appear in the same place on different resolutions
EG X=50% Y=50% should place what ever in the centre of screen regardless of resolution.
I have no idea if this would work or not will have to research it.

Have a look at my post positioning pictures. http://www.idf50.co.uk/clubhouse/viewtopic.php?t=22083
In theory I could replace PX figure for a % figure.
I have not tried this though as yet.

Bellerophon · #3 6th-January-2005, 11:07 PM

Nice idea with the percentages, Peter, I got quite excited. But I just tried it and it doesn't seem to work with the coordinates of a map area.
I'm thinking I'll have to either predefine the coordinates as part of the initial "if <screen.width..... " statements everytime, or else overlay the full screen map with a small transparent gif, that I can place properly, then map on that. I can then just use "default" to map the whole gif without specifying the coordinates again.
The first way is probably the least hassle, unless anyone else knows how to do it properly as part of the style sheets?

CPS · #4 7th-January-2005, 09:11 AM

Have a look at this site, you may have to dig about abit for the info http://www.htmlgoodies.com/
This site is very useful and may be of help.

When I have time I will research this subbject.
One point I will make here is that the convention for makeing a website is still to make it for 800x600.
This is still the resolution that most designers and people use to view webpages.
If I spot the answer I will let you know. good luck.

Update just found this on goodies
http://www.htmlgoodies.com/tutors/im.html

CPS · #5 7th-January-2005, 10:31 AM

Here is another bit from Teds Tutorial
http://www.idf50.co.uk/webhost/membe...ted/PAGE14.HTM

And here is the code, this is a mixture of functions, image map and alerts but may help.

Code:

<HTML> 
<HEAD> 
<TITLE>USING PICTURES AS LINKS</TITLE> 

<HEAD> 

<BODY> 

<CENTER><H5>HERE IS A DIFFERENT METHOD OF USING PICTURES AND DETAILING MAPS</H5> 
<H5>AS OPPOSED TO USING URLs AFTER THE HREF TAG</H5> 
<H5>JUST CLICK ON THE FLOWER CLUMPS</H5></CENTER> 
</CENTER> 
BACK TO PAGE11 

<!Note the width and height must be the same as used in the coords program-> 
<CENTER>[img]GARDEN4.JPG[/img] 

<!You can name the USEMAP weed patch or whatever but precede it with the #-> 

<!Now you use the name without the # hash mark-> 
<MAP NAME="GARDEN"> <!this is the start tag for the map-> 

<!From here on you use the coords from the COORDS program-> 
<!Area Shape, coords, and figures, tell the program where the sense area is-> 
<! Onclick denotes the action and alert shows the message-> 

<AREA SHAPE="RECT" COORDS="151,355,317,412,"HREF, Onclick="alert('Cerastrium,Snow in summer,Rampant')"> 

<AREA SHAPE="RECT" COORDS="372,334,521,405,", Onclick="alert('Stonecrop,likes dry site,rampant')"> 
<AREA SHAPE="RECT" COORDS="127,319,313,348,", Onclick="alert('Aubretia,low growing,easy propagation')"> 
<AREA SHAPE="RECT" COORDS="331,305,456,324,", Onclick="alert('Red Stonecrop,low growing, easy spreading')"> 
<AREA SHAPE="RECT" COORDS="456,233,583,289,", Onclick="alert('Wigeilia,{Golden Honey}prune all green shoots')"> 
<AREA SHAPE="RECT" COORDS="13,223,134,287," , Onclick="alert('Penstemmon')"> 
<AREA SHAPE="RECT" COORDS="318,191,398,223,", Onclick="alert('Wigeilia,Jacobs Coat')"> 
<AREA SHAPE="RECT" COORDS="456,203,513,220,", Onclick="alert('Plantain Prefers damp site')"> 

<!Note this time an HREF this time calls for a gif, it could have been a page.htm-> 
<AREA SHAPE="RECT" COORDS="446,36,511,112," HREF="PAGE11.htm" WIDTH="180px";HEIGHT="240px"> 
</MAP>







 

<!For shape you may use POLY or CIRCLE for Circle pick the coords for the middle of the circle and the radius in pixels e.g.222,342,40 -> 
</MAP> 

<CENTER><H5>AS normal go to VIEW-SOURCE to see the CODING tags</H5> 
<H5>THE HOLLY TREE DEMONSTRATES THE USE OF A URL IT COULD ALSO BE A NEW WINDOW 
</BODY> 
</HTML>

Bellerophon · #6 7th-January-2005, 10:37 AM

Thanks Peter, I just read through it. It gives a good overview of how to create image maps, but doesn't touch on support for different client resolutions.
I think I know why - most image maps are fixed in size. They'll look smaller on higher resolution screens, but a 500 pixel wide image will still be 500 pixels wide whatever resolution you view it at, so an x-coordinate of 250 (for example) will always be half-way across it.
What I'm trying to do ( :roll: ) is use a background image as a map. This changes size to always fill the screen, so if you're viewing at 1024x768 it will be 1024 pixels wide, but if you use 800x600 it will only be 800 pixels wide. That's why my coordinates need to change for different resolutions.
I'm beginning to think there isn't an elegant solution to this, so I'm going to have a go at declaring the coords as variables.
I'll let you know how I get on. :?

edit:-
Just saw your last post Peter. Must have gone up as I was struggling with my keyboard :lol:
Thanks again, but note how the coordinates are embedded in the body of the HTML page itself. There is no way for them to change according to the user's screen resolution - you're stuck with them as they are.
If (when- let's be positive here! 8) ) I find a solution I'll post it, just in case anyone else runs into the same problem.

CPS · #7 7th-January-2005, 11:08 AM

This does appear to be a hard one to crack, getting it to work for other resolutions also to work in other browsers.
When looking through my books I have seen the code for complying with different resolutions, but cannot remember which one, I think it only related to pages and not the pressant subject.
I will keep looking though.

CPS · #8 7th-January-2005, 11:54 AM

On the Goodies link above if you go through them he has an image map that he has cut into sections and made each a link, then you reasemble them to gether again, no resolution broblem.

On the same lines as this I came up with this idea, may be complete and utter rubish though.
As above, you cut the picture up to how many links you want containing the part of the image you want use as a hyperlink.
If the segments can be selected in equal sizes, you could make a borderles table 100% wide colums and rows to suite to contain them.
You could then hyperlink from any of the individual table cells,
you would see a complete picture and it should work in all reolutions and browsers.
Or am I ready for the funny farm

Bellerophon · #9 7th-January-2005, 03:44 PM

DONE IT!
Phew!

I think your method with tables would work, Peter, but once I'd started thinking down one line I wanted to see it through, if you know what I mean, and at least I don't have to chop up the picture.

In the end, I shoved the whole map statement up into the screen width detection bit in the head. Messy, but not too bad.
So now it looks like this -

Code:

function cont()
{
document.getElementById('contents').style.display=''; 
}

if (screen.width < 801) { 
document.write('<link rel="stylesheet" href="style-z800.css">');
document.write('<map id="wolfmap" name="wolfmap" >')
document.write('<area shape="rect" coords="1,300,200,450" HREF="javascript:cont();">')
document.write('</map>')
} 

else { 
document.write('<link rel="stylesheet" href="style-z1024.css">'); 
document.write('<map id="wolfmap" name="wolfmap" >')
document.write('<area shape="rect" coords="1,450,250,650" HREF="javascript:cont();">')
document.write('</map>')
}

At least it works!
At the moment I'm assuming most people use either 800x600 or 1024x760. I'll probably nest another "if/else" statement to add support for 1280x1024 now I know how.

You mentioned cross-browser support. That's a thought I haven't really tackled. I think the code I'm using is basic enough to be supported by most browsers, but since I only have IE I've got no way to test it. So I'll just keep my fingers crossed.

Thanks a lot for all your help, I was on the verge of giving up!

Ian.

PS - I'll probably be back soon, stuck again :lol:

CPS · #10 7th-January-2005, 04:01 PM

Ok its a good feeling when you crack the problem thats great.
On my searches they do recomend you make it so it works for 800x600, 1024x768 and 1280x1024, so you are spot on.
However on every page I looked at, none had any info for different resolutions.
So may be you are the first you never know.
Hope to see the result when you have completed the whole thing with interest.
PS: some reported trouble viewing an image map with FireFox.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode