I'm trying to make a simple gallery for my website, I need to display an image thumbnail and a table side by side but I've got problems with the next button! I'm working on the image atm, but when I press next button it opens the image in a new windows, like if I clicked on the thumbnail! What's wrong?
<body>
<div id="page">
<div id="header">
<div class="title">title</div>
</div>
<div class="menu-wrap" style="position:relative; z-index:9999"> <nav class="menu">
<ul class="clearfix">
<li><a href="index.html">Home</a></li>
<li><a href="link1.html">link1</a></li>
<li><a href="link2.html">link2</a></li>
</ul>
</nav>
</div>
<div id="pageContent">
<div class="articleContent">
<div class="articleTitle">L'esterno della Cattedrale</div>
<div class="item-page" >
<a href="images/esterno/esterno01.jpg" target="_blank"><img id="immagine" src="images/esterno/esterno01.jpg" height="50" width="50" style="margin-left:15%;margin-top:5%" data-value="A"/></div>
<div id="tabella" style='float:left'><p> prova2</p></div>
<br><div class='button' onclick="next()">Next</div>
</div>
</div>
</div>
</div>
<div id="footer"></div>
</body>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'fade',
pauseTime: 5000
});
});
function next() {
var text = "";
var image = "";
var image = document.getElementById("immagine").getAttribute('data-value');
//alert(image);
switch(image) {
case "A":
text = "2";
image=' <a href="images/esterno/esterno02.jpg" target="_blank"><img src="images/esterno/esterno02.jpg" height="50" width="50" style="margin-left:15%;margin-top:5%" data-value="B"/>';
break;
case "B":
text = "3";
image=' <a href="images/esterno/esterno03.jpg" target="_blank"><img src="images/esterno/esterno03.jpg" height="50" width="50" style="margin-left:15%;margin-top:5%" data-value="C"/>';
break;
case "C":
text = "4";
image=' <a href="images/esterno/esterno04.jpg" target="_blank"><img src="images/esterno/esterno04.jpg" height="50" width="50" style="margin-left:15%;margin-top:5%" data-value="D"/>';
break;
default:
text = "default";
}
document.getElementById("immagine").innerHTML = image;
document.getElementById("tabella").innerHTML = text;
}
</script>
</body>
