Making Image Buttons On Select Few

So I'm doing a site, where the viewers will be able to go in and look at dresses that are for sale. When they first load the page, an image is put into the div "Dress" and thats the front of the dress. Underneath is four buttons that each have a class and the background images for the buttons are other sides of the dress. I'm using a database to store all the image paths to get to the different images of each dress. But now, when you click the drop down, it wants to use it as an "Image button". This is my code.. I'm not sure how to explain it, but I don't want it thinking the drop down is another a href tag for an image, but now it is an actual link.

<a target="_blank" rel="nofollow noreferrer" href="<?php echo $Front;?>"><button class="Front"></button></a>
<a target="_blank" rel="nofollow noreferrer" href="<?php echo $Back;?>"><button class="Back"></button></a>
<a target="_blank" rel="nofollow noreferrer" href="<?php echo $Side;?>"><button class="Side"></button></a>
<a target="_blank" rel="nofollow noreferrer" href="<?php echo $Other;?>"><button class="Other"></button></a>

<div id="Dress"><img src="" alt=""/></div>

<script>
var a = document.getElementsByTagName("a"),
popup = document.getElementById("Dress"),
img = document.getElementsByTagName("img")[0];

for(i = 0; i < a.length; i++)
{
   a[i].onclick = function(){
    popup.style.display="block";
    img.src = this.href;
    img.alt = this.innerHTML;
    return false;
}
}

I also have some of the drop down code.

<li><a target="_blank" rel="nofollow noreferrer" href="Prom.php">Prom</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="#">Ballgown</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="#">Special Occassion</a></li>

When these buttons are clicked to go to another page, in the div "Dress" it says the name of the link. Like Prom, or Ballgown, or Special Occassion. Is there a way I can edit my script maybe so it only checks these first four a href's?

This line:

var a = document.getElementsByTagName("a")

Is getting all of the a elements on the page including those in your drop down. You want to do something like this:

HTML:

<div id="DressButtons">
    <a target="_blank" rel="nofollow noreferrer" href="<?php echo $Front;?>"><button class="Front"></button></a>
    <a target="_blank" rel="nofollow noreferrer" href="<?php echo $Back;?>"><button class="Back"></button></a>
    <a target="_blank" rel="nofollow noreferrer" href="<?php echo $Side;?>"><button class="Side"></button></a>
    <a target="_blank" rel="nofollow noreferrer" href="<?php echo $Other;?>"><button class="Other"></button></a>
</div>

JavaScript:

var buttons = document.getElementById("DressButtons"),
    a = buttons.getElementsByTagName("a")