<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> <style type="text/css"> .subImage{ height:100px; width:123px; border: 1px solid #000; } </style> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> </div> </nav> <div class="col-md-6 well"> <hr style="border-top:1px dotted #ccc;"> <div id="gallery" onclick="selectedImage(event)"> <img class="subImage" src="images/image 1.jpg" /> <img class="subImage" src="images/image 2.jpg" /> <img class="subImage" src="images/image 3.jpg" /> <img class="subImage" src="images/image 4.jpg" /> <img class="subImage" src="images/image 5.jpg" /> </div> </div> </body> </html>
var images = document.getElementById("gallery").getElementsByTagName("img"); function selectedImage(e){ e = event || window.event; var target = e.target || e.srcElement; if(target.tagName == "IMG"){ document.getElementById("feature").src = target.getAttribute("src"); } } for(var i=0; i < images.length; i++){ images[i].onmouseover = function(){ this.style.cursor = 'hands'; this.style.borderColor = '#1a1aff'; } images[i].onmouseout = function(){ this.style.cursor = 'pointer'; this.style.borderColor = 'grey'; } }