4 Replies Latest reply: Jun 28, 2012 7:12 PM by Ben Pleysier RSS

    Spry XML and image map

    mjleavitt01236541

      Hi all-

       

      I'm new to using spry and xml, but not new to xhtml and layout, having said that. I'm trying to store file paths in my xml and parse that xml to repace <href> tags in an image map. For example (the actual cooridnates in the map are just made up for the example below, the actual map has 88 locations and very detailed coordinates, as it is a state map):

       

      <head>

      <script src="../SpryAssets/xpath.js" type="text/javascript"></script>

      <script src="../SpryAssets/SpryData.js" type="text/javascript"></script>

      var ds1 = new Spry.Data.XMLDataSet("../files/research/counties_census.xml", "ohio");

      </head>

       

      <body>

      <div spry:region="ds1">

      <img src="../images/CountyMap.gif" width="565" height="611" usemap="#Map">

              <map id="Map" name="Map">

                <area shape="rect" coords="103,156,155,202" href="../files/research/{Location}" />

                <area shape="rect" coords="216,156,286,210" href="../files/research/{OtherLocation}" />

              </map>

      </div>

      </body>

       

      Am I just making a syntax error or is this just outside the scope of what I can use spry for? Any help is appreciated.

       

       

      thanks in advance

        • 1. Re: Spry XML and image map
          Ben Pleysier MVP

          The XML should look like

           

          <?xml version="1.0" encoding="utf-8"?>
          <locations>
              <location>
                  <name>MyLocation1</name>
                  <coords>103,156,155,202</coords>
              </location>
              <location>
                  <name>MyLocation2</name>
                  <coords>216,156,286,210</coords>
              </location>
          </locations>
          

           

          The markup should look like

           

          <!doctype html>
          <html>
          <head>
            <meta charset="utf-8">
            <title>Untitled Document</title>
          </head>
          
          <body>
            <div spry:region="ds1">
              <img src="../images/CountyMap.gif" usemap="#Map">
              <map id="Map" name="Map">
                <area spry:repeat="ds1" shape="rect" coords="{coords}" href="../files/research/{name}">
              </map>
            </div>
          
            <script src="SpryAssets/xpath.js"></script>
            <script src="SpryAssets/SpryData.js"></script>
            <script>
              var ds1 = new Spry.Data.XMLDataSet("counties_census.xml", "locations/location");
            </script>
          </body>
          </html>
          

           

          Gramps

          • 2. Re: Spry XML and image map
            mjleavitt01236541 Community Member

            Thanks a lot, going to try it now. I knew it had to be s syntax error on my part.

            • 3. Re: Spry XML and image map
              mjleavitt01236541 Community Member

              I have one more question. What you gave me worked like a charm btw. Thanks a lot. Onto the question:

              I'd like to use the same XML to also power a drop down menu, here's a snippet of the XML/XHTML below. I can't seem to get it to work on the drop down, the image map works great.

               

              XML snippet:

              <locations>

                <location>

                   <filepath>P1008.pdf</filepath>

                   <coords>192,496,193,497,194,497,195,497,196,497,197,497,199,497,201,497,201,498,202,498,2 01,498,201,499,202,499,203,500,204,500,204,501,205,502,206,502,206,503,207,503,207,504,207 ,506,207,510,207,511,207,512,207,514,207,518,207,521,207,522,207,524,207,525,207,526,207,5 27,207,528,207,529,207,530,207,531,207,532,207,533,207,535,207,537,207,538,207,539,207,540 ,207,541,207,542,207,543,207,545,207,547,207,548,207,549,207,550,206,552,206,554,206,555,2 06,556,206,558,206,559,206,560,206,562,206,563,206,564,206,565,206,566,206,567,206,568,206 ,569,206,570,206,571,205,571,205,572,204,572,204,573,203,573,203,574,203,573,202,573,201,5 73,201,572,200,572,200,571,200,570,199,570,199,569,199,568,199,567,198,566,197,566,197,565 ,196,565,196,564,195,564,194,564,194,563,193,563,192,563,192,562,191,562,190,562,189,562,1 88,562,187,562,186,562,186,561,187,561,186,561,185,561,184,561,183,561,182,561,182,560,181 ,560,180,560,179,559,178,558,177,557,176,557,176,556,175,556,174,556,174,555,173,555,172,5 55,171,556,169,556,168,556,168,557,167,557,166,557,165,557,164,557,164,558,163,558,162,558 ,161,558,160,559,159,559,159,560,158,560,158,561,158,562,158,563,157,563,157,564,157,565,1 57,566,156,567,155,567,155,568,154,568,153,568,153,567,152,567,151,567,150,566,149,566,149 ,565,149,564,149,563,149,562,149,561,149,560,149,559,149,558,149,557,149,555,150,555,150,5 54,150,553,150,552,150,551,150,549,150,548,150,547,150,546,150,545,150,544,151,543,151,541 ,151,540,151,538,151,537,151,536,151,534,151,532,152,531,152,530,152,529,152,528,152,527,1 52,526,152,525,152,523,152,522,152,521,152,520,152,519,153,519,153,518,153,517,153,516,153 ,515,153,514,153,513,153,512,153,510,153,508,153,507,154,506,154,505,154,504,154,503,154,5 02,155,502,156,502,159,502,160,502,161,502,162,502,163,502,164,502,165,502,165,501,166,501 ,167,501,168,501,169,501,170,501,170,500,171,500,172,500,173,500,174,500,175,500,175,499,1 76,499,177,499,178,499,179,499,180,499,180,498,182,498,184,498,188,497,189,497,190,497,191 ,497</coords>

                   <county>Adams County</county>

                </location>

                <location>

                   <filepath>P1009.pdf</filepath>

                   <coords>132,183,132,184,132,185,132,186,132,187,132,188,132,189,132,190,132,192,132,194,1 31,195,131,196,131,197,131,199,131,201,131,202,131,203,131,204,131,206,131,207,131,208,131 ,209,131,210,131,211,131,212,131,213,131,214,131,216,131,217,131,218,131,219,131,220,131,2 21,131,223,131,224,131,225,131,226,131,227,131,228,131,229,130,229,129,229,126,229,125,229 ,124,229,123,229,122,229,119,229,118,229,117,229,116,229,114,229,113,229,112,229,111,229,1 10,229,109,229,108,229,107,229,106,229,105,229,104,229,102,229,102,227,102,226,100,226,99, 226,98,226,97,226,96,226,95,226,92,226,90,226,89,226,87,226,87,225,87,224,87,222,87,221,85 ,221,84,221,83,221,82,221,81,221,80,221,78,221,77,221,76,221,75,221,72,221,71,221,69,221,6 8,221,65,221,65,220,65,219,65,218,65,217,65,216,65,215,65,214,65,212,65,211,65,210,65,209, 65,207,65,206,65,205,65,204,65,203,65,201,65,200,65,199,66,199,67,199,68,199,70,199,71,199 ,72,199,73,199,73,197,73,196,73,195,73,194,73,193,73,192,74,192,75,192,76,192,77,192,79,19 2,80,192,81,192,82,192,83,192,84,192,85,192,86,192,87,192,88,192,90,192,91,192,92,192,95,1 92,99,192,100,192,101,192,102,192,102,191,102,190,102,188,102,187,102,186,102,185,105,185, 106,185,107,185,108,185,109,185,110,185,111,185,113,185,114,185,115,185,116,185,117,185,11 7,184,117,183,117,182,118,182,119,182,120,182,121,182,122,182,123,182,124,182,125,182,126, 182,127,182,128,182,129,183</coords>

                   <county>Allen  County</county>

                </location>

              </locations>

               

              Here's my XHTML:

              <div spry:region="ds1">

                   <p>Click on a county, or select from the following:

                        <select onchange="jumpMenu(this)" name="menu1">

                        <option spry:repeat="ds1" value="../files/research/{filepath}">{county}</option>

                        </select>

                   </p>

                      </div>

              <div spry:region="ds1"> <img src="../images/OhioCountyMap.gif" usemap="#Map">

                   <map id="Map" name="Map">

                   <area spry:repeat="ds1" shape="poly" coords="{coords}" href="../files/research/{filepath}">

                   </map>

              </div>

              • 4. Re: Spry XML and image map
                Ben Pleysier MVP
                <label for="menu1">Click on a county, or select from the following:</label>
                <select spry:region="ds1" name="menu1">
                  <option spry:repeat="ds1" spry:setrow="ds1" value="{county}">{county}</option>
                </select>
                
                <img src="../images/OhioCountyMap.gif" alt="" usemap="#Map">    
                <map spry:detailregion="ds1" name="Map">
                  <area shape="poly" coords="{coords}" href="../files/research/{filepath}">
                </map>  
                

                 

                Gramps