I received this error while trying to debug my web page in Opera. Error: name: ReferenceError message: Statement on line 1: Undefined variable: showPic stacktrace: n/a; see opera:config#UserPrefs|Exceptions Have Stacktrace Here is the JavaScript function located in its own .js file. function showPic(whichpic) { var source = whichpic.getAttribute("href"); var map01 = document.getElementById("map01"); map01.setAttribute("src",source); } I am some what new to programming and JavaScript. I would like to know if all functions have to be defined in the file my JavaScript is located? Is the above function not fully defined? Is the above function showPic(whichpic) a built in function? Can some body shed some light on how this works. thanks so much.
whichPic references an href= image file.svg I have an html page with an image on it. Depending on which part of the image I click on a different image will be swapped in its place. But actually, I am only using that html page and .js file as an example. What I am really trying to do is the same thing but using svg images. I have created an svg page below with .js file. It is a rectangular image with three rectangular buttons on it. I included a .zip with all four svg files and the .js file. If the images are dragged into a browser like Firefox, Opera, or Safari they will be displayed. I am trying to figure out how to make this work. If you can offer any advice I would be very thankful. <svg id="svg2" version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <script type="text/javascript" src="scripts/showPic_panel03.js"></script> <g id="map01" src="panelpk03.svg"> <g id="background"> <rect fill="#578b99" fill-rule="nonzero" width="400" height="300" x="0" y="0" id="blue" style="enable-background:accumulate;marker-end:none;marker-start:none;marker-mid:none;" /> </g> <g id="buttons"> <rect fill="#b14e4e" fill-rule="nonzero" width="100" height="30" x="20" y="20" id="red" style="enable-background:accumulate;marker-end:none;marker-start:none;marker-mid:none;" onclick="showPic(this.id); return false;" href="panelrpk03.svg" /> <rect fill="#c4c95d" fill-rule="nonzero" width="100" height="30" x="150" y="20" id="yellow" style= "enable-background:accumulate;marker-end:none;marker-start:none;marker-mid:none;" onclick="showPic(this.id); return false;" href="panelypk03.svg" /> <rect fill="#964bcf" fill-rule="nonzero" width="100" height="30" x="280" y="20" id="blue" style="enable-background:accumulate;marker-end:none;marker-start:none;marker-mid:none;" onclick="showPic(this.id); return false;" href="panelbpk03.svg" /> </g> </g> </svg> function showPic(whichpic) { var source = whichpic.getAttribute("href"); var map01 = document.getElementById("map01"); map01.setAttribute("src",source); }
look, first of all, you need to make sure that scripts/showPic_panel03.js -> actually loads and has defined the function showPic. i am not sure on the event bubbling in SVG, or even on the order in which the browser will interpret the SVG element and anything it may contain. perhaps script execution is deferred before doing so, read up on SVG events... can you not pre-load the script before the element (say, head of page)? you may also be able to to bind the click events through your window.onload / domready function instead of the onclick="". for example, something like: window.onload = function() { // will only run once the script has loaded and the SVG is ready-ish. document.getElementById("blue").onclick = function() { showPic(this); }; }; PHP: good luck
Thanks. What you are suggesting is just a little beyond what I can understand at the moment. I remember reading a little about event bubbling for svg. I will do some more reading. I will try moving the script to the head of the page to see what happens.
Hi again, onclick="showPic(this.id); is the problem. You're giving the argument as an id of element, but later you call whichpic.getAttribute("href"); which I believe makes the problem on IE or Opera. Changing the code into - onclick="showPic(this); should help
Thanks for your efforts. I changed it from (this.id) to (this) and then tested it. It had no effect. Were you able to get this code working?
Yes, it works for me. But I looked later on your code and the way you include javascript into SVG is the key. You may find useful this article. There you can find the syntax for JS inside SVG. To include external file you need to add xmlns:xlink="http://www.w3.org/1999/xlink" namespace in your svg tag and use <script xlink:href="scripts/showPic_panel03.js" language="JavaScript"></script> Code (markup): Hope it helps
Thanks for the help lp1051. I will spend some time today experimenting with your suggestion and try to post my results later today. on another note, what is SVG? and why would you use this? i have never heard of it. Scalable Vector Graphics I am new at SVG so don't take these statements as a totally accurate prediction of the future. I think SVG is the HTML of tomorrow. I think it may just about replace Flash when it is fully implemented maybe in 5 or 10 years. Svg is a work in progress SVG is as simple as HTML HTML is good for words and bitmap images. SVG is good for words, bitmap images, vector images, animation and programmable interactivity. Web browsers are slowly implementing the SVG spec. Opera to my knowledge is the most SVG capable followed by Firefox and Safari and another browser (I can't remember the name of). IE is the only hold out. I think this is due to Microsoft's inferiority complex. http://en.wikipedia.org/wiki/Svg http://www.amazon.com/s/ref=nb_ss_0...ks&field-keywords=svg+programming&sprefix=svg http://tech.groups.yahoo.com/group/svg-developers/messages?o=1
check raphael out, its stunning. http://raphaeljs.com/ also, now microsoft and ibm are both getting involved and starting to support svg alongside of google, there's a good future in this imo. if only i could spare the time to learn it but got so many important forums to read first