Maintain the selected image

Question

Maintain the selected image

I am working on a program that allows users to choose images and I have given them the pseudo-class.

.my_image_class:hover{
 border:3px solid blue;
-webkit-box-sizing: border-box; }

This makes the images bordered in blue when hovered over, giving a "selected effect". I want to maintain this effect even after selecting the image, similar to https://i.sstatic.net/bChVb.png.

Any suggestions on how can achieve this with JavaScript?

javascript html css

Answer 1

Answer №1

CSS-only Image Selector

Originally this question sought a CSS-only solution, and while achieving it without JavaScript is challenging, there is a clever CSS "hack" to partially address the issue:

img {
  margin: 3px;
  width: 100px;
}
img:hover, img:target {
  border: 3px solid green;
  margin: 0;
}

<a href="#a"><img id="a" src="https://farm1.static.flickr.com/640/23366158776_3bddebe005_t.jpg" /></a>
<a href="#b"><img id="b" src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Marsglobe_tiny2.jpg" /></a>

This method allows styling images as click targets within anchor tags using only CSS properties.

It's important to note that this technique only allows for selecting one image at a time.

JavaScript Image Selector

For those preferring a JavaScript approach, the following code can be utilized:

function select(element) {
  element.onclick = function() {
    element.classList.toggle('selected');
  }
}

Array.from(document.getElementsByClassName('selectable')).forEach(select);

img {
  margin: 3px;
}
.selected {
  border: 3px solid green;
  margin: 0;
}

<img class="selectable" src="https://farm1.static.flickr.com/640/23366158776_3bddebe005_t.jpg" />
<img class="selectable" src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Marsglobe_tiny2.jpg" />

This script adds the ability to select multiple images by toggling the "selected" class on click events.

To restrict users from selecting more than one item, simple adjustments in the provided JavaScript code can be made.

function select(element) {
  element.onclick = function() {
    var selected = document.getElementsByClassName('selected')[0];
    if (typeof selected !== 'undefined') { selected.classList.remove('selected'); }
    if (element !== selected) { element.classList.add('selected'); }
  }
}

Array.from(document.getElementsByClassName('selectable')).forEach(select);

Answer 2

CSS-only Image Selector

Originally this question sought a CSS-only solution, and while achieving it without JavaScript is challenging, there is a clever CSS "hack" to partially address the issue:

img {
  margin: 3px;
  width: 100px;
}
img:hover, img:target {
  border: 3px solid green;
  margin: 0;
}

<a href="#a"><img id="a" src="https://farm1.static.flickr.com/640/23366158776_3bddebe005_t.jpg" /></a>
<a href="#b"><img id="b" src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Marsglobe_tiny2.jpg" /></a>

This method allows styling images as click targets within anchor tags using only CSS properties.

It's important to note that this technique only allows for selecting one image at a time.

JavaScript Image Selector

For those preferring a JavaScript approach, the following code can be utilized:

function select(element) {
  element.onclick = function() {
    element.classList.toggle('selected');
  }
}

Array.from(document.getElementsByClassName('selectable')).forEach(select);

img {
  margin: 3px;
}
.selected {
  border: 3px solid green;
  margin: 0;
}

<img class="selectable" src="https://farm1.static.flickr.com/640/23366158776_3bddebe005_t.jpg" />
<img class="selectable" src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Marsglobe_tiny2.jpg" />

This script adds the ability to select multiple images by toggling the "selected" class on click events.

To restrict users from selecting more than one item, simple adjustments in the provided JavaScript code can be made.

function select(element) {
  element.onclick = function() {
    var selected = document.getElementsByClassName('selected')[0];
    if (typeof selected !== 'undefined') { selected.classList.remove('selected'); }
    if (element !== selected) { element.classList.add('selected'); }
  }
}

Array.from(document.getElementsByClassName('selectable')).forEach(select);

Answer 3

Answer №2

To achieve hovering effects, utilizing jQuery can be beneficial. jQuery offers the hover() pseudo-event, which typically provides smoother functionality compared to mouseenter/mouseleave events. Consider creating separate CSS classes for each state (normal and hovered) and then dynamically changing the class on hover:

