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 name="description" content="Get images from an array" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <ul id="classes">
    <li id="2011">2011</li>
    <li id="2012">2012</li>
    <li id="2013">2013</li>
  </ul>
  
  <div id="overlay"></div>
</body>
</html>
 
#classes li {
  background-color: #00AAFF;
  border: 1px solid #0099FF;
  border-radius: 5px;
  box-shadow: 1px 1px 5px rgba(0,100,255,0.5);
  color: white;
  cursor: pointer;
  display: inline-block;
  font-family: sans-serif;
  list-style-type: none;
  padding: 10px 20px;
}
​
#classes li:hover {
  background-color: #0099FF;
}
 
var classes = {
  2011: ['http://www.placekitten.com/100/100',
        'http://www.placekitten.com/g/100/100'],
  2012: ['http://flickholdr.com/100/100/sunrise',
        'http://flickholdr.com/100/100/',
        'http://www.placesheen.com/100/100'],
  2013: ['http://flickholdr.com/100/100/',
        'http://flickholdr.com/100/100/cat',
        'http://flickholdr.com/100/100/kitten',
        'http://flickholdr.com/100/100/lake']
};
​
jQuery(document).ready(function($){
  
  $('li').on('mouseover', function(e){
    $('#overlay').empty();
    var title = $('<h2>');
    title.text('Class of ' +  e.target.id);
    $('#overlay').append(title);
    $(classes[e.target.id]).each(function(idx, entry){
      var img = $('<img/>');
      img.attr('src', entry);
      $('#overlay').append(img);
    });
    
  });
  
});
Output

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

Dismiss x
public
Bin info
sunyatasattvapro
0viewers