Solved

Image map for different resolutions

Posted on 1998-05-19
7
518 Views
Last Modified: 2012-06-21
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.
0
Comment
Question by:kmartin7
  • 4
  • 3
7 Comments
 
LVL 6

Accepted Solution

by:
Holger101497 earned 420 total points
ID: 1278470
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
 
LVL 6

Expert Comment

by:Holger101497
ID: 1278471
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
 
LVL 11

Author Comment

by:kmartin7
ID: 1278472
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 11

Author Comment

by:kmartin7
ID: 1278473
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
 
LVL 6

Expert Comment

by:Holger101497
ID: 1278474
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
 
LVL 6

Expert Comment

by:Holger101497
ID: 1278475
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
 
LVL 11

Author Comment

by:kmartin7
ID: 1278476
Thanks, Holger!  Here are the well deserved points (and then some).
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now