[jQuery] Getting JQuery to work with svg file
I have a svg file that is a map viewer for my website. its a php file
that returns a SVG snap shot of the world map
I've gotten zoom in and out and pan working from the control panel but
I want to embed the SVG into a page and have it load the new map as an
AJAX load. my problem is that it can't find the jquery.js file so $
is not initialised
Any Ideas
Alpha code below
<code>
<?xml version="1.0" standalone="no"?><svg width="600px" height="480px"
version="1.1" xmlns="http://www.w3.org/2000/svg" >
<defs>
<script type="text/javascript" src="jquery.js"></
script>
<script type="text/javascript">
var mode ='zoom';
var mytrace= new Array();
var x = 1135274;
var y = 946538;
var mag = 431.65471197426086;
var halfheight = 240;
var halfwidth = 300;
var traceOn = false;
var multiplier =0.75;
function TestMouse(e){
if (window.event && window.event.srcElement) {
evEl = window.event.srcElement;
} else {
evEl = e.target;
}
if(mode=="pan"){
mode="zoom";
}
if (mode == 'zoom' || mode=="unzoom"){
$(evEl).load('svg.php?x='+parseInt(x+((e.clientX-halfwidth)/(1/
mag))) +"&y="+ parseInt(y+((e.clientY-halfheight)/(1/mag)))
+"&mode="+mode+"&m="+(mag*((mode == 'zoom')?0.75:1.25)));
}
}
function setzoom(evt){
location.href='svg.php?x='+(x)+"&y="+(y)
+"&mode=zoom&m="+(mag*0.75);
}
function setunzoom(evt){
location.href='svg.php?x='+(x)+"&y="+(y)
+"&mode=unzoom&m="+(mag*1.25);
}
function setMoveUp(evt){CallMove("Up", evt);}
function setMoveDown(evt){CallMove("Down", evt);}
function setMoveLeft(evt){CallMove("Left", evt);}
function setMoveRight(evt){CallMove("Right", evt);}
function CallMove(direction, e){
if (window.event && window.event.srcElement) {
evEl = window.event.srcElement;
} else {
evEl = e.target;
}
mode="pan"
if(direction=="Up"){
y-=(50*mag);
}
if(direction=="Down"){
y+=(50*mag);
}
if(direction=="Left"){
x-=(50*mag);
}
if(direction=="Right"){
x+=(50*mag);
}
location.href='svg.php?x='+x+"&y="+y+"&mode="+mode
+"&m="+mag;
}
</script>
</defs>
<g id='map' onclick='TestMouse(evt)' onmousemove='trace(evt)' >
<polygon points="0,0 600,0 600,480 0,480"
style="fill:#ccffff;stroke:red;stroke-width:1"/>
<!-- map polygon goes here -->
</g>
<g onclick='setzoom(evt)'>
<polygon points="20,100, 40,100 40,120, 20,120"
style="fill:white;stroke:#000;stroke-width:1"/>
<line x1="30" y1="105" x2="30" y2="116" stroke="#000" stroke-width="1"/