OnMouseOver change the content of a (pop-up) window-CodePudding

I'm a visual artist with not that many coding skills. I know some HTML and some CSS but that's it. I like to create a webpage that does the following:

On the left, there is an image with lines. When hovering over a line the window on the right shows an image, movie, or plays a sound. Hovering over the next line triggers another image, movie, or sound.

Anyone can point me in the correct direction? I made a gif to show how it should work...

CodePudding user response：

You can do this by the following code example.

HTML:

<div class="lines">
    <span id='line-1'>|</span>
    <span id='line-2'>|</span>
    <span id='line-3'>|</span>
</div>

<div id='output'></div>

const line1 = document.getElementById('line-1')
const line2 = document.getElementById('line-2')
const line3 = document.getElementById('line-3')
const output = document.getElementById('output')

line1.addEventListener('mouseover', () => {
    output.innerHTML = 'Content One'
})

line2.addEventListener('mouseover', () => {
    output.innerHTML = 'Content Two'
})

line3.addEventListener('mouseover', () => {
    output.innerHTML = 'Content Three'
})

CodePudding user response：

Simple solution:

Select HTML elements which we want to hover over (left, middle, right), and HTML elements which contain our images/videos/audio etc. (img1, sound, img2)
For every element you want to hover over, you need to add event listener (addEventListener), so you can manipulate your HTML/CSS code with JavaScript.

2.2 Inside each event listener you add or remove class: none, which has CSS value of display: none (this means element won't be shown), depending on what your goal is.

To make images disappear when we don't hover our cursor over the element, we need to again add event listener to elements which already have on mouseover event listener. In this case we use mouseover or blur. When cursor isn't on the element, JavaScript will automatically add none class to it.

const left = document.querySelector('.left-line');
const middle = document.querySelector('.middle-line');
const right = document.querySelector('.right-line');

const img1 = document.querySelector('.image-1');
const sound = document.querySelector('.sound');
const img2 = document.querySelector('.image-2');


left.addEventListener('mouseover', () => {
    img1.classList.remove('none');
    img2.classList.add('none');
  sound.classList.add('none');
});

middle.addEventListener('mouseover', () => {
    img1.classList.add('none');
    img2.classList.remove('none');
  sound.classList.add('none');
});

right.addEventListener('mouseover', () => {
    img1.classList.add('none');
    img2.classList.add('none');
  sound.classList.remove('none');
});

left.addEventListener('mouseout',() => addNoneClass());
middle.addEventListener('mouseout', () => addNoneClass());
right.addEventListener('mouseout', () => addNoneClass());

function addNoneClass() {
    img1.classList.add('none');
    img2.classList.add('none');
  sound.classList.add('none');
}

* {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
}

main {
  display: flex;
  width: 100%;
  height: 100%;
}

section.left {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.line-container {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  border: 2px solid black;
}


.left-line, .middle-line, .right-line {
   width: 50px;
   height: 90%;
   margin: 0 10px;
}
.left-line { background-color: green; }
.middle-line { background-color: red; }
.right-line { background-color: blue; }



section.right {
  width: 50%;
  display:flex;
  align-items: center;
  justify-content: center;
}

.box {
  width: 200px;
  height: 200px;
  border: 2px solid black;
}

 img {
  width: 200px;
  height: 200px;
}

.none {
  display: none;
}

<main>
  
  <section class="left">
    <div class="line-container">
      <div class="left-line">
      </div>
       <div class="middle-line">
      </div>
       <div class="right-line">
      </div>
    </div>
  </section>
  <section class="right">
    <div class="box">
      <div class="image-1 none">
        <img src="https://play-lh.googleusercontent.com/aFWiT2lTa9CYBpyPjfgfNHd0r5puwKRGj2rHpdPTNrz2N9LXgN_MbLjePd1OTc0E8Rl1" alt="image-1">
      </div>
      <div class="sound none">
        <img src="https://sm.pcmag.com/pcmag_uk/review/g/google-pho/google-photos_z68u.jpg" alt="sound">
      </div> 
      <div class="image-2 none">
        <img src="https://cdn.vox-cdn.com/thumbor/I2PsqRLIaCB1iYUuSptrrR5M8oQ=/0x0:2040x1360/1200x800/filters:focal(857x517:1183x843)/cdn.vox-cdn.com/uploads/chorus_image/image/68829483/acastro_210104_1777_google_0001.0.jpg" alt="image-2">
      </div>
    </div>
  </section>
  
</main>