Cannot get links on image to work

Hello - I am a beginner when it comes to coding. That said, I have an image that has 10 different categories that is 100% across screen and I would like them to each have their own links. I did a image map online but it’s not working. Can anyone help? The code is below

Hi, what do you mean by image map, can you post that code here (please make sure it is properly formatted)?
Can you also post a sketch of how you want the result to look like on a large screen and on a smartphone?

I just see a very small dot.

I don’t know why this isn’t working. I’m just copying and pasting the code

Do you see the code in your window?
You could try the following: Paste the code into a simple text editor and deformat it. Then paste the deformatted code here, mark it and press the </>.
What type is the code? html and css?
Additionally: this layout won’t work on a smartphone. How would you want to make it look there?

I’m more of a designer than a coder. I’ve attached the code I got from the internet. I’m not sure how the smartphone will work at all

Ok, these image maps aren’t responsive as far as I know. With the code snippet just as a screenshot, I can’t tell what’s wrong. Might be that the image source isn’t found. The image path has a space as I can see which is not a correct syntax. You would need to post the full code as described above.

I don’t know if that worked or not

That’s also just a screenshot, not the source code, so it is difficult to tell also without knowing what the exact problem is (what do you get vs what do you expect). I still assume that it is a problem with the image path.

I think what i may do is create each image on their own and try and butt them together across the screen as you made a good point about my current image not working on mobile which I didn’t think about

Yes, but you need to consider that then the clickable area will be a rectangle. You can still have that layout with the rhombus images, but when you click a link, the link target maybe that of another image.
You can avoid that by not making the image a link, but just the overlaying text. Or you use an SVG image – but that would be a lot more complicated.

Didn’t think of that either with just the text. I may try that or just make the images straight rectangles instead of the slant design

1 Like