As a beginner in CSS, HTML, and JavaScript, I came across a code snippet to create a pattern of hexagons with images (refer to the first code below). My goal is to change the image displayed on a clicked hexagon to another picture (see second code).
First Code: The following includes JavaScript, CSS, and HTML.
//My JavaScript logic remains to be determined/**
* Generate repeating hexagonal pattern with CSS3 (SO) - 1 element/ hexagon !!!
* http://stackoverflow.com/q/10062887/1397351
*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.row {
margin: -18% 0;
text-align: center;
}
/* remaining CSS styling omitted for brevity */
<!-- content to be placed inside <body>...</body> -->
<div class='row'>
<div class='hexagon'></div>
</div>
<!-- additional row elements omitted for brevity -->
Second Code: Below contains JavaScript, CSS, and HTML.
var bodyObj, className, index;
bodyObj = document.getElementById('body');
index = 1;
className = [
'imageOne',
'imageTwo'
];
function updateIndex() {
if (index === 0) {
index = 1;
} else {
index = 0;
}
}
// JavaScript event listener not fully shown for brevity
html,
body,
#body {
height: 100%;
width: 100%;
}
/* remaining CSS styles for classes imageOne and imageTwo are omitted */
<div id="body" class="imageOne"></div>