Ask coding questions

← Back to all posts
Why is the picture to the other pic not showing?
h
VulcanWM (2759)

I used the code:

<a-assets>
        <img id="homeThumbnail" src="home.jpg">
      </a-assets>

      <a-entity link="href: idk.html; title: Another Page; image: #homeThumbnail" position="0 5 0"></a-entity>

and its output should be a home.jpg with Another Page at the top and a way to click the picture so it goes to idk.html
instead nothing shows
Why is this happening and how do I fix it?
Code link:
https://replit.com/@OvalEyes/OvalEyes#index.html
Output link:
https://ovaleyes.repl.co/

Answered by themining72 (49) [earned 5 cycles]
View Answer
Comments
hotnewtop
themining72 (49)

I'm unsure what you're trying to do here but based on your description, change your index.html to:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <a href="idk.html">
      <img id="homeThumbnail" src="home.jpg">
    </a>
  </body>
</html>
VulcanWM (2759)

thats not how it works in aframe @themining72

themining72 (49)

@VulcanWM Ah, I see what you want now, though I can't seem to exactly make it clickable.

VulcanWM (2759)

yeah i cant seem to see the picture even tho i used the exact code from the aframe documentation @themining72

themining72 (49)

@VulcanWM After almost 2 hours of messing around, change index.html to this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene cursor="rayOrigin: mouse">
      <a-assets>
        <img id="homeThumbnail" src="home.jpg">
      </a-assets>

      <a-image id="clickable" src="#homeThumbnail" position="0 2 0" rotation="-90 0 0"></a-image>
      <a-plane position="0 0 0" rotation="-90 0 0" width="100" height="100" color="#EFDD6F"></a-plane>
      <a-sky color="#87CEEB"></a-sky>
    </a-scene>
    <script>
      document.getElementById("clickable").addEventListener("click", function(e) {
        window.location.replace("https://ovaleyes.repl.co/idk.html");
      });
    </script>
  </body>
</html>
VulcanWM (2759)

@SixBeeps You recommended me to AFrame, maybe you can help?