XML Elves

Chris · #1 (**permalink**) 08-23-2005, 02:57 AM

Hi there,
I?m working on a website about campus and audtorium information using embedded SVG in HTML.
There is a drop-down menu (using JS and a HTML div tag) where I can chose the audtorium I want to find.
What do I have to manipulate in the SVG document to make the questioned element from the drop-down menu visible whereas the other elements remain invisible?
I know that I need an "if-else-clause", but which var do I have to use?
Thanks

#2 (**permalink**) 08-23-2005, 08:49 AM

Nice idea, but I suppose its not that easy...
this is an example for the embedded SVG file:

Code:

<?xml version="1.0" encoding="iso-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"
[
<!ATTLIST a
  xlink:href CDATA #IMPLIED>
<!ATTLIST g
  mvns:scaleEle CDATA #IMPLIED
  mvns:minscale CDATA #IMPLIED
  mvns:maxscale CDATA #IMPLIED
  mvns:styleprop CDATA #IMPLIED>
]>
<svg id="map" onzoom="onZoomInit();" width="500" height="470" viewBox="0 0 0.7583467 0.7133426" preserveAspectRatio="xMinYMin" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:mvns="http://www.mapviewsvg.com">
<title>View1 - Map</title>
<defs>
<menu id="MapViewMenu">
<header>Custom Menu</header>
<item action="ZoomIn">Einzoomen</item>
<item action="ZoomOut">Auszoomen</item>
<item action="OriginalView">Originalansicht</item>
<separator />
<item action="Quality">Bessere Qualit?t</item>
<separator />
<item action="Find">Suchen...</item>
<item action="FindAgain">Weitersuchen</item>
<separator />
<item action="Help">Hilfe</item>
</menu>
</defs>
<style type="text/css"><![CDATA[
.th0leg0MAP { fill:rgb(23,0,220);stroke-width:0.0001517;stroke:rgb(0,0,0) }
.th0leg1MAP { fill:rgb(0,255,0);stroke-width:0.0001517;stroke:rgb(0,0,0) }
.th0leg2MAP { fill:rgb(255,0,255);stroke-width:0.0001517;stroke:rgb(0,0,0) }
.th0leg3MAP { fill:rgb(20,164,172);stroke-width:0.0001517;stroke:rgb(0,0,0) }
.th0leg4MAP { fill:rgb(255,255,0);stroke-width:0.0001517;stroke:rgb(0,0,0) }
.th0leg5MAP { fill:rgb(0,0,0);stroke-width:0.0001517;stroke:rgb(0,0,0) }
.th0leg6MAP { fill:none }
.LTxt { font-family:Arial,Helvetica,sans-serif;baseline-shift:10%;pointer-events:none }
.LPTxt { font-family:Arial,Helvetica,sans-serif;baseline-shift:20%;pointer-events:none }
]]></style>
<script type="text/javascript">
<![CDATA[
var menuRoot = parseXML(printNode(document.getElementById("MapViewMenu")), contextMenu);
contextMenu.replaceChild(menuRoot.firstChild,contextMenu.firstChild);
var mapAktScale = document.documentElement.currentScale;
function onZoomInit() {
  onSVGZoom(mapAktScale);
  mapAktScale = document.documentElement.currentScale;
}
]]>
</script>
<rect x="-12800%" y="-12800%" width="25600%" height="25600%" style="fill:white" />
<g id="mapContent" mvns:minscale="1" mvns:maxscale="1000000000000">
<desc>Abc.shp</desc>
<g id="th0" display="inline" mvns:scaleEle="" mvns:minscale="1" mvns:maxscale="1000000000000" mvns:styleprop="fill">
<path id="th0rec0" class="th0leg0MAP" style="fill:rgb(23,0,220)" d="M0.3896437 0.5099020v-0.3850085h0.3594548v0.3850085 z" />
<path id="th0rec1" class="th0leg1MAP" style="fill:rgb(0,255,0)" d="M0.3007145 0.6514628v-0.3850085h0.3594548v0.3850085 z" />
<path id="th0rec2" class="th0leg2MAP" style="fill:rgb(255,0,255)" d="M0.0466310 0.7040944v-0.3850085h0.3594548v0.3850085 z" />
<path id="th0rec3" class="th0leg3MAP" style="fill:rgb(20,164,172)" d="M0.0092481 0.4572890v-0.3850085h0.3594549v0.3850085 z" />
<path id="th0rec4" class="th0leg4MAP" style="fill:rgb(255,255,0)" d="M0.2835241 0.3942566v-0.3850085h0.3594549v0.3850085 z" />
<path id="th0rec5" class="th0leg5MAP" style="fill:rgb(0,0,0)" d="M0.0773912 0.5492822v-0.3850085h0.3594549v0.3850085 z" />
</g>
</g>
<text id="ASVText" x="0.0106169" y="0.0303339" class="LTxt" display="none" style="fill:rgb(0,0,0);font-size:0.0212337">For correct functionality this site needs the Adobe SVG Viewer 3.0.</text>
</svg>

and this file is controlled by some external JS, XML and CSS files.
the code of the drop-down menu and its JS

Code:

<script language="JavaScript" type="text/javascript" charset="iso-8859-1">
<!--
function prezoomObj() {
  if (document.formzoomObj.listobj.selectedIndex > 0) selRec('field0=' + document.formzoomObj.listobj.options[document.formzoomObj.listobj.selectedIndex].text,'th0',true,false,false,20);
  else {
    clearColorArray();
    fullExtent();
  }
}
//-->
</script>
-----------------------------------------
<div id="zoomObject">
<form name="formzoomObj">
<select name="listobj" onChange="prezoomObj();" size="1" class="ZoomObjEle">
<option selected>zoom...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</form>
</div>

If you want to see the whole site at it, give me your email-adress and i?ll send you the zipped folder(42kb).
That one?s become pretty long!