Discover the method to adjust the position of elements, such as images, using radio buttons

Question

Discover the method to adjust the position of elements, such as images, using radio buttons

I have an image positioned in a container along with 3 radio buttons. I want to make additional images appear over the main image when specific radio buttons are selected. Each button will trigger different positions for the additional images.

So far, this is what I have:

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="radio" id="q156" name="quality[25]" value="1" /> 1
    </label> 
    <label class="btn btn-default">
        <input type="radio" id="q157" name="quality[25]" value="2" /> 2
    </label> 
    <label class="btn btn-default">
        <input type="radio" id="q158" name="quality[25]" value="3" /> 3
    </label> 
</div>
</div>
</div>
<div class="col-md-8 col-fl">
    <div id="img_box">
        <img style="width: 100%;" src="img/other/rounded_corners.png" />
    </div>

javascript jquery html css

Answer 1

Answer №1

To enhance the radio button functionality, consider including image sources as data attributes.

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="radio" id="q156" name="quality[25]" value="1" data-img="http://placehold.it/350x150/ff0000" /> 1
    </label> 
    <label class="btn btn-default">
        <input type="radio" id="q157" name="quality[25]" value="2" data-img="http://placehold.it/350x150/00ff00"/> 2
    </label> 
    <label class="btn btn-default">
        <input type="radio" id="q158" name="quality[25]" value="3" data-img="http://placehold.it/350x150/0000ff" /> 3
    </label> 
</div>
<div class="col-md-8 col-fl">
<div id="img_box"></div>

The image box will appear empty but with a preset size and background image assigned through CSS:

#img_box{
    width: 350px;
    height: 150px;
    background: url('http://placehold.it/350x150/ff0000')
}

Next, create an event handler that appends an image overlay when a radio button is clicked (using the source specified in the data attribute):

 $(function(){
    $('input[type=radio]').click(function(){
        $this = $(this)
        $img_box = $('#img_box')
        $overlay = $('<img/>').attr('src',$this.data('img'))
        $img_box.html('').append($overlay)                    
    });
})

For a demonstration of this functionality, check out this example: https://jsfiddle.net/fmytsjv7/1/

Answer 2

To enhance the radio button functionality, consider including image sources as data attributes.

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="radio" id="q156" name="quality[25]" value="1" data-img="http://placehold.it/350x150/ff0000" /> 1
    </label> 
    <label class="btn btn-default">
        <input type="radio" id="q157" name="quality[25]" value="2" data-img="http://placehold.it/350x150/00ff00"/> 2
    </label> 
    <label class="btn btn-default">
        <input type="radio" id="q158" name="quality[25]" value="3" data-img="http://placehold.it/350x150/0000ff" /> 3
    </label> 
</div>
<div class="col-md-8 col-fl">
<div id="img_box"></div>

The image box will appear empty but with a preset size and background image assigned through CSS:

#img_box{
    width: 350px;
    height: 150px;
    background: url('http://placehold.it/350x150/ff0000')
}

Next, create an event handler that appends an image overlay when a radio button is clicked (using the source specified in the data attribute):

 $(function(){
    $('input[type=radio]').click(function(){
        $this = $(this)
        $img_box = $('#img_box')
        $overlay = $('<img/>').attr('src',$this.data('img'))
        $img_box.html('').append($overlay)                    
    });
})

For a demonstration of this functionality, check out this example: https://jsfiddle.net/fmytsjv7/1/

Answer 3

Answer №2

To accomplish this task, you can utilize jQuery by creating an event handler that is bound to your radio buttons.

Here is an example:

$('input:radio[name="quality[25]"]').change(function(){ });

You can then add code within the handler to modify the attributes or CSS properties of either the target image container or the image element directly.

If you want to adjust the CSS properties of your target element, you can use jQuery's .css() method

For instance:

$("#img_box").css({"height":"100px","width":"100px",background:"red"});

Alternatively, if you need to change the attributes of your target element, such as the "src" attribute of an image, you can use jQuery's .attr() method.

For example: (in this case it updates the img's "src" attribute)

$("#img_box > img").attr("src","path/to/whatever/image");

Check out a demo on JSFIDDLE here

Since you mentioned the jQuery tag in your question, I assume you are looking for a jQuery-based solution.

Answer 4

To accomplish this task, you can utilize jQuery by creating an event handler that is bound to your radio buttons.

Here is an example:

$('input:radio[name="quality[25]"]').change(function(){ });

You can then add code within the handler to modify the attributes or CSS properties of either the target image container or the image element directly.

If you want to adjust the CSS properties of your target element, you can use jQuery's .css() method

For instance:

$("#img_box").css({"height":"100px","width":"100px",background:"red"});

Alternatively, if you need to change the attributes of your target element, such as the "src" attribute of an image, you can use jQuery's .attr() method.

For example: (in this case it updates the img's "src" attribute)

$("#img_box > img").attr("src","path/to/whatever/image");

Check out a demo on JSFIDDLE here

Since you mentioned the jQuery tag in your question, I assume you are looking for a jQuery-based solution.

Discover the method to adjust the position of elements, such as images, using radio buttons

Answer №1

Answer №2

Similar questions

I am looking to incorporate automatic scrolling functionality into my RSS Feed

Utilizing JQuery to display JSON data on a data table using Ajax

Expansive Offspring Division stretching to the Entire Vertical Length of its Guardian Division

Automatically retrieve a URL from a website using Python

A skeleton framework lacking a data storage backend

A beginner's guide to using Jasmine to test $http requests in AngularJS

Error in jQuery validation caused by a different value

Eliminate a specific choice from a drop-down menu in an Angular application

How can I use variables to show the second dropdown list only when a value has been selected in the first dropdown?

An error was encountered when trying to read property '0' of an undefined object in a for loop

What is the process of creating a Listbox that is initially empty and allowing options to be passed without automatically selecting

Is there a way to align a button in the center of the browser's footer?

Transform a group of objects in Typescript into a new object with a modified structure

"Selecting elements using the nth-of-type CSS selector alongside other

Switch from using jQuery to vanilla JavaScript for handling POST requests

What are the best practices for utilizing pre-defined CSS classes in Vue.js libraries?

Parsing JSON data in JavaScript with multiple objects

Develop a voice recording feature using ReactJS

A rightward sliding submenu that appears upon clicking a button

Guide on transferring the value of a jQuery variable to a PHP variable within an array