Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

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

0 votes
184 views
in Technique[技术] by (71.8m points)

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

I've been struggling with a problem that I know the right person can easily fix in one shot.

I need to create something similar to this site:

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

However I need multiple artist columns/tables like this site:

https://collinsgalleries.com/ARTISTS5.html

I would like the mouseover to work the same however when it grabs the image, I would rather be able to use external files and URLs vs internal.

Both site uses jquery and bootstrap, which I need to integrate into a Wordpress website. I do not know jquery or bootstrap js so I'm trying my best to create it without.

The best I've got so far for code is:

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>

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

The issue with this code is - The images aren't don't size the same in the middle. if I add a 3rd line the formatting breaks. And this needs to be mobile responsive as well.

I am open to all suggestions. Thank you in advance


与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Ok Firstly the reason you would use bootstrap is that it caters for both Mobile and desktop screen sizes without having to run any additional boilerplate code to resize the site for the browser ...

jquery is not necessary to achieve your goal but pure Vanilla JavaScript is .

This is how I would approach it

  1. 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

  2. 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

  3. I would use one image container and dynamically append the image source based on the artist Through a switch statement in JavaScript function

  4. In order to get the image to zoom or scale onMouseover again I would simply place a CSS animation to do that

Vanilla JavaScript in your case would make your life allot simpler . It would be a good idea to learn the basics of it ... I have provided some code that should simplify the solution for you ... Let me know if you find this useful or need any further help

enjoy!

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>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

56.8k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...