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

Receiving information within an Angular Component (Profile page)

Creating a column in CSS that maximizes width without utilizing 100% or causing text wrap

Tips on invoking Bootstrap's collapse function without using JQuery

Use Jquery to retrieve the innerhtml content

Dealing with images on my live React application

Incorporating a spectrum of hues into an HTML document

Showing a coordinated timer countdown alongside automatic server-side logout

Retrieve the current system datetime with just a click of a button

The actions performed within an event listener function are undone once they have been carried out

Creating dynamic qtip2 tooltips is an effective way to enhance user interaction on

Determining age in a Class upon instance creation

What steps can be followed to incorporate a loading gif into this popup and subsequently eliminate it?

Harnessing the Power of Script Loader in Your webpack.config.json File

Ways to capture all characters (including special characters like ) using Visual Studio Regex

The for loop is throwing an error because the variable 'i' is not defined

How to conceal table cells on Safari 5?

Issues encountered when selecting table data for filtering

The <span> tag creating a surprise gap following a word

Developers guide to using Selenium IDE

Is it possible for a script with ignore_user_abort(true) to be halted by using the exit() function in PHP?