skip to Main Content

I am currently trying to make a poster I made "clickable" using HTML. My goal is to make this poster so that whenever you click on any part of it, it leads you to a website of my choosing. I do not want to use hyperlinks. I am new to HTML so I am having some difficulty with this and find that whenever I try to open the file.

When I run my code and open my file, Instead of being shown a page where I can see my poster and click on it, I am instead shown this:
Image
I am not sure why I get this instead of being shown the poster/image that I want. In my file, I used the <a href> and <img id =____ src = ____> operations. Does anybody have any idea why this is happening? Any advice on what I can do to fix this? I would really appreciate any help. Thank you!

2

Answers


  1. That image link you provided didn’t work. But keep it simple, in your HelloWorld.html file, that is referencing a local image.png file using the tag as you have mentioned.

    I’m assuming that your "poster" is essentially an image ultimately.

    IF you want to make parts of your image clickable then you need to research HTML Image Maps technology (aka. Hotspots…), https://www.w3schools.com/html/html_images_imagemap.asp

    But in all honestly – just don’t use this technology. It’s crappy. It doesn’t work in the modern world with devices with different screen sizes as the clickable bits don’t take into account the different screen sizes.

    Also worth noting, some image hosting websites block the use of embedded images on websites other than their own. So keep things simple and try to get this working with a locally stored image.

    Good luck.

    Login or Signup to reply.
  2. You can use ‘onclick’ attribute

    example:

    <div class="example" onclick="self.location = 'www.example.com'">
        <img src="example.png" alt="example"/>
    </div>
    

    ‘onclick’ attribute can use on all HTML elements

    content of ‘onclick’ attribute is a javascript code

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search