Error to apply event onmouse over on image [closed]

Question

Error to apply event onmouse over on image [closed]

Navigation

#1 by (0 votes)

0

Hello, I need help to apply an effect of this web: When we pass the mouse over an image (bottle), the enlarged image appears on the left, see: [ link

I can not perform the effect on myweb when the mouse is hovered over an image and it comes out in another section to the left as in the previous web.

I have this code but I do not get it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-scrict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>

<style type="text/css">

#id-main {
width: 100%;
height: 400px;
}

header {
width: 500px;
margin: 0px auto;
height: 500px;
float:left;
}


</style>

</head>

<header></header>

<body>
<img src="img/sparkling.png" width="400px" height="400px" onmouseover="hacer_hover()"">

<script type="text/javascript">

function hacer_hover() 
{
 $("header").css('background-image', 'url(img/sparkling.png)');
}

</script>

</body>
</html>

javascript jquery css3

asked by tamueka 10.05.2017 в 21:45

source

1 answer

Integrate a theme into rails how to make a PG_DUMP from a script, that allows me to choose which database to ignore and which ones do not

score 0 · Accepted Answer

I leave this code that could answer your question, however if you do not understand something put me in comments and I will help you answer your questions

let imgList = document.querySelectorAll('img')
let aside = document.querySelector('.aside')
for(let i = 0; i < imgList.length; i++){
  imgList[i].addEventListener('mouseover',function(){
    aside.style.backgroundImage = "url(" + this.src + ")"
    aside.clientHeight
    aside.classList.add('visible')
  })
  imgList[i].addEventListener('mouseout',function(){
    aside.classList.remove('visible')
  })
}

.wrapper {
  position: relative;
  display: flex; 
  width: 100%;
  height: 100vh;
}

.aside {
  width: 30%;
  height: 100vh;
  background-color: lightgreen;
  opacity: 0;
  transition: all .2s ease-in;
}

.visible {
  opacity: 1;
}

.gallery {
  display: flex;
  justify-content: space-between;
  padding: 5px;
  align-items: center;
  width: 70%;
  height: 100%;
  background-color: lightblue;
}

.gallery img {
  width: 30%;
}

<div class="wrapper">
  <div class="aside">
  </div>
  <div class="gallery">
    <img src="http://lorempixel.com/400/400">
    <img src="http://lorempixel.com/500/500">
    <img src="http://lorempixel.com/600/600">
  </div>
</div>