How do i use an image as a selector?

Question

I have 2 images. If the person selects one and clicks "NEXT", it redirects to one page. If the person does the same to the other image, it's supposed to redirect to another page.

Here's the code I have:

function getval() {
  if (self.value == "1") {
    window.location.href = "universal-result.html";
  } else if (self.value == "2") {
    window.location.href = "disney-result.html"
  }
}

<body class="choosepark-body">
  <p class="text-choosepark">Você quer ingresso para qual complexo?</p>
  <input type="image" src="/Archives/Universal Botao.png" onmouseover="this.src='/Archives/Disney Universal Rosa.png'" onmouseout="this.src='Archives/Universal Botao.png'" class="universal-button" value="1">
  <input type="image" src="/Archives/Disney Botao.png" onmouseover="this.src='/Archives/Disney Botao Rosa.png'" onmouseout="this.src='/Archives/Disney Botao.png'" class="disney-button" value="2">
  <button onclick="getval()" class="next-button"> NEXT</button>

</body>

How do i make the image get "selected" when the person clicks on it, and when they click "NEXT", it redirects to the page related to that image? Also, if possible, when the person hovers onmouseover it changes the icon, but I also wanted to make the icon change when the image is clicked (selected).

Does this answer your question? [CSS hide all images with matching SRC attribute](https://stackoverflow.com/questions/6763899/css-hide-all-images-with-matching-src-attribute) — mybrave, Jun 24 '22 at 14:43
Same selector e.g. `img[src*="hideme"]` can be used with jquery for click event. Or the simplest is to define your own `css class` and use it. — mybrave, Jun 24 '22 at 14:45
What i'm really trying to do is to make the images work as "toggle". If the person selects one, and then clicks next, it redirects to one page. If the person selects the other and then clicks next, it redirects to another page. I don't really want to hide the image that wasnt selected — Fadrick, Jun 24 '22 at 14:55
Any reason you are using image-buttons when actually you want users to select an image? This should be done with a radio buttons, which then would also be a solution that works with assistive technologies for users with handicap (accessible). — Andy, Jun 24 '22 at 15:04
Not really. Its just that im new to coding, so im using what i know. So if i use radio buttons, can i still use my images as the, lets say, background images for the buttons? For a better UX, i prefer to have those images as the selectors. — Fadrick, Jun 24 '22 at 15:07

Jérôme Bucquet · Answer 1 · 2022-06-24T20:04:18.943

You can't do it directly by "image selected". Because, as far as I know, there is no event listener for that in the DOM.

I would try it like this:

HTML:

<input type="image" src="./image/opt-one.png" id="opt-one" />
<input type="image" src="./image/opt-two.png" id="opt-two" />
<button id="next-btn">NEXT</button>

JavaScript:

// get HTML elements by ids
const button = document.getElementById("next-btn");
const imgOne = document.getElementById("opt-one");
const imgTwo = document.getElementById("opt-two");

// setup variable to store choice and object with urls
let choice = "";
const option = {
    optOne: "http://option-one.com",
    optTwo: "http://option-two.com",
};

// select the images and set choice
imgOne.addEventListener("click", () => (choice = option.optOne));
imgTwo.addEventListener("click", () => (choice = option.optTwo));

// load next page on button click
button.addEventListener("click", () => (window.location.href = choice));

Like that, you could add more images and URLs easily to the app.

How do i use an image as a selector?

1 Answers1