从列表中单击项目时预览图像

Question

I'm creating a webpage in html that displays a list of cities on the left of the screen and when a user clicks on a city, an image is loaded on the right of the screen for users to see and when they click on another city that image is replaced with a new image matching the city clicked.

The aim is for users to see an image of each city they click on

I'm fairly new to this space and would appreciate the help.

Answer 1

you should add each of your images in a specific directory in your project, then add "id" attribute to img tag(" for example #image ")

onclick="showImage(this.id)"

add above line to each of your li tag and an specific id attribute (city name for exmaple).

then open a script tag above your and paste these line:

   function showImage(id) {
buildimg = `./images/${id}.jpg`;
document.querySelector('#image').setAttribute('src', buildimg);
}

here I named the images folder "images" in root directory.