Loading ...
Sorry, an error occurred while loading the content.

Re: Is SVG image gallery like this possible?

Expand Messages
  • xyz1332003
    ... I am having some trouble understanding the parts (data= foo.svg .../ ) and (new_url);). I seem to be missing something about urls or is it uri and links.
    Message 1 of 4 , Sep 10, 2009
    • 0 Attachment
      --- In svg-developers@yahoogroups.com, "xyz1332003" <xyz1332003@...> wrote:
      >
      > > Sure, just update the data URL on the <object> tag. Something like:
      > >
      > > <object id="the_image" type="image/svg+xml" data="foo.svg" .../>
      > >
      > > Then attach click handlers to your list items that do:
      > >
      > > document.getElementById("the_image").setAttribute("data", new_url);
      > >
      > > Regards,
      > > Jeff
      > >
      >
      > Thanks.
      >
      > I am in the process of learning JavaScript right now. I have a vague idea of what your saying. I will try to put something together.
      >

      I am having some trouble understanding the parts (data="foo.svg" .../>) and (new_url);).

      I seem to be missing something about urls or is it uri and links. Here is what I have so far. Can anyone help please. Thank you.

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
      <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>Image Gallery</title>
      <script type="text/javascript" src="scripts/showPic_object.js"></script>
      </head>
      <body>
      <h1>Snapshots</h1>
      <ul>
      <li>
      <a src="bluepk" onclick="showPic(this); return false;">bluepk</a>
      </li>
      <li>
      <a src="orangepk" onclick="showPic(this); return false;">orangepk</a>
      </li>
      <li>
      <a src="whitepk" onclick="showPic(this); return false;">whitepk</a>
      </li>
      </ul>
      <object id= "redpk" type="image/svg+xml" width="400px" height="300px" data="redpk.svg" />
      </body>
      </html>


      function showPic(whichpic) {
      var source = whichpic.getAttribute("src");
      var redpk = document.getElementById("redpk");
      redpk.setAttribute("data",source);
      }
    Your message has been successfully submitted and would be delivered to recipients shortly.