Adobe Community: Spry XML and image map

mjleavitt01236541 Calculating status...

Currently Being Moderated

Spry XML and image map

Jun 28, 2012 7:03 AM

Tags: #dreamweaver #spry #xml

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>

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

</head>

<body>

</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

486 Views 4 Replies Latest reply: Ben Pleysier, Jun 28, 2012 7:12 PM

Replies

Currently Being Moderated

1. Ben Pleysier,

Jun 28, 2012 7:31 AM in reply to mjleavitt01236541

Report

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

Mark as:

Currently Being Moderated

2. mjleavitt01236541,

Jun 28, 2012 7:33 AM in reply to Ben Pleysier

Report

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

|
Mark as:
Currently Being Moderated

3. mjleavitt01236541,

Jun 28, 2012 1:35 PM in reply to Ben Pleysier

Report

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,4 97,201,498,202,498,201,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,2 07,514,207,518,207,521,207,522,207,524,207,525,207,526,207,527,207,528 ,207,529,207,530,207,531,207,532,207,533,207,535,207,537,207,538,207,5 39,207,540,207,541,207,542,207,543,207,545,207,547,207,548,207,549,207 ,550,206,552,206,554,206,555,206,556,206,558,206,559,206,560,206,562,2 06,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,1 92,563,192,562,191,562,190,562,189,562,188,562,187,562,186,562,186,561 ,187,561,186,561,185,561,184,561,183,561,182,561,182,560,181,560,180,5 60,179,559,178,558,177,557,176,557,176,556,175,556,174,556,174,555,173 ,555,172,555,171,556,169,556,168,556,168,557,167,557,166,557,165,557,1 64,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,157,566,156,567,155,5 67,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,1 49,555,150,555,150,554,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,5 36,151,534,151,532,152,531,152,530,152,529,152,528,152,527,152,526,152 ,525,152,523,152,522,152,521,152,520,152,519,153,519,153,518,153,517,1 53,516,153,515,153,514,153,513,153,512,153,510,153,508,153,507,154,506 ,154,505,154,504,154,503,154,502,155,502,156,502,159,502,160,502,161,5 02,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,1 90,132,192,132,194,131,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,1 31,213,131,214,131,216,131,217,131,218,131,219,131,220,131,221,131,223 ,131,224,131,225,131,226,131,227,131,228,131,229,130,229,129,229,126,2 29,125,229,124,229,123,229,122,229,119,229,118,229,117,229,116,229,114 ,229,113,229,112,229,111,229,110,229,109,229,108,229,107,229,106,229,1 05,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,68,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,192,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,192,99,192,100,192,101,192,102,192,102,19 1,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>

|
Mark as:

Currently Being Moderated

4. Ben Pleysier,

Jun 28, 2012 7:12 PM in reply to mjleavitt01236541

Report

<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

Mark as:

Dreamweaver CC

Spry XML and image map

Jun 28, 2012 7:03 AM

More Like This

Bookmarked By (0)

Answers + Points = Status