文本悬停在具有多列的图像上，并在中心鼠标悬停时固定图像

Question

我一直在努力解决一个问题，我知道合适的人可以轻松地一次解决。

我需要创建类似于此站点的内容：

http://www.arcadiacontemporary.com/artists/index.php

但是我需要多个艺术家 columns/tables 喜欢这个网站：

https://collinsgalleries.com/ARTISTS5.html

我希望鼠标悬停的工作方式相同，但是当它抓取图像时，我宁愿能够使用外部文件和 URL 与内部文件和 URL。

这两个站点都使用 jquery 和 bootstrap，我需要将它们集成到 Wordpress 网站中。我不知道 jquery 或 bootstrap js，所以我正在尽力创建它。

到目前为止我得到的最好的代码是：

HTML

<!DOCTYPE html>
<html>
<head>

<style>
table, th, td {
  border: 0px solid black;
    padding: 5px;

}
table {
  border-spacing: 15px;
  ]
    </style>
    </head>
    <body>
        
 <a href="#"><div class="hover-img">
  <table style="width: 100%"></table>
  <th>Artist Name</th>
  </tr>
   <span><img src="https://collinsgalleries.com/images/Artist-Page-Monks.jpg" alt="image" height="fixed" />      </span>
</div></a>
<a href="#"><div class="hover-img">
    <tr>
    
    <th>Artist Name</td>
   <span><img src="https://collinsgalleries.com/images/Paul_Oxborough_Old_Friends.jpg" alt="image" height="fixed" />      </span>
</div></a>
 <a href="#"><div class="hover-img">
    <td>Artist Name</td>
   <span><img src="https://collinsgalleries.com/images/Paul_Oxborough_Beds.jpg" alt="image" height="fixed" />      </span>
</div>
</a>
 <a href="#"><div class="hover-img">
    <td>Artist Name</td>
   <span><img src="https://collinsgalleries.com/images/Paul_Oxborough_MacBeth-frame.jpg" alt="image" height="fixed" />      </span>
   


   </table>
   
   </body>
</html>

然后 CSS

a .hover-img { 
  position:static;
 }
a .hover-img span {
  position:absolute; left:-9999px; top:-9999px; z-index:9999;
 }
a:hover .hover-img span { 
  top: 1vw; 
  left:18vw;
 }
 
 
 
td {
  display: table-cell;
  vertical-align: inherit;
}

此代码的问题是 - 图像在中间的大小不同。如果我添加第三行，格式就会中断。这也需要移动响应。

我愿意接受所有建议。提前谢谢你

Answer 1

好的，首先，您使用 bootstrap 的原因是它可以同时满足移动和桌面屏幕尺寸的需要，而无需运行任何额外的样板代码来为浏览器调整网站大小...

jquery 不是实现您的目标所必需的，但纯香草 JavaScript 是。

这就是我的处理方式

In the first instance I would replace the table component with a Layout called a flex box This would make your code easier to read and will dynamically lay itself out ...If you would like to read up further on flex box CSS styles here is the link Flex Box
The Second thing is I would write a simple JavaScript function to change the image onMouseOver .In order to give the JavaScript engine a handle to the DOM image component you need to allocat and "id" to it . Then you can use let ObjName = document.getElementById('YourHtmlObject'). after that you can manipulate it with JS
I would use one image container and dynamically append the image source based on the artist Through a switch statement in JavaScript function
In order to get the image to zoom or scale onMouseover again I would simply place a CSS animation to do that

Vanilla JavaScript 在你的情况下会让你的生活变得更简单。学习它的基础知识是个好主意……我提供了一些代码，可以为您简化解决方案……如果您觉得这有用或需要任何进一步的帮助，请告诉我

尽情享受吧！

function ChangeImage(artistName) {


  let img = document.getElementById('TheImage');

  switch (artistName) {

    case 'Rob':
      // code block
      img.src = 'https://collinsgalleries.com/images/Paul_Oxborough_Old_Friends.jpg';
      break;
    case 'Amy':
      // code block
      img.src = 'https://collinsgalleries.com/images/Paul_Oxborough_Beds.jpg';
      break;
    case 'Bob':
      // code block
      img.src = 'https://collinsgalleries.com/images/Paul_Oxborough_MacBeth-frame.jpg';
      break;
    case 'Clare':
      // code block
      img.src = 'https://collinsgalleries.com/images/Artist-Page-Monks.jpg';
      break;
    default:
      // code block
      img.src = 'https://collinsgalleries.com/images/Artist-Page-Monks.jpg';

  }

}

.app-container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.leftcontainer {
  flex-direction: column;
  justify-content: space-evenly;
}

.rightcontainer {
  flex-direction: column;
  justify-content: space-evenly;
}

.midcontainer {
  flex-direction: column;
  justify-content: space-evenly;
}

.zoom {
  transition: transform .2s;
  /* Animation */
}

.zoom:hover {
  transform: scale(1.5);
  /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  /* position:absolute;
      right:0;*/
}

#TheImage {
  transition: transform .2s;
}

<div class="app-container">


  <div class="leftcontainer">

    <div class="app-container">

      <ul style="list-style: none;">
        <li onmouseover="ChangeImage('Rob')">Rob</li>
        <li onmouseover="ChangeImage('Amy')">Amy</li>
        <li onmouseover="ChangeImage('Bob')">Bob</li>
        <li onmouseover="ChangeImage('clare')">Clare</li>
      </ul>


      <ul style="list-style: none;">
        <li onmouseover="ChangeImage('Rob')">Rob</li>
        <li onmouseover="ChangeImage('Amy')">Amy</li>
        <li onmouseover="ChangeImage('Bob')">Bob</li>
        <li onmouseover="ChangeImage('clare')">Clare</li>
      </ul>

    </div>
  </div>

  <div class="midcontainer">
    <span><img id='TheImage'  class='zoom'  src="https://collinsgalleries.com/images/Artist-Page-Monks.jpg" alt="image" height="300px"  width="300px"/>      </span>
  </div>

  <div class="rightcontainer">
    <div class="app-container">
      <ul style="list-style: none;">
        <li onmouseover="ChangeImage('Rob')">Rob</li>
        <li onmouseover="ChangeImage('Amy')">Amy</li>
        <li onmouseover="ChangeImage('Bob')">Bob</li>
        <li onmouseover="ChangeImage('clare')">Clare</li>
      </ul>
      <ul style="list-style: none;">
        <li onmouseover="ChangeImage('Rob')">Rob</li>
        <li onmouseover="ChangeImage('Amy')">Amy</li>
        <li onmouseover="ChangeImage('Bob')">Bob</li>
        <li onmouseover="ChangeImage('clare')">Clare</li>
      </ul>
    </div>
  </div>

</div>

文本悬停在具有多列的图像上，并在中心鼠标悬停时固定图像

Text hover to image with multiple columns and fixed image in center- mouseover

javascript

jquery

image

onmouseover

hover