Skip to content

Instantly share code, notes, and snippets.

@LeonAlvarez

LeonAlvarez/galeria.html

Created December 15, 2016 19:28
Show Gist options
  • Save LeonAlvarez/d7341be1f0ce7e44e8ada295484b781f to your computer and use it in GitHub Desktop.
Save LeonAlvarez/d7341be1f0ce7e44e8ada295484b781f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
galeria.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html,
body {
width: 100%;
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.thumbails img {
width: 150px;
height: 150px;
}
.thumbails {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<script>
var aumentarImagen = function(event) {
console.log(event);
var url = event.currentTarget.src;
var imgGrande = document.getElementById("imgGrande").src = url;
}
</script>
</head>
<body>
<div class="thumbails">
<img src="http://x.imgur.com/8N9Pq.png" onmouseover="aumentarImagen(event)" alt="">
<img src="http://i.imgur.com/UMhEc.png" onmouseover="aumentarImagen(event)" alt="">
<img src="http://i.imgur.com/xPzZ1.png" onmouseover="aumentarImagen(event)" alt="">
<img src="http://i.imgur.com/m4D13.png" onmouseover="aumentarImagen(event)" alt="">
<img src="http://i.imgur.com/BuUqb.png" onmouseover="aumentarImagen(event)" alt="">
<img src="http://i.imgur.com/zCgK1.png" onmouseover="aumentarImagen(event)" alt="">
<img src="http://i.imgur.com/uWXfo.png" onmouseover="aumentarImagen(event)" alt="">
<img src="http://i.imgur.com/sp24R.png" onmouseover="aumentarImagen(event)" alt="">
</div>
<div class="principal">
<img id="imgGrande" src="http://x.imgur.com/8N9Pq.png" alt="">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment