Jump to content

simple image selection

envoy

By envoy
in JavaScript

 Share

Recommended Posts

envoy Newbie

envoy

Posted
Posted (edited)

Hello,

I would like to implement a simple image selection. If I use the function once, the function works. If I use the function in 2 places, it does not work. I have adjusted the id for the two places, but it still does not work.

Many thanks and best regards

 

Edited by Ingolme
Removed potential dangerous attachment
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

Unfortunately, my browser has been marking this as a dangerous file. Perhaps you should post the code here in a code block instead.

Link to comment
Share on other sites
envoy Newbie

envoy

Posted
  • Author
Posted (edited) 
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="utf-8"> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <meta name="description" content=""> 
        <meta name="author" content=""> 
        <title>New page</title>         
        <link href="css/style.css" rel="stylesheet"> 
    </head>     
    <body> 
        <img id="bannerImage_left" src="01.jpg">
        <img src="01_thumb.jpg" onclick="changeImage('01.jpg')" style="cursor:pointer; margin-left:40px; margin-right:40px">
        <img src="02_thumb.jpg" onclick="changeImage('02.jpg')" style="cursor:pointer; margin-right:40px">
        <img src="03_thumb.jpg" onclick="changeImage('03.jpg')" style="cursor:pointer; margin-right:40px">
        <img id="bannerImage_right" src="01.jpg" "">
        <img src="01_thumb.jpg" onclick="changeImage('01.jpg')" style="cursor:pointer; margin-left:40px; margin-right:40px">
        <img src="02_thumb.jpg" onclick="changeImage('02.jpg')" style="cursor:pointer; margin-right:40px">
        <img src="03_thumb.jpg" onclick="changeImage('03.jpg')" style="cursor:pointer; margin-right:40px">
        <script> 
                 function changeImage(fileName) {let img = document.querySelector("#bannerImage_left");img.setAttribute("src", fileName);}   
                 function changeImage(fileName) {let img = document.querySelector("#bannerImage_right");img.setAttribute("src", fileName);}         
        </script>
    </body>

 

Edited by envoy
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

You gave the same name to two functions, the browser can't know which one you wanted to use.

You could give the second function a different name, but the better option is to pass a parameter indicating which target you want. 

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="utf-8"> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <meta name="description" content=""> 
        <meta name="author" content=""> 
        <title>New page</title>         
        <link href="css/style.css" rel="stylesheet"> 
    </head>     
    <body> 
        <img id="bannerImage_left" src="01.jpg">
        <img src="01_thumb.jpg" onclick="changeImage('01.jpg', '#bannerImage_left')" style="cursor:pointer; margin-left:40px; margin-right:40px">
        <img src="02_thumb.jpg" onclick="changeImage('02.jpg', '#bannerImage_left')" style="cursor:pointer; margin-right:40px">
        <img src="03_thumb.jpg" onclick="changeImage('03.jpg', '#bannerImage_left')" style="cursor:pointer; margin-right:40px">
        <img id="bannerImage_right" src="01.jpg" "">
        <img src="01_thumb.jpg" onclick="changeImage('01.jpg', '#bannerImage_right')" style="cursor:pointer; margin-left:40px; margin-right:40px">
        <img src="02_thumb.jpg" onclick="changeImage('02.jpg', '#bannerImage_right')" style="cursor:pointer; margin-right:40px">
        <img src="03_thumb.jpg" onclick="changeImage('03.jpg', '#bannerImage_right')" style="cursor:pointer; margin-right:40px">
        <script> 
                 function changeImage(fileName, element) {let img = document.querySelector(element);img.setAttribute("src", fileName);}   
        </script>
    </body>

 

Link to comment
Share on other sites
envoy Newbie

envoy

Posted
  • Author
Posted

Thanks for the quick feedback and solution. I'll have to take a closer look at the function parameter topic to understand it better.

i would like to add a default function so that when i click on another menu item and then go back to the image selection, the image selection jumps back to the first image. what is the best place to start?

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

I think you should take some time to read through the Javascript tutorial and do a lot of practice to get more familiar with it.

You will need event listeners for the events which occur when the user goes back to the image selection. I don't know exactly which events those are and on which elements because I don't know how your whole page is set up.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

You just need to use 'this' which is the element that the onclick event occurred  as in changeImage(this, 'bannerImage_left');

then within function function changeImage(elem, bannerId)

get the src: from 1st parameter elem

elem.src and remove '_thumb' with elem.src.replace('_thumb','');

then add converted src to 2nd parameter bannerid ref src using document.getElementById(bannerId).src

Link to comment
Share on other sites
envoy Newbie

envoy

Posted
  • Author
Posted

image_selection_02.html

Is it solved incorrectly if I put a 2 function (the 1st image of the image selection is selected) on the selection of the 1st tab/bannerImage_left, see html file attached?

<button class="tablinks" onclick="openCity(event, 'left'); changeImage('01.jpg', '#bannerImage_left')">left</button>

Link to comment
Share on other sites
envoy Newbie

envoy

Posted
  • Author
Posted

How can I reset the two image selections, or all of them if there are more, to the 1st image with one action?

<button class="tablinks" onclick="changeImage('01.jpg', '#bannerImage_(all???)')">reset</button>

 

</head>
    <body>
        <div class="tab">
            <button class="tablinks" onclick="openCity(event, 'left')">left</button>
            <button class="tablinks" onclick="openCity(event, 'right')">right</button>
            
        </div>
        <div id="left" class="tabcontent">
            <img id="bannerImage_left" src="01.jpg">
            <img src="01_thumb.jpg" onclick="changeImage('01.jpg', '#bannerImage_left')" style="cursor:pointer; margin-left:40px; margin-right:40px">
            <img src="02_thumb.jpg" onclick="changeImage('02.jpg', '#bannerImage_left')" style="cursor:pointer; margin-right:40px">
            <img src="03_thumb.jpg" onclick="changeImage('03.jpg', '#bannerImage_left')" style="cursor:pointer; margin-right:40px">
        </div>
        <div id="right" class="tabcontent">
            <img id="bannerImage_right" src="01.jpg" "">
            <img src="01_thumb.jpg" onclick="changeImage('01.jpg', '#bannerImage_right')" style="cursor:pointer; margin-left:40px; margin-right:40px">
            <img src="02_thumb.jpg" onclick="changeImage('02.jpg', '#bannerImage_right')" style="cursor:pointer; margin-right:40px">
            <img src="03_thumb.jpg" onclick="changeImage('03.jpg', '#bannerImage_right')" style="cursor:pointer; margin-right:40px">
        </div>

        <div>
        <button class="tablinks" onclick="changeImage('01.jpg', '#bannerImage_(all???)')">reset</button>
        </div>
        <script>


 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...