CSS ..我怎样才能使按钮显示的图像

Question

我有一个关于使按钮显示的图像 例如问题，我有四个按钮 我想显示在图像

在其他相同内容的图像中的每个按钮关键词： 当您按下其中一个按钮显示您的图像

这里有一个例子：http://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代码：

#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; 
} 

Answer 1

为了避免使用JavaScript，可以使用CSS（尽管为了做到这一点，必须对HTML进行一些小的调整）;所以给出的修改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> 

下面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。

但这确实需要浏览器支持:checked伪选择器和CSS下一个兄弟+组合器，并且利用label能够检查/取消选中无线电输入（只要label的for属性标识相关的input的id）。

参考文献：

• :checked pseudo-selector`。
• :checked pseudo-selector compatibility。

Answer 2

对于动画部分调查这个库，用它自己和它工作得很好=>animate.css

它是相当琐碎这里的图像的变化是如何做这件事。

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

在上面我补充说，将附属于主视图区中的类，所以你必须：

<img class="veiwer" />. 

你只隐藏这样或加载默认的图像时，页面加载。

还在每个锚上使用“section-button”类。我没有考虑在选择列表中的定位，这意味着1,2,3,4个图片等等。在部分按钮上可能最容易拥有数据属性。所以像。

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

注意你也可以，如果你只是有部分按钮，中间的数字只是抓取器内部文本但是我个人更喜欢数据的属性。