Image map for different resolutions

I need a script for scaling images with their associated maps according to the screen resolution.  Has anyone seen or know how to do this?  I have many, many image maps and need a cure all from having to create multiple versions of the same map for diferent screen resolutions.  I am writing to NN4.
LVL 11
kmartin7Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Holger101497Commented:
well.. first I wanted to post a comment, but of course I still tried my code and it seems to work fine.

1) Scaling the image is no problem at all in Netscape 4. Just use the screen-object to determine the screen.width or screen.height
2) The problem is knowing WHERE the "client" clicked on the server side, because the coordinates are sent to the server as they are, i.e. you'll get different coordinates for the same point on the original image.
3) Using JavaScript-properties is a very convenient and elegant method of scaling the images. See below :-)

4) One possible solution for 2) is this one: (Ready for Cut&Test - tested on NN4.05))
<HTML>  
  <HEAD>
    <TITLE> </TITLE>
    <script language="JavaScript">
      sf=1; //if they don't know the screensize, just keep original size
    </script>
    <script language="JavaScript1.2">
       <!--
      sf=screen.width/800; // this is your ScalingFactor... calculate whichever way you want...
                           // maybe useful as well: window.innerWidth
   
       // -->
    </script>

  </HEAD>
<BODY>

<form>
  <input type=image src="rose.jpg" width=&{300*sf};>
  <input type=hidden name="sf" value=&{sf};>
</form>

</BODY>

</HTML>
This submits your scaling factor along with the coordinates. It should be quite easy to do x/=sf on server-side :-))

P.S.: You can just use the code "as-is" to see which paramters are submitted in the URL. Just add "action" later...

Let me know if you have any questions, this is not supposed to be a complete solution, but your question being as short as it is, I can only post a bset-but-working guess...

Waiting to hear from you soon...
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Holger101497Commented:
oh.. btw: When I re-read your question, I thought that you probably meant CLIENT-side image-maps?
That's of course way more complicated, but since you're offering 300 points and I thought that was an interesting question, I wrote a little nice script that'll do the job.

Try this page now:

<HTML>  
  <HEAD>
    <TITLE>Scaled image-maps</TITLE>
    <script language="JavaScript">
      sf=1; //if they don't know the screensize, just keep original size
    </script>

    <script language="JavaScript1.2">
       <!--
      sf=screen.width/800; // this is your ScalingFactor... calculate whichever way you want...
                           // maybe useful as well: window.innerWidth
   
      function createArea(Aurl,Ashape,Acoords,aTarget){
        this.url=Aurl;
        this.shape=Ashape;
        this.coords=Acoords;
        this.target=aTarget;
      }

      function defineMap(aname,amap){
        document.writeln('<MAP NAME="'+aname+'">');
        for (i=0;i<amap.length;i++) {
          document.write('  <AREA SHAPE='+amap[i].shape+' HREF="'+amap[i].url+'" '+(amap[i].target?('TARGET="'+amap[i].target+'" '):'')+' COORDS="');
          for (j=0;j<amap[i].coords.length;j++) document.write(Math.round(amap[i].coords[j]*sf)+(j==amap[i].coords.length-1?'':','));
          document.writeln('">');
        }
        document.writeln('</MAP>');
      }

map1=new Array();
  map1[0]=new createArea('Test1.html','rect',[50,50,100,100]);
  map1[1]=new createArea('Test2.html','rect',[120,120,200,200],'newframe');
 defineMap("MAP1",map1);

       // -->
    </script>

  </HEAD>
<BODY>

<form>
  <input type=image src="rose.jpg" width=&{100*sf};>
  <input type=hidden name="sf" value=&{sf};>
</form>

<IMG SRC="rose.jpg" usemap="#MAP1" WIDTH=&{100*sf};>
</BODY>
</HTML>

In Netscape 4.x, you can use "View source" to take a look at the generated code...
Nice, isn't it? You can specify a TARGET, but it works fine without.

Let me know if that's what you're looking for and if you have any questions :-))

Good luck!

P.S.: This should also work (but I haven't tried it)
defineMap("MAP1",[new createArea('Test1.html','rect',[50,50,100,100]),new createArea('Test2.html','rect',[120,120,200,200],'newframe')]); // for the fans of highly compact and hardly readable code :-)
0
kmartin7Author Commented:
Holger,
Very close.  I must say that this is still a very good script, and it is about as perfect as you could get given the information I originally gave. Bravo!

I guess the only thing that is lacking is that I need the script to read the actual browser window width and size the image and coordinates accordingly.  If the window is resized, the image will also resize.  If the script can perform this function, it doesn't matter what the screen resolution is set at.  (Upon re-reading my original question - I misused the word resolution.  I am sorry about this ;-).  I don't know what I was thinking).

I think that I can still use this script, though.  I will raise the points to 400 if you wish to try and conquer the re-phrased question.  If you do not wish to, then I will award you the 300.  It is your call.

Thanks again,
kmartin7

0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

kmartin7Author Commented:
Holger (again),
I retried it again, and all of the coordinates are shifted to the lower right quadrant.  I looked at the source, and the coordinates have changed, but they are still off.  What am I doing wrong?

In reference to what I asked about earlier, I realize now that by using the window.innerWidth, the image will appear in the window according to the window size.  When I resize and refresh, it will appear correctly (a percentage of the window.innerWidth).  I can live with this, but again, the coordinates are off.

Here is what I have added:

