CODEWITHSUNDEEP
css
EXIT
EXIT

Reputation: 3

CSS How can I make button show image

I have a question about making a button show image For example, I have four buttons I want Each button showing image in the same content for images

In other words: When you press one of the buttons show you image

here is an example: https://jsfiddle.net/i5yal/yvCtQ/1/

<div id="section-container">
<div class="section-img-container"><a>images will appear here</a>
</div>
</div>

<div id="section-button-container"><div>
<div class="section-button1"><a>1</a>
</div>

<div class="section-button2"><a>2</a>
</div>

<div class="section-button3"><a>3</a>
</div>

<div class="section-button4"><a>4</a>
</div>

</div>
</div>

CSS code:

    #section-container {
background-color: #C0C0C0;
width: 300px;
height: 300px;
margin:0 auto;
}

#section-button-container {
width: 300px;
height: 30px;
margin:0 auto;
}

.section-button1 {
background-color: #808000;
width: 30px;
height: 30px;
float: left;
display: block;
margin-left: 30px;
margin-right: 20px;
}

.section-button2 {
background-color: #808000;
width: 30px;
height: 30px;
float: left;
display: block;
margin-left: 20px;
margin-right: 20px;
}

.section-button3 {
background-color: #808000;
width: 30px;
height: 30px;
float: left;
display: block;
margin-left: 20px;
margin-right: 20px;
}

.section-button4 {
background-color: #808000;
width: 30px;
height: 30px;
float: left;
display: block;
margin-left: 20px;
margin-right: 20px;
}

.section-img-container {
background-color: #008080;
background-position: center center;
width: 270px;
height: 270px;
margin: 0 auto;
}

Upvotes: 0

Views: 3208

Answers (2)

origin1tech
origin1tech

Reputation: 749

For the animation portion investigate this library, used it myself and it works nicely => animate.css

for the changing of the image it is rather trivial here is one way to do it.

$(document).ready(function() {
    var viewer = $('img.viewer');
    $('a.section-button').click(function () {
        viewer.attr('src', 'your new path to new image');
    });
});

In the above I added the classes that would be attached to the main view area so you'd have:

  <img class="veiwer" />.

You'd just hide this or load up a default image when the page loads.

Also using "section-button" class on each anchor. I didn't account for positioning in the list of choices there meaning 1, 2, 3, 4th picture and so on. It might be easiest to have data-attributes for that on the section buttons. So something like.

<a class="section-button" data-imgrc="path to the large image" data-number="1">1</a>

Note you could also if you just have numbers inside the section buttons just grabber the inner text however personally I prefer data-attributes.

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

To avoid using JavaScript, it's possible to use CSS (albeit there has to be some minor adjustments to your HTML in order to do so); so given the amended HTML:

<div id="section-container">
    <div class="section-img-container">
        <input type="radio" name="images" id="img1" />
        <img src="http://placekitten.com/300/300/" />
        <input type="radio" name="images" id="img2" />
        <img src="http://lorempixel.com/300/300/nightlife" />
        <input type="radio" name="images" id="img3" />
        <img src="http://lorempixel.com/300/300/people" />
        <input type="radio" name="images" id="img4" />
        <img src="http://dummyimage.com/300x300/000/f90.png&text=image+lorem+ipsum" />
    </div>
</div>

<div id="section-button-container"><div>
    <div class="section-button1">
        <label for="img1">1</label>
    </div>

    <div class="section-button2">
        <label for="img2">2</label>
    </div>

    <div class="section-button3">
        <label for="img3">3</label>
    </div>

    <div class="section-button4">
        <label for="img4">4</label>
    </div>

    </div>
</div>

And the following CSS:

#section-button-container label {
    display: block;
    text-align: center;
    height: 100%;
    line-height: 30px;
    cursor: pointer;
}
input[type=radio],
input[type=radio] + img {
    display: none;
}

input:checked + img {
    display: block;
}

JS Fiddle demo.

This does require that the browser supports the :checked pseudo-selector and the CSS next-sibling + combinator, however; and takes advantage of the label being able to check/uncheck a radio input (so long as the for attribute of the label identifies the id of the relevant input).

References:

Upvotes: 1

Related Questions