title: A-frame: How to add clickable entity element?
body: <p>This is what I am trying to achieve: </p>
  
  <ol>
  <li>Load an image with marker (position on image) </li>
  <li>Make the marker clickable </li>
  <li>Upon clicking marker, change the image.</li>
  </ol>
  
  <p>It is like a virtual tour where people can click on marker to enter the place.</p>
  
  <p>Here is what I did so far:</p>
  
  <pre><code>&lt;script src="https://aframe.io/releases/0.7.0/aframe.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          AFRAME.registerComponent('marker', {
              schema: {default: ''},
              init() {
                  const sky = document.querySelector('a-sky');
  
                  this.el.addEventListener('click', () =&gt; {
                      //sky.setAttribute('src', this.data);
                      console.log('clicked');
                  });
              }
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;a-scene&gt;
          &lt;a-sky src="#entrance" rotation="0 -90 0" position="0 0 0" id="src-img-tpl"&gt;&lt;/a-sky&gt;
          &lt;a-sphere href="http://google.com" id="marker" position="-10 3 -15" radius="0.65" color="#EF2D5E"&gt;&lt;/a-sphere&gt;
          &lt;a-assets&gt;
              &lt;!-- &lt;audio id="river" src="assets/Bg-music.wav" autoplay="true" loop="true"&gt;&lt;/audio&gt; --&gt;
              &lt;img id="entrance" src="images/001.jpg"&gt;
              &lt;img id="study" src="images/002.jpg"&gt;
              &lt;img id="parking" src="images/003.jpg"&gt;
          &lt;/a-assets&gt;
  
      &lt;/a-scene&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>But it is not working for me. Any help will be appreciated.</p>
  
  <p>Thanks.</p>