<HTML>
   
        <HEAD>
          <TITLE>Scaled image-maps</TITLE>
          <script language="JavaScript">
            sf=1; //if they don't know the screensize, just keep original size
          </script>

          <script language="JavaScript1.2">
             <!--
            sf=window.innerWidth/800; // this is your ScalingFactor... calculate whichever way you want...
                                 // maybe useful as well: window.innerWidth
           
            function createArea(Aurl,Ashape,Acoords,aTarget){
              this.url=Aurl;
              this.shape=Ashape;
              this.coords=Acoords;
              this.target=aTarget;
            }

            function defineMap(aname,amap){
              document.writeln('<MAP NAME="'+aname+'">');
              for (i=0;i<amap.length;i++) {
                document.write('<AREA SHAPE='+amap[i].shape+' HREF="'+amap[i].url+'" '+(amap[i].target?('TARGET="'+amap[i].target+'" '):'')+' COORDS="');
                for (j=0;j<amap[i].coords.length;j++)
             document.write(Math.round(amap[i].coords[j]*sf)+(j==amap[i].coords.length-1?'':','));
                document.writeln('">');
              }
              document.writeln('</MAP>');
            }

      map1=new Array();
      map1[0]=new createArea('Test1.html','rect',[546,141,565,162]);
      map1[1]=new createArea('Test2.html','rect',[658,160,676,182],'newframe');
      map1[2]=new createArea('Test3.html','rect',[567,100,676,182]);
      map1[3]=new createArea('Test4.html','rect',[275,380,294,398]);
      map1[4]=new createArea('Test5.html','rect',[596,271,617,290]);
      map1[5]=new createArea('Test6.html','rect',[447,362,467,382]);
      map1[6]=new createArea('Test7.html','rect',[420,388,439,407]);
      map1[7]=new createArea('Test8.html','rect',[334,419,353,441]);
      map1[8]=new createArea('Test9.html','rect',[222,382,243,399]);
      map1[9]=new createArea('Test10.html','rect',[283,325,303,344]);
      map1[10]=new createArea('Test11.html','rect',[167,233,185,253]);
      map1[11]=new createArea('Test12.html','rect',[267,170,290,190]);
      map1[12]=new createArea('Test13.html','rect',[393,213,414,233]);
      map1[13]=new createArea('Test14.html','rect',[389,259,408,278]);
      map1[14]=new createArea('Test15.html','rect',[373,166,396,185]);
      map1[15]=new createArea('Test16.html','rect',[445,146,464,169]);
      map1[16]=new createArea('Test17.html','rect',[412,81,434,103]);
      map1[17]=new createArea('Test18.html','rect',[523,34,543,531]);

      defineMap("MAP1",map1);

      //P.S.: This should also work (but I haven't tried it)
      //defineMap("MAP1",[new createArea('Test1.html','rect',[50,50,100,100]),new
      //createArea('Test2.html','rect',[120,120,200,200],'newframe')]); // for the fans of highly compact and hardly readable code
      //:-)
       // -->
          </script>

        </HEAD>
      <BODY BGCOLOR="white">

       

      <CENTER><IMG SRC="Gmca0061.gif" BORDER=0 usemap="#MAP1" WIDTH=&{700*sf};></CENTER>
 
          

</BODY>
      </HTML>

Thanks for any input.
0
Holger101497Commented:
Glad you liked my script :-)

My comments about your comments:
1) You did say screen resolution, but I kind of guessed that window.innerWidth would make more sense - that's why it's in my comments :-))
2) >I will raise the points to 400 if you wish to try and conquer the re-phrased question.  If you do not wish to, then I will award you the 300.  It is your call.
Hey! That's what I'm here for (conquering questions) *g*

Besides,
a) adding a 400 point question to my question history is quite nice
b) Sometimes somebody asks a question, I write a solution and like it a lot afterwards. The result is really cool and I might well use it on some of my pages as well...

3) So let's go!
Your problem is that Netscape has a somewhat strange behavior when the window is resized. For no obvious reason, it stops applets (a real pain!) and reloads the content - at least some of it! It appears that it does not "re-execute" the JavaScript-code used to define the maps and scale the images.
Hitting reload is not a very nice solution. So what can we do? Reload automatically!
The obvious choice would be <BODY onresize="history.go(0)">... well, once again the easy and obvious solution does not work, because onresize is called every time the page loads, putting you into an endless loop :-(
Of course I wouldn't be a good expert if I didn't find a workaround :-))

What you do is this:
add "armed=false;" directly below "sf=1;"  //This will keep the window from reloading right away.

Then you also add:
<BODY onresize="if (armed) history.go(0)" onload="setTimeout('armed=true',1000)"> //enable reload on resize 1 second after page has finished loading...

That's it! Works quite nicely for me - let me know if it works 4 U and if you need anything else!

Thanks for asking an interesting question *g*

Good luck with the answer! :o)

0
Holger101497Commented:
Oh btw: To keep the pages viewable in Netscape 3.x (scaling won't work, but you should still be able to view the page), you have to use JavaScript1.1 of course... after setting the sf=window.innerWidth/800, you need to close the <script> tag and reopen it in <script language="JavaScript1.1">
I haven't tested it because I don't know if you care, but I don't see a reason the page wouldn't work in Netscape 3 - without this minor change, you wouldn't get a map at all...

Looking forward to hearing from you...
0
kmartin7Author Commented:
Thanks, Holger!  Here are the well deserved points (and then some).
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.