$(document).ready(function() {
    $(".my_image_clas").hover(
        function() { $(this).addClass("Hover"); },
        function() { $(this).removeClass("Hover"); }
    );
});

.my_image_clas.Hover { border: 3px solid blue; }

@Francesco Monti I acknowledge your input.

When working with jQuery, ensure to include the jquery.js file within the head tag of your HTML document:

<head>
<script src="jquery-1.12.0.min.js"></script>
</head>

Alternatively, you can reference the jQuery library online:

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

Within your script tags, use $(document).ready(function() to ensure proper execution.

If preferred, you can modularize your JavaScript and CSS files and include them accordingly.

Answer 4

To achieve hovering effects, utilizing jQuery can be beneficial. jQuery offers the hover() pseudo-event, which typically provides smoother functionality compared to mouseenter/mouseleave events. Consider creating separate CSS classes for each state (normal and hovered) and then dynamically changing the class on hover:

$(document).ready(function() {
    $(".my_image_clas").hover(
        function() { $(this).addClass("Hover"); },
        function() { $(this).removeClass("Hover"); }
    );
});

.my_image_clas.Hover { border: 3px solid blue; }

@Francesco Monti I acknowledge your input.

When working with jQuery, ensure to include the jquery.js file within the head tag of your HTML document:

<head>
<script src="jquery-1.12.0.min.js"></script>
</head>

Alternatively, you can reference the jQuery library online:

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

Within your script tags, use $(document).ready(function() to ensure proper execution.

If preferred, you can modularize your JavaScript and CSS files and include them accordingly.

Answer 5

Answer №3

Your estimated CSS:

.object {
    box-sizing: border-box;
    border: 2px solid transparent;
}

.object.active,
.item:hover,
.item:focus {
    border: 2px solid blue;
}

A few jQuery basics:

$('.item').on('click', function (event) {
    event.preventDefault(); // Stop the default action if .item is a link or button

    $(this).toggleClass('active');
})

Answer 6

Your estimated CSS:

.object {
    box-sizing: border-box;
    border: 2px solid transparent;
}

.object.active,
.item:hover,
.item:focus {
    border: 2px solid blue;
}

A few jQuery basics:

$('.item').on('click', function (event) {
    event.preventDefault(); // Stop the default action if .item is a link or button

    $(this).toggleClass('active');
})

Maintain the selected image

Answer №1

CSS-only Image Selector

JavaScript Image Selector

Answer №2

Answer №3

Similar questions

TypeScript Implementation of ES6 Arrow Functions

Difficulty encountered when choosing and interacting with website button with the utilization of Python 3.5.1 and Selenium 2.53.2

JavaScript Pagination and JSON Concerns in Coding Techniques

Activate video playback when scrolling, but ensure it only occurs one time

Using CSS to automatically adjust the width of a child div based on its content, rather than stretching it to fill the entire

The content at “http://localhost:3000/script.js” could not be accessed because of a MIME type mismatch with the X-Content-Type-Options set to nosniff

Troubleshooting async/await issues in certain IDEs

We could not locate the requested resource with a DELETE request using the fetch JSON method

Error connecting to Firebase Cloud Functions - connection issue

Using vuex-class to interact with Vuex in non-Vue components

I have been unable to find a solution for the non-functioning jQuery (3.4.1 / 3.3.1) load() issue

What steps can be taken to ensure the Instagram logo remains visible even when it is being hovered over?

React component fails to display content following execution of Jquery Ajax request

FullCalendar dayClick event fails to trigger any action

After changing the page, the Facebook JS SDK fails to function properly when using JQueryMobile

What is the most elegant way to retrieve a new item from Firebase and read it?

Retrieve the screen width using a JavaScript function and apply it as a percentage

Error throwing when attempting to use additional plugins in Angular CKEditor

Ways to create a back-and-forth transition across a sequence

res.cookie function is unable to set cookies in the Chrome web browser