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

我一直在努力解决一个问题，我知道合适的人可以很容易地解决这个问题。

我需要创建类似于这个网站的东西：

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

然而，我需要多个艺术家列/表像这个网站：

https://collinsgalleries.com/ARTISTS5.html

我希望鼠标悬停也能正常工作，但当它抓取图像时，我更希望能够使用外部文件和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;
}

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

我对所有的建议都持开放态度。提前感谢

好的首先，你使用引导程序的原因是它既适合移动屏幕大小，也适合桌面屏幕大小，而不必运行任何额外的样板代码来调整浏览器的网站大小。。。

jquery不是实现目标所必需的，但纯Vanilla JavaScript才是。

这就是我将如何处理

在第一个例子中，我会用一个名为flex box的布局来替换表组件。这将使您的代码更容易阅读，并将动态布局自己。。。如果你想进一步阅读有关flex box CSS样式的信息，这里有链接flex box
第二件事是我会写一个简单的JavaScript函数来更改MouseOver上的图像。为了给JavaScript引擎一个DOM图像组件的句柄，你需要分配和；id"；对它。然后可以使用let ObjName = document.getElementById('YourHtmlObject')。之后你可以用JS 操作它
我会使用一个图像容器，并根据艺术家动态附加图像源。通过JavaScript函数中的切换语句
为了再次在鼠标上缩放图像，我只需放置一个CSS动画来进行

香草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>

相关内容

最新更新

热门标签：