Image display on click without changing page.
Solvedsebiou1 Posted messages 22 Status Member -
Hello,
I'm new to HTML and CSS and I need a bit of help.
Could you help me display different images on the same page by clicking on links?
Basically, I'm working on a small site that will remain local and not on the internet, and I would like to display a different image each time I click on a link. Each link should always display the same image and always in the same place on the page.
I would also like to stay on the same page, without opening another or going to a different page.
I want the menu (with the links) on the right (I have that) but I don't know how to make the image display on the right just after the click.
Thank you in advance for your help.
Best regards,
7 answers
-
Hello,
To use links pointing within the page, we use anchors. We give a name/label to a position in the HTML source, then on a link, we complete the URL with #label to point to the specified label.
See: https://www.alsacreations.com/astuce/lire/5-lien-precis-page-ancre-anchor-diese.html
-
Hello,
Thank you very much for your reply.
However, I didn't explain myself well.
I would like the links to display the image (which does not appear when arriving on the page).
Is that possible?
Thank you in advance,
Best regards,
-
I don't have to explain myself properly.
Basically, I've created links. And I would like that when I click on them, they display an image on the right side of the page.
It's a site that I want to keep locally and not online, so the images are in the images folder of my site.
The images (building plans) are not displayed until I click on the link.
When I arrive on the "plans" page, for example, I want to click on the ground floor (for example) and I would like the ground floor plan to appear on the right. The same goes for the other floors.
As you said, maybe it's not possible in HTML; unfortunately, I'm just starting out (I began 3 days ago) and I don't know JavaScript yet.
If my explanations above have helped you and you have a solution, I am all ears; otherwise, thank you very much for your help. I'll see if I can do it another way.
Best regards,
-
In HTML, there should be a page with all the images and an anchor in front of each to position the page on the correct image.
After that, it's no longer HTML, we can do:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript">
function changeImage(imgId, name) {
var img = document.getElementById(imgId);
img.src = name;
}
</script>
<title>Test</title>
</head>
<body>
<p>
<button id="button" onclick="changeImage('frame','image1.png')">image 1</button>
<button id="button" onclick="changeImage('frame','image2.png')">image 2</button>
<button id="button" onclick="changeImage('frame','image3.png')">image 3</button>
<img id="frame" src = "image0.png" alt="My image" />
</p>
</body>
</html>
-
-
Thank you very much, I'll test this first thing tomorrow (I left the files at work).
For lines 7 to 10, I suppose I need to put them in my CSS file?
Sincerely,
-
Hello,
Since everything is on the same page, you should use buttons instead of links.
You can of course use CSS to make your buttons look like a link.We can use some CSS tricks to show/hide an element, particularly with pseudo-classes (:focus, :hover, :checked, etc.) and the + selector, but you can quickly run into limitations. Take the time to learn how pseudo-classes work if you haven't already.
A basic example: https://jsfiddle.net/u8z2q4b9/The CSS + selector allows you to target the adjacent element, which means in the HTML part you need to have the images next to the buttons (<button></button> <img>) and not just anywhere in the document.
If you want to manage a show/hide state for each image and display multiple images at the same time, instead of using a pseudo-class like :focus, you can use a checkbox and the :checked pseudo-class.
Examples here: https://css-tricks.com/the-checkbox-hack/These tricks can be occasionally useful but restrictive on the HTML structure.
As jee pee pointed out, the best approach is to turn to JavaScript to add interactivity to your HTML page. -
I just tested it quickly and it's AMAZING!!!!
Exactly what I wanted!!!!
They're not links, but it's even better lol... I didn't know how to make the buttons :(
Thank you very much.
I just need to figure out how to place the images in the right spot and modify the formatting and positioning of the buttons (colors, font, and size), but I think with my file I should be able to tinker something together lol.
Thanks again.
Best regards,
-
Ah! I just saw your reply Pitet, thank you for the example and the explanations as well.
I'm going to look a bit more into classes and IDs xD, I'm just starting to understand basic HTML, I'm progressing slowly but surely lol.
However, my English isn't exceptional, so I go through tutorials on the internet in French when I'm lucky.
JavaScript is probably more useful, but for now I only know it by name. I just want to create a fairly simple site, accessible locally by me and my colleagues to improve our building management.
Like plans with the locations of fire extinguishers, SSI systems, gas and heating networks.
So, I have building plans and on each floor plan, I'm going to place red dots for the fire extinguishers and other symbols for the other networks. One plan per type (fire extinguishers, SSI, etc...)
I hope to succeed thanks to you.
Sorry, I didn't see your message right away.
Thank you both.
Best regards,
P.S.: Sorry for the spelling mistakes, I'm doing 40 things at the same time and I don’t proofread...
