Encircling the most recently selected image with a border

Question

Encircling the most recently selected image with a border

I have successfully made some <img> elements act like <input type="radio"> buttons and now I want to visually indicate the user's selection by adding a border around the chosen image.

My challenge is that there are multiple rows of images, and I need the user to be able to click on an image in one row, have it stay highlighted, then click on an image in another row without losing the highlight on the previous selection.

.product-info .option img:active
{
    border:1px solid #d9d1d5;
}

Here is an example code snippet:

.images img:active {
    border:3px solid #000;
}

<div class="images">
    <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
</div>

javascript jquery html css

Answer 1

Answer №1

My approach involves avoiding the use of JavaScript and instead mimicking radio-button functionality using HTML and CSS. The concept is to create a radio-button-like behavior with images by utilizing radio buttons and labels...

HTML

<div class="images">
    <input type="radio" name="test" value="1" id="test1">
    <label for="test1">
        <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    </label>
    <input type="radio" name="test" value="2" id="test2">
    <label for="test2">
        <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    </label>
    <input type="radio" name="test" value="3" id="test3">
    <label for="test3">
        <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    </label>
    <input type="radio" name="test" value="4" id="test4">
    <label for="test4">
        <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    </label>
</div>

CSS

input[type="radio"] {display:none;}
input[type="radio"]:checked+label img {border:3px solid #000;}

Check out the fiddle

Explanation

By utilizing the default behavior of labels to interact with radio buttons, I use CSS selectors to style the adjacent label when its associated radio button is checked. This approach also allows for easy form submission of radio button values...

Answer 2

My approach involves avoiding the use of JavaScript and instead mimicking radio-button functionality using HTML and CSS. The concept is to create a radio-button-like behavior with images by utilizing radio buttons and labels...

HTML

<div class="images">
    <input type="radio" name="test" value="1" id="test1">
    <label for="test1">
        <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    </label>
    <input type="radio" name="test" value="2" id="test2">
    <label for="test2">
        <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    </label>
    <input type="radio" name="test" value="3" id="test3">
    <label for="test3">
        <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    </label>
    <input type="radio" name="test" value="4" id="test4">
    <label for="test4">
        <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    </label>
</div>

CSS

input[type="radio"] {display:none;}
input[type="radio"]:checked+label img {border:3px solid #000;}

Check out the fiddle

Explanation

By utilizing the default behavior of labels to interact with radio buttons, I use CSS selectors to style the adjacent label when its associated radio button is checked. This approach also allows for easy form submission of radio button values...

Answer 3

Answer №2

Essentially

To implement this functionality, simply listen for the click event on qualifying elements, remove the 'selected' class from all elements, and add it to the clicked one.

$('.radioImg').on('click', function() {
  $('.radioImg').removeClass('selected')
  $(this).addClass('selected');
});

.radioImg.selected {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<img class='radioImg' src='https://www.gravatar.com/avatar/f62f93c13e2aad52fa08a693ce13da48?s=32&d=identicon&r=PG&f=1' />
<img class='radioImg' src='https://www.gravatar.com/avatar/f62f93c13e2aad52fa08a693ce13da48?s=32&d=identicon&r=PG&f=1' />
<img class='radioImg' src='https://www.gravatar.com/avatar/f62f93c13e2aad52fa08a693ce13da48?s=32&d=identicon&r=PG&f=1' />

However, for a more scalable approach

If you have multiple sets of similar elements, you can group them within a parent container, refine the selector to target these groups, and utilize the 'siblings' method to toggle the 'selected' class among adjacent items. This allows for a more adaptable and reusable solution.

$('div .radioImg').on('click', function() {
  $(this).addClass('selected').siblings().removeClass('selected');
});

.radioImg.selected {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <img class='radioImg' src='https://www.gravatar.com/avatar/f62f93c13e2aad52fa08a693ce13da48?s=32&d=identicon&r=PG&f=1' />
  <img class='radioImg' src='https://www.gravatar.com/avatar/f62f93c13e2aad52fa08a693ce13da48?s=32&d=identicon&r=PG&f=1' />
  <img class='radioImg' src='https://www.gravatar.com/avatar/f62f93c13e2aad52fa08a693ce13da48?s=32&d=identicon&r=PG&f=1' />
</div>

Answer 4

Essentially

To implement this functionality, simply listen for the click event on qualifying elements, remove the 'selected' class from all elements, and add it to the clicked one.

$('.radioImg').on('click', function() {
  $('.radioImg').removeClass('selected')
  $(this).addClass('selected');
});

.radioImg.selected {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<img class='radioImg' src='https://www.gravatar.com/avatar/f62f93c13e2aad52fa08a693ce13da48?s=32&d=identicon&r=PG&f=1' />
<img class='radioImg' src='https://www.gravatar.com/avatar/f62f93c13e2aad52fa08a693ce13da48?s=32&d=identicon&r=PG&f=1' />
<img class='radioImg' src='https://www.gravatar.com/avatar/f62f93c13e2aad52fa08a693ce13da48?s=32&d=identicon&r=PG&f=1' />

However, for a more scalable approach

If you have multiple sets of similar elements, you can group them within a parent container, refine the selector to target these groups, and utilize the 'siblings' method to toggle the 'selected' class among adjacent items. This allows for a more adaptable and reusable solution.

$('div .radioImg').on('click', function() {
  $(this).addClass('selected').siblings().removeClass('selected');
});

.radioImg.selected {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <img class='radioImg' src='https://www.gravatar.com/avatar/f62f93c13e2aad52fa08a693ce13da48?s=32&d=identicon&r=PG&f=1' />
  <img class='radioImg' src='https://www.gravatar.com/avatar/f62f93c13e2aad52fa08a693ce13da48?s=32&d=identicon&r=PG&f=1' />
  <img class='radioImg' src='https://www.gravatar.com/avatar/f62f93c13e2aad52fa08a693ce13da48?s=32&d=identicon&r=PG&f=1' />
</div>

Answer 5

Answer №3

One way to utilize jquery is by checking for images with a specific class. Here's an example:

$("img").on("click", function() {
  //remove the imgClicked class from all images
  $("img").removeClass("imgClicked");
  //add the class to the clicked image element
  $(this).addClass("imgClicked");
});

.imgClicked {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=20%C3%9720&w=20&h=20" />
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=20%C3%9720&w=20&h=20" />
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=20%C3%9720&w=20&h=20" />

Answer 6

One way to utilize jquery is by checking for images with a specific class. Here's an example:

$("img").on("click", function() {
  //remove the imgClicked class from all images
  $("img").removeClass("imgClicked");
  //add the class to the clicked image element
  $(this).addClass("imgClicked");
});

.imgClicked {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=20%C3%9720&w=20&h=20" />
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=20%C3%9720&w=20&h=20" />
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=20%C3%9720&w=20&h=20" />

Answer 7

Answer №4

It's really straightforward! You don't even need to add extra CSS.

$('.radioImg').on('click', function() {
  $('.radioImg').css("border","none")
  $(this).css("border","1px solid blue")
});

Answer 8

It's really straightforward! You don't even need to add extra CSS.

$('.radioImg').on('click', function() {
  $('.radioImg').css("border","none")
  $(this).css("border","1px solid blue")
});

Answer 9

Answer №5

Learn How to Transform Images into Radio Buttons with this easy guide:

Step 1: HTML..

<label class="radioImageLabel"><input type="radio" name="options" /><img src="abc.jpg" />Option Text </label>

Step 2: CSS..

label.radioImageLabel > input{
display:none;
}

label.radioImageLabel > input:checked + img{
border :1px solid blue;
}

 label.radioImageLabel > input + img{
 cursor:pointer;
 /* Add any additional styling for the image*/
}

label.radioImageLabel > input + img:hover{
cursor:pointer;
 /* Add styling for image on hover*/
}

label.radioImageLabel > input:disabled + img{
cursor: not-allowed;
 /* Add styling for disabled image*/
}

I hope this solution provides clarity on transforming images into radio buttons.

Answer 10

Learn How to Transform Images into Radio Buttons with this easy guide:

Step 1: HTML..

<label class="radioImageLabel"><input type="radio" name="options" /><img src="abc.jpg" />Option Text </label>

Step 2: CSS..

label.radioImageLabel > input{
display:none;
}

label.radioImageLabel > input:checked + img{
border :1px solid blue;
}

 label.radioImageLabel > input + img{
 cursor:pointer;
 /* Add any additional styling for the image*/
}

label.radioImageLabel > input + img:hover{
cursor:pointer;
 /* Add styling for image on hover*/
}

label.radioImageLabel > input:disabled + img{
cursor: not-allowed;
 /* Add styling for disabled image*/
}

I hope this solution provides clarity on transforming images into radio buttons.

Encircling the most recently selected image with a border

Answer №1

Answer №2

Essentially

However, for a more scalable approach

Answer №3

Answer №4

Answer №5

Similar questions

Event listener is failing to execute the functions

How can one utilize a second drop-down list in asp.net to alter the selected index and visibility of a drop-down list?

Issues with Firebase-admin preventing writing to the database are occurring without any error messages being displayed

Experiencing difficulties with retrieving form data in req.body using Express and node.js

Change the div attribute when clicking on a corresponding link

Update the Bootstrap CSS styling of a button element following a user's click action

Centralizing images in a Facebook gallery/lightbox during the loading process

The issue of MUI components overlapping arises during window resizing

Techniques for finding the total value of a JSON array

The password encryption method with "bcrypt" gives an undefined result

Differentiating between ng-show and ng-if in AngularJS

Changing a variable in an HTML file using a JavaScript file

Is there a way to restore a previous version of package-lock.json?

The date-fns parse function will retrieve the value from the previous day

What is the process for including echo HTML field in the WooCommerce order view?

Challenges encountered with Material-UI elements

Tips for downsizing a large image to fit into a smaller area

"Creating a dynamic TreeList in Ignite UI by linking pairs of names and corresponding

What is the most effective way to retrieve the count of users who have logged in within the past three months by utilizing Jquery

Incorporate content from HTML into various sections