Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
    <nav id = "menu">
        <li>Imagen 1</li>
        <li>Imagen 2</li>
        <li>Imagen 3</li>
    </nav>
    
    <div id = "imagenes">
        <img src = "http://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Herbstlandschaft_(am_Rebhang).jpg/250px-Herbstlandschaft_(am_Rebhang).jpg" class = "invisible" />
        <img src = "http://www.deguate.com/artman/uploads/25/volcanes1.gif" class = "invisible" />
        <img src = "http://image.hdstockphoto.com/pics/previews/3b0/hd-landscapes-nature-trees-autumn-season-desktop-background-images-home-depot-landscapes-nature-landscapes-photo-high-definition-landscapes-3303062.jpg" class = "invisible" />
    </div>
</body>
</html>
 
*{
    transition: all ease .15s;
}
​
#menu li:hover{
    cursor: pointer;
    background: #b9d1c1;
}
​
#imagenes img{
    position: absolute;
}
​
.visible{
    opacity: 1;
}
​
.invisible{
    opacity: 0;
}
 
document.addEventListener("DOMContentLoaded", function(){
    var opciones = document.querySelectorAll("#menu li"),
        imagenes = document.querySelectorAll("#imagenes img"),
        numOpcion, actual;
    
    [].forEach.call(opciones, function(opcion){
        opcion.addEventListener("click", function(){
            numOpcion = [].indexOf.call(opciones, this);
            actual = document.querySelector(".visible") || null;
            
            if (actual){
                actual.className = "invisible";
            }
            
            imagenes[numOpcion].className = "visible";
        }, false);
    });
}, false);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Alexis88pro
0viewers