两行三列图片点击展示，带坐标点

首先，需要给每个图片添加一个点击事件监听器。可以使用 JavaScript 或 jQuery 来实现。示例代码如下：

JavaScript：

var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');

img1.addEventListener('click', function() {
  var src = this.getAttribute('src');
  var coords = this.getAttribute('coords');
  showImage(src, coords);
});

img2.addEventListener('click', function() {
  var src = this.getAttribute('src');
  var coords = this.getAttribute('coords');
  showImage(src, coords);
});

function showImage(src, coords) {
  var imgBox = document.getElementById('imgBox');
  var coordsBox = document.getElementById('coordsBox');

  imgBox.setAttribute('src', src);
  coordsBox.innerHTML = coords;
}

jQuery：

$('#img1, #img2').click(function() {
  var src = $(this).attr('src');
  var coords = $(this).attr('coords');
  showImage(src, coords);
});

function showImage(src, coords) {
  $('#imgBox').attr('src', src);
  $('#coordsBox').html(coords);
}

在 HTML 中，需要为显示图片的盒子和显示坐标点的盒子分别添加 id 属性，以便 JavaScript 或 jQuery 能够找到它们。示例代码如下：

<div id='imageContainer'>
  <img id='img1' src='image1.jpg' alt='Image 1' usemap='#map1'>
  <img id='img2' src='image2.jpg' alt='Image 2' usemap='#map2'>
</div>

<div id='displayContainer'>
  <img id='imgBox' src='' alt='Selected Image'>
  <div id='coordsBox'></div>
</div>

在每个图片上添加一个 usemap 属性，指向对应的坐标点映射。示例代码如下：

<img id='img1' src='image1.jpg' alt='Image 1' usemap='#map1'>
<map name='map1'>
  <area shape='circle' coords='100,100,50' href='#'>
  <area shape='rect' coords='200,200,300,300' href='#'>
</map>

<img id='img2' src='image2.jpg' alt='Image 2' usemap='#map2'>
<map name='map2'>
  <area shape='circle' coords='150,150,75' href='#'>
</map>

点击图片时，JavaScript 或 jQuery 会调用 showImage 函数，将显示图片的盒子的 src 属性设置为被点击图片的 src 属性，将显示坐标点的盒子的 innerHTML 设置为被点击图片的 coords 属性。需要注意的是，coords 属性是一个字符串，需要根据实际情况进行解析和处理。在上面的示例代码中，coords 属性是一个用逗号分隔的三个数字，表示一个圆形或矩形的坐标。如果需要显示更复杂的坐标点，可能需要使用正则表达式等方法进行解析。