javascript - HTML:带有静态文本部分的照片网格 HTML 脚本

Question

我正在尝试为公司网站创建一个团队部分。我想要一个团队照片网格，网格旁边有一个框，每当我点击一个人的照片时它都会更新，如下所示:

该网站是纯html/css，当前版本可以在这里看到:http://mgvd.co/thinktank我想知道是否有人可以建议一个简单的解决方案来实现此功能 - 一些 HTML 代码片段或类似的代码。

谢谢!

Answer 1

HTML

<img class="myImg" id="pic1" src="http://lorempixel.com/100/100/sports/" />
<img class="myImg" id="pic2" src="http://lorempixel.com/100/100/sports/" />
<div id="info"></div>

JavaScript

//object with image id and description to show
var info = {
    'pic1': 'Lorem ipsum dolor sit amet.',
    'pic2': 'consetetur sadipscing elitr'
};

//get all images
var images = document.getElementsByClassName('myImg') || document.querySelectorAll('myImg');

//set eventhandler for each image
for (var i = 0; i < images.length; i++) {
    images[i].addEventListener('click', function (event) {
         //get the description from the object
         document.getElementById('info').innerHTML = info[event.target.id];
    }, false);
}

JSfiddle DEMO