So im trying to get a linked text box in my photogallery.
I want it linked to each picture so i can put a different description for each one.
I have not done this kind of coding in a long time, so i don't know if i had to have a
div tag for each photo or not.
I was hoping to get the information box under the big picture viewer. Thanks for the help in advance.
Also, I am not a expert in java, so I dont know if that code is the best I have for my set up or not,
or if it is a messy code, so sorry about that if that is going to cause issues.
Here is my coding...
INDEX code
Code:
<html>
<body>
<div id="gallery">
<div id="thumbs">
<a href="javascript: changeImage(1);"><img src="images/RS1.png" alt="" /></a>
<a href="javascript: changeImage(2);"><img src="images/RS2.png" alt="" /></a>
<a href="javascript: changeImage(3);"><img src="images/SW1.png" alt="" /></a>
</div>
</div>
</div>
<div id="bigimages">
<div id="normal1">
<img src="images/bigimage1.jpg" alt=""/>
</div>
<div id="normal2">
<img src="images/bigimage2.jpg" alt=""/>
</div>
<div id="normal3">
<img src="images/bigimage3.jpg" alt=""/>
</div>
<div id="normal4">
<img src="images/bigimage4.png" alt=""/>
</div>
<div id="normal5">
<img src="images/bigimage5.png" alt=""/>
</div>
</div>
</div>
</body>
</html>
Javascript code:
Code:
function changeImage(current) {
var imagesNumber = 5;
for (i=1; i<=imagesNumber; i++) {
if (i == current) {
document.getElementById("normal" + current).style.display = "block";
} else {
document.getElementById("normal" + i).style.display = "none";
}
}
}
and CSS code:
Code:
body {
margin: 0;
padding: 0;
background: #222;
color: #EEE;
text-align: center;
font: normal 9pt Verdana;
}
a:link, a:visited {
color: #EEE;
}
img {
border: none;
}
#normal2, #normal3, #normal4, #normal5 {
display: none;
}
#gallery {
margin: 0 auto;
width: 800px;
}
#thumbs {
margin: 10px auto 10px auto;
text-align: center;
width: 800px;
}
#bigimages {
width: 770px;
float: canter;
}
#thumbs img {
width: 130px;
height: 130px;
}
#bigimages img {
border: 4px solid #555;
margin-top: 5px;
width: 750px;
}
#thumbs a:link, #thumbs a:visited {
width: 130px;
height: 130px;
border: 6px solid #555;
margin: 6px;
float: left;
}
#thumbs a:hover {
border: 6px solid #888;
}
Before you post, read our: 
