I am currently creating a basic photo gallery where hovering over a thumbnail displays an enlarged photo below it.
My goal is to also have text displayed inside a white text box when hovering over each thumbnail, with unique descriptions for each. I need help with a JavaScript code as I am not very familiar with jQuery.
Here is the code I have so far. Any assistance would be greatly appreciated!
<!DOCTYPE html>
<head>
<title>Photo Gallery</title>
<style type="text/css">
body {
margin-top: 100px;
}
input {
height: 40px;
word-wrap: break-word;
}
.thumbnails img {
height: 100px;
border: 4px solid #151515;
padding: 1px;
margin: 0 10px 10px 0;
margin-top: 40px;
}
.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}
.preview img {
border: 4px solid #151515;
padding: 1px;
width: 800px;
}
a:hover + input {
display: block;
}
</style>
</head>
<body>
<body bgcolor="#CCCCCC">
<form name="bgcolorForm" >
<select onChange="if(this.selectedIndex!=0)
document.bgColor=this.options[this.selectedIndex].value">
<option value="choose">Set background color
<option value="c8e4f8">Blue
<option value="CCCCCC">Grey
<option value="FFFFFF">White
<option value="FBFBEF">Cream
</select>
</form>
<br>
<form id="font_form">
<select id ="font" onChange="setFont()">
<option value="choose">Set font style
<option style="font-family: 'Verdana'">Verdana</option>
<option style="font-family: Arial">Arial</option>
<option style="font-family: 'Times New Roman'">Times New Roman</option>
</select>
</form>
<div class="preview" align="center">
<img id="preview" src="http://i60.tinypic.com/2qjj62b.jpg" alt="No Image Loaded"/>
</div>
</br>
</div>
<input style="width:800px" id="Text" type="text" float="right" value="Text"/>
<div class="gallery" align="center">
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" id="img1" src="http://i60.tinypic.com/2qjj62b.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img2.src" id="img2" src="http://i60.tinypic.com/mb4c21.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img3.src" id="img3" src="http://i61.tinypic.com/35avvpw.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img4.src" id="img4" src="http://i60.tinypic.com/29qnjme.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img5.src" id="img5" src="http://i62.tinypic.com/zkmvd2.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img6.src" id="img6" src="http://i61.tinypic.com/oqezus.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img7.src" id="img7" src="http://i57.tinypic.com/1tx6oj.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img8.src" id="img8" src="http://i58.tinypic.com/143onsj.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img9.src" id="img9" src="http://i61.tinypic.com/2l16qf.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img0.src" id="img0" src="http://i61.tinypic.com/21l0own.jpg" alt="Image Not Loaded"/>
</div></br>
<script type="text/javascript">
var images = document.getElementsByClassName('thumbnails')[0].getElementsByTagName('img');
for (i = 0; i < images.length; i++) {
images[i].onmouseover = function () {
document.getElementById('preview').src = this.src;
}
}
function setFont()
{
var selectFont = document.getElementById("font");
if (selectFont) {
var selectFontValue = selectFont.options[selectFont.selectedIndex].value;
if (selectFontValue == "Verdana") {
document.getElementById("Text").style.font = "20px Verdana, sans-serif";
}
else if (selectFontValue == "Arial") {
document.getElementById("Text").style.font = "20px Arial,sans-serif";
}
else if (selectFontValue == "Times New Roman") {
document.getElementById("Text").style.font = "20px Times New Roman,serif";
}
else {
document.getElementById("Verdana").style.font = "20px Verdana, sans-serif";
}
}
}
</script>
</body>
</html>