0

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;
}
7
  • For accessibility why not do <input type="image" src="..." alt="Section 1"/>
    – Ryan B
    May 19, 2013 at 17:55
  • There are several ways to do this. if you want the image to be clickable (seems u do I see an anchor tag there) then you can have a default image with say a question mark or something in your anchor then just change its source with jquery. if that is what ur looking for comment and I'll post an example for you. May 19, 2013 at 17:59
  • @C.Hazelton + Ryan B Thank you for your answer, To be clear my question I want to do Something like this: tympanus.net/Development/BookBlock/index2.html
    – EXIT
    May 19, 2013 at 18:02
  • I see I take it u like the plugin but doesn't give you the layout or look u want? All that is happening there (disclaimer: going off exp didn't dig into plugin) is the source of the anchor as I mentioned is getting changes that is really simple. As to the "flipping" that is prob a css3 transformation or it should be for best performance on mobile platforms. Are we in the correct direction? May 19, 2013 at 18:10
  • @C.Hazelton No I do not want flipping I use Opera browser It does not Supports flipping, if you saw the white buttons and the green button If you press the button shows you another picture This is what I want to do, to make every button show another picture
    – EXIT
    May 19, 2013 at 18:20

2 Answers 2

1

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:

0

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.

3
  • Thank you I'm going to try this way Thank you very much
    – EXIT
    May 19, 2013 at 18:27
  • please vote as answered either mine or Dave's the both work. Watching stack all day so post back if you get stuck. May 19, 2013 at 18:30
  • thanks @C.Hazelton , I hope that i do not stuck.. :P But really thank you for your help
    – EXIT
    May 19, 2013 at 18:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.