dynamic image by passing the image name through the url - how? 1

[MYQUE]

I have a very limited knowledge in Javascript and so would be very grateful for any help you can give me on this.

I have two html pages. The first one has an image on it which has many image-map hotspots on it which when selected link to the second html page to display an image. Each hotspot should show a different image on the second html page. Now this is my problem; rather than creating a new html page for every seperate image I would like to create one page where the image can be changed dynamically using javascript which simply reads the passed value from the previous page. For example, if a link with the following contents in the href is clicked "image.htm?name=12.jpg", then the next html page "image.htm" would read the value "name=12.jpg" in the url and make the image on the page the one specified in the url. I have searched around for help on this and have found a bit of info but no clear answer, none that I undrstand anyway!!

I hope this makes sense, many thanks for any help in advance.

 

[megalene]

You could execute this an easier way, not as complex but much easier.

create a function like so:
<script>
<!--
function getImg(imgX,w,h){
window.open(imgX,'','toolbars=0,width='+w+'scrollbars=1,height='+h+'status=0')
}
//-->
</script>


then in your href links put this :

<a href=&quot;#&quot; onclick=&quot;getImg('images/image1.gif',200,300)&quot;></a>

This will popup a window with your image (path required if in different directory) with the window size of your image (200 wide, 300 tall) give or take some depends on your output.

This is quick and easy way of doing this there is a way of ready query strings in javascript but it gets much more in depth.

 

[BigBadDave]

In you image.htm page put this :

    <script language=&quot;JavaScript&quot; type=&quot;text/JavaScript&quot;>
    <!--
      QueryString.keys = new Array ();
      QueryString.values = new Array ();

      function qsParse () {
        var query = window.location.search.substring(1);
        var pairs = query.split(&quot;&&quot;);
        for (var i=0;i<pairs.length;i++) {
          var pos = pairs[i].indexOf('=');
          if (pos >= 0) {
            var argname = pairs[i].substring(0,pos);
            var value = pairs[i].substring(pos+1);
            QueryString.keys[QueryString.keys.length] = argname;
            QueryString.values[QueryString.values.length] = mReplace ('+',' ', unescape (value));
          }
        }
      }

      qsParse ();

      function QueryString (key) {
        var value = &quot;&quot;;
        for (var i=0;i<QueryString.keys.length;i++) {
          if (QueryString.keys[i]==key) {
            value = QueryString.values[i];
            break;
          }
        }
        return value;
      }
    //-->
    </script>

    <script language=&quot;JavaScript&quot; type=&quot;text/JavaScript&quot;>
    <!--
      document.write('<img src=&quot;/img/' + QueryString ('name') + '&quot;>');
    //-->
    </script>

[color]

Then call it like this :

image.htm?name=12.jpg Regards

Big Bad Dave

davidbyng@hotmail.com

 

[BigBadDave]

Sorry my mistake I left out a function :

    <script language=&quot;JavaScript&quot; type=&quot;text/JavaScript&quot;>
    <!--
      QueryString.keys = new Array ();
      QueryString.values = new Array ();

      function mReplace (search,replace,entry) {
        while (entry.indexOf(search)>-1) {
          pos = entry.indexOf(search);
          entry = &quot;&quot; + (entry.substring(0, pos) + replace +
          entry.substring((pos + search.length), entry.length));
        }
        return entry;
      }

      function qsParse () {
        var query = window.location.search.substring(1);
        var pairs = query.split(&quot;&&quot;);
        for (var i=0;i<pairs.length;i++) {
          var pos = pairs[i].indexOf('=');
          if (pos >= 0) {
            var argname = pairs[i].substring(0,pos);
            var value = pairs[i].substring(pos+1);
            QueryString.keys[QueryString.keys.length] = argname;
            QueryString.values[QueryString.values.length] = mReplace ('+',' ', unescape (value));
          }
        }
      }

      qsParse ();

      function QueryString (key) {
        var value = &quot;&quot;;
        for (var i=0;i<QueryString.keys.length;i++) {
          if (QueryString.keys[i]==key) {
            value = QueryString.values[i];
            break;
          }
        }
        return value;
      }
    //-->
    </script>

    <script language=&quot;JavaScript&quot; type=&quot;text/JavaScript&quot;>
    <!--
      document.write(QueryString ('name'));
    //-->
    </script>

Then call it like this :

image.htm?name=12.jpg Regards

Big Bad Dave

davidbyng@hotmail.com

 

[MYQUE]

Cheers 4 the help. Much appreciated

1 thing though Dave, I tried implementing your script and it worked but it just displayed the image name in the form of text, not the image itself. So I replaced the document.write in your second script with the one in the first script you posted as it has the image tag parameters in it. Now the script tries to display an image, but just shows a red x as if it cant find the image. I've checked all the links and names and they all match up ok so I'm not sure why this could be. Any ideas?

Mike.

 

[MYQUE]

Sorry - Ignore that last message... I just got it working. Just a stupid mistake on my part -was missing a &quot; in the document.write part of the script so it was trying to display an image with a name that wouldn't have made any sense anyway!!

Thanks again for all the help.

Mike.