We Keep Coding

I tried creating a image popup but failed badly here my script anyone can help me out

hello all I am working on image popup that appears after clicking on banner I tried some basic js concept but failed badly . looking forward HELP pps
"""
<!-- popup main -->
<div class="cover">
<div class="contents">
<img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/PIGEON_a37dee29-65ce-4314-b624-e468c334fc9d.jpg?v=1664194339" alt="gh" width="100%" height="100%" />
<a class="close" href="#">×</a>
</div>
</div>
<button href="#popup_flight_travlDil3" onclick="show('cover')">kk</button>
<a class="close_flight_travelDl" href="#">×</a>
<script>
$(function(){
$("button-link").click(function(){
$(".cover").fadeIn("300");
})
$(".cover,.close").click(function(){
$(".cover").fadeOut("300");
})
$(".contents").click(function(e){
e.stopPropagation();
})
})
</script>
<style>
.cover {
background: rgba(0, 0, 0, 0.7);
position: fixed;
display: none;
opacity: 100;
z-index: 5;
}
.contents {
background: #fff;
margin: 70px auto;
border: 5px solid #ccc;
border-radius: 30px;
position: relative;
z-index: 5;
padding: 10px;
width: 33%;
height: 10%;
}
.close {
position: absolute;
top: 30px;
right: 20px;
transition: all 200ms;
font-size: 95px;
font-weight: bold;
text-decoration: none;
color: #000000;
}
</style>
"""
LOOKING FOR SOLUTION THAT REPLACE BUTTON WITH THE A CLASS LINK OR ANYOTHER WAY ROUND

replacing button with an img tag and adding eventListener to open or close the popup
let btn = document.querySelector(".btn");
let cover = document.querySelector(".cover");
let closebtn = document.querySelector(".close");
btn.addEventListener("click", () => {
cover.classList.toggle("active")
})
closebtn.addEventListener("click", () => {
cover.classList.remove("active")
})
.cover {
background: rgba(0, 0, 0, 0.7);
position: fixed;
display: none;
opacity: 100;
margin-left: 100px;
z-index: 5;
}
.cover.active {
display: block;
}
.contents {
background: #fff;
margin: 70px auto;
border: 5px solid #ccc;
border-radius: 30px;
position: relative;
z-index: 5;
padding: 10px;
width: 33%;
height: 10%;
}
.close {
position: absolute;
top: -10px;
right: 10px;
transition: all 200ms;
font-size: 65px;
font-weight: bold;
text-decoration: none;
color: #000000;
background-color: transparent;
border: none;
}
<!-- popup main -->
<div class="cover">
<div class="contents">
<img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/PIGEON_a37dee29-65ce-4314-b624-e468c334fc9d.jpg?v=1664194339" alt="gh" width="100%" height="100%" />
<button class="close">×</button>
</div>
</div>
<img class="btn" src="https://images.unsplash.com/photo-1657299156538-e08595d224ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwzMXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt "">

Dropdown won't work when hovering nav bar

I've been having a problem with a dropdown menu option. The thing refuses to display when I hover "Store". I've already tried in different ways (in some I was almost lucky, in others not so much) but in the end nothing really worked for me.
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("tituloh").style.fontSize = "15px";
document.getElementById("tituloh").style.marginBottom = "70px";
document.getElementById("tituloh").style.top = "20px";
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "47px";
} else {
document.getElementById("tituloh").style.fontSize = "30px";
document.getElementById("tituloh").style.top = "35px";
document.getElementById("tituloh").style.marginBottom = "100px"
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "50px";
}
}
#body {
margin: 0px;
}
#remove {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
}
.order {
display: inline-block;
}
#remove .opt {
display: inline-block;
color: white;
text-align: center;
font-size: 24px;
padding: 14px 16px;
background-color: black;
text-decoration: none;
}
#remove .opt:hover,
.dropmenu:hover .dropbutton {
background-color: white;
color: black;
}
.dropmenu {
float: right;
}
.dropmenu .dropbutton {
font-size: 24px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropcont {
position: absolute;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
display: none;
}
.dropcont .dropitem {
text-decoration: none;
width: 150px;
height: 30px;
margin: 5px 0;
padding-top: 5px;
padding-left: 5px;
display: inline-block;
text-align: left;
}
.dropcont a {
text-decoration: none;
color: black;
font-size: 24px;
}
.dropcont a:hover {
text-decoration: underline;
transition: 0.5s;
}
.dropmenu:hover .dropcont {
display: block;
}
#header {
left: 0;
top: 0;
text-align: center;
padding: 20px 5px;
padding-bottom: 0px;
position: fixed;
width: 100%;
margin: 0px;
padding-left: 0px;
transition: 0.2s;
background-color: black;
background-image: url(header/AvettBrothers-loja.jpg);
background-repeat: no-repeat;
background-position: 0 10%;
background-size: cover;
z-index: 1;
}
#tituloh {
position: relative;
top: 35px;
text-shadow: -5px 5px 10px #000000;
font-size: 30px;
color: white;
transition: 0.3s;
margin-bottom: 100px;
}
.sales {
margin-top: 300px;
}
.thumbnails {
width: 50%;
margin: 0 auto;
text-align: center;
}
#tshirts,
#casacos,
#posters,
#acessorios,
#projects,
#kids {
position: relative;
display: inline;
border: solid red;
padding: 20px 0;
margin-bottom: 100px;
}
img.contrast {
margin: 20px 10px;
filter: contrast(70%) opacity(90%);
border: solid blue;
}
.textimgcentro {
position: absolute;
left: 0;
top: -150%;
width: 100%;
font-size: 30px;
text-align: center;
color: white;
text-shadow: -10px 5px 10px #000000;
border: solid black;
}
#top {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" ; http-equiv="refresh" content="5">
<title>Loja</title>
<link rel="stylesheet" type="text/css" href="loja/loja.css">
<script type="text/javascript" src="loja/loja.js"></script>
</head>
<body>
<div id="header">
<div id="tituloh">
<h1>Store</h1>
</div>
<ul id="remove">
<li class="order">Home</li>
<li class="order">About</li>
<li class="order">Albuns</li>
<li class="order">Tours</li>
<li class="dropmenu, order">
<a href="#link" class="dropbutton, opt">
Store
</a>
<div class="dropcont">
T-Shirts<br>
Jackets<br>
Posters<br>
Accessories<br>
Side Projects<br>
Kids<br>
</div>
</li>
<li class="order">Forum</li>
</ul>
</div>
<br/>
<br/>
<br/>
<div class="sales">Sales</div>
<div class="thumbnails">
<div id="tshirts">
<img src="loja/thumbnails/tshirts.jpg" class="contrast">
<div class="textimgcentro">
T-Shirts
</div>
</div>
<div id="casacos">
<img src="loja/thumbnails/casacos.jpg" class="contrast">
<div class="textimgcentro">
Jackets
</div>
</div>
<div id="posters">
<img src="loja/thumbnails/posters.jpg" class="contrast">
<div class="textimgcentro">
Posters
</div>
</div>
<div id="acessorios">
<img src="loja/thumbnails/acessorio.jpg" class="contrast">
<div class="textimgcentro">
Accessories
</div>
</div>
<div id="projects">
<img src="loja/thumbnails/project.jpg" class="contrast">
<div class="textimgcentro">
Side Projects
</div>
</div>
<div id="kids">
<img src="loja/thumbnails/kids.jpg" class="contrast">
<div class="textimgcentro">
Kids
</div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<div class="bestsell">
<div id="top">
<h1>Top Products</h1>
</div>
</div>
<hr id="cont"> Contactos Oficiais: <br /><br />
<img src="loja/Contactos/facebook.png" ; height="50" ; width="50" ; title="Facebook" ; alt="Link para Facebook">
<img src="loja/Contactos/insta.png" ; height="50" ; width="50" ; title="Instagram" ; alt="Link para Instagram">
<img src="loja/Contactos/twitter.png" ; height="50" ; width="50" ; title="Twitter" ; alt="Link para Twitter">
</body>
</html>
How can I fix this?
Also, how do I make it so that, while hovering the dropdown menu, "Store" remains with a white background and black text?
Thank you!

Realign buttons

JavaScript
$(function(){
$('.select-another-button').each(function(){
$(this).bind('click', function(e) {
$(this).attr('disabled','true'); //disables the button
$('#overlay').show(); //after disabling show the overlay for hover
setTimeout(function(){
$(this).attr('disabled','false'); //enables after 5mins
$('#overlay').hide(); //hide the overlay
}, 300000);
e.preventDefault();
fileBrowser(this);
return false;
});
});
});
$("#overlay").hover(function(){
$('#message').show();
},function(){
$('#message').hide();
});
HTML
<div class="card-title">
<div class="title-actions">
<a href="#" id="id_select_request_document" title="Select file(s)" class="btn btn-icon select-button"
data-turbolinks="false" data-save-label="Ok" data-close-label="Cancel" data-copy-to="9"
data-reload="true" data-url="/documents/select/8/">
<i class="material-icons">folder</i>
</a>
<a href="#" id="id_upload_request_document" title="Upload file(s)" class="btn btn-icon upload-button"
data-turbolinks="false" data-url="/documents/upload/9/"
data-complete-post="/requests/validate-requirements/2/" data-max-uploader-connections="1"
style="position: relative; overflow: visible; direction: ltr;">
<i class="material-icons">cloud_upload</i>
<i style="overflow: hidden;display: block;position: absolute;top: 0;left: 0;width: 35px;height: 35px;"><input
multiple="multiple" type="file" name="file"
style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"></i>
</a>
<div class="wrapper">
<div id="overlay"></div>
<a href="#" title="Send email - rejected file(s)" class="btn btn-icon select-another-button"
data-url="/messaging/send/2/">
<i class="material-icons">assignment_late</i>
<div class="alert alert-success" id="send-message" style="display: none;">
<p>
The message was sent to the client. Please wait 5 minutes <br> before sending the message again.
</p>
</div>
</a>
</div>
<i class="material-icons">settings</i>
</div>
<h5>Request documents</h5>
</div>
CSS
.title-actions {
float: right;
height: 50px;
margin-top: 13px;
}
.title-actions a {
transition: background 0.3s ease;
}
.title-actions a.btn {
padding: 2px 14px;
line-height: 26px;
max-height: 28px;
position: relative;
top: -1px;
margin-left: 8px;
}
.title-actions a:hover {
background: #4382B5;
}
.title-actions span {
color: #444;
background: #E6E6E6;
padding: 6px 10px;
border-radius: 3px;
float: none;
position: relative;
margin-left: 6px;
}
.title-actions .btn {
padding: 2px 14px;
line-height: 26px;
max-height: 28px;
position: relative;
top: -1px;
margin-left: 8px;
}
.title-actions .btn-icon {
background: transparent;
position: relative;
color: #3E5366;
text-align: center;
display: inline-block;
padding: 0 !important;
transition: color 0.3s ease;
box-shadow: none !important;
margin-top: -16px;
margin-left: 6px;
}
.title-actions .btn-icon i {
font-size: 35px;
line-height: 20px;
position: relative;
top: 12px;
}
.title-actions .btn-icon:hover {
color: #4382B5;
background: transparent;
}
.title-actions .badge .material-icons {
font-size: 1.2em;
line-height: 0;
position: relative;
top: 4px;
}
In the html block, I added the
<div class="wrapper">
<div id="overlay"></div>
<a href="#"
title="{% trans "Send email - rejected file(s)" %}"
class="btn btn-icon select-another-button"
data-url="{% url "messaging:send" request_id=object.pk %}">
<i class="material-icons">assignment_late</i>
<div class='alert alert-success' id='send-message' style="display: none;">
<p>
The message was sent to the client. Please wait 5 minutes <br> before sending the message again.
</p>
</div>
</a>
</div>
In fact, I didn't add everything. I just did add the first two div tags, and I got a little issue with the different button from this code. It changed the old line of to the new line of , but I don't even know how to fix it. How could I modify my code to bring back two the old line of buttons? I think I could style with css, but I can't say how because I don't have a lot of experience with it.

.wrapper is a block element, so it won't stay beside it's siblings. All of those siblings have .btn-icon which sets display: inline-block. You could either add .btn-icon to the .wrapper element so it will display inline-block (although then it will inherit the rest of the .btn-icon styles), or just set .wrapper to display: inline-block; (what I did)
.title-actions {
float: right;
height: 50px;
margin-top: 13px;
}
.title-actions a {
transition: background 0.3s ease;
}
.title-actions a.btn {
padding: 2px 14px;
line-height: 26px;
max-height: 28px;
position: relative;
top: -1px;
margin-left: 8px;
}
.title-actions a:hover {
background: #4382B5;
}
.title-actions span {
color: #444;
background: #E6E6E6;
padding: 6px 10px;
border-radius: 3px;
float: none;
position: relative;
margin-left: 6px;
}
.title-actions .btn {
padding: 2px 14px;
line-height: 26px;
max-height: 28px;
position: relative;
top: -1px;
margin-left: 8px;
}
.title-actions .btn-icon {
background: transparent;
position: relative;
color: #3E5366;
text-align: center;
display: inline-block;
padding: 0 !important;
transition: color 0.3s ease;
box-shadow: none !important;
margin-top: -16px;
margin-left: 6px;
}
.title-actions .btn-icon i {
font-size: 35px;
line-height: 20px;
position: relative;
top: 12px;
}
.title-actions .btn-icon:hover {
color: #4382B5;
background: transparent;
}
.title-actions .badge .material-icons {
font-size: 1.2em;
line-height: 0;
position: relative;
top: 4px;
}
.wrapper {
display: inline-block;
}
<div class="card-title">
<div class="title-actions">
<a href="#" id="id_select_request_document" title="Select file(s)" class="btn btn-icon select-button" data-turbolinks="false" data-save-label="Ok" data-close-label="Cancel" data-copy-to="9" data-reload="true" data-url="/documents/select/8/">
<i class="material-icons">folder</i>
</a>
<a href="#" id="id_upload_request_document" title="Upload file(s)" class="btn btn-icon upload-button" data-turbolinks="false" data-url="/documents/upload/9/" data-complete-post="/requests/validate-requirements/2/" data-max-uploader-connections="1" style="position: relative; overflow: visible; direction: ltr;">
<i class="material-icons">cloud_upload</i>
<i style="overflow: hidden;display: block;position: absolute;top: 0;left: 0;width: 35px;height: 35px;"><input
multiple="multiple" type="file" name="file"
style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"></i>
</a>
<div class="wrapper">
<div id="overlay"></div>
<a href="#" title="Send email - rejected file(s)" class="btn btn-icon select-another-button" data-url="/messaging/send/2/">
<i class="material-icons">assignment_late</i>
<div class="alert alert-success" id="send-message" style="display: none;">
<p>
The message was sent to the client. Please wait 5 minutes <br> before sending the message again.
</p>
</div>
</a>
</div>
<i class="material-icons">settings</i>
</div>
<h5>Request documents</h5>
</div>

This may be a slightly odd answer to your question. Assuming you wanted them into groups on the top rightith your 4 icons. (Given i dont have full entirely experience with the mobile-html platform) Here is a javascript you can use to eliminate odd issues:
//this var is short and clean coded to help diagnose some issues
//for this example, you can store values as an array
//these arrays with your content will be used to make cloned sections
//with different icons
var
icon = ["folder", "cloud", "case", "settings"],
imgbg = ["folder.jpg", "cloud.jpg", "case.jpg", "setting.jpg"],
frame = ""
;
for (i = 0; i < icon.length; i++) {
frame += "<div class='" +
icon[i] +
"'style='background-image:url(assets/" +
imgbg[i] +
");'></div>"
;
//which creates the code below as cloning
//"<div class="icon[i]" style="background-image:url(imgbg[i]);"></div>"
}
document.getElementById("demo").innerHTML = frame;
//this returns the clone code into a desired tml empty target like:
//<div id="demo"></div>
//then you can edit the css for float right as well as display top right
//to keep it at top right use this css
.display-top-right{
position:absolute;
top:0;
right:0;
float:right;
z-index:1;
}

how to show tick mark and an overlay on image while clicking an image, but when i click other image it should hide and display the same on new image?

i want the image to be overlay-ed with any color and give a tick mark on it(As it is selected) allowing only one image at a time. while clicking other image it should hide the previous one and show tick and overlay on new image.
<div class="grid-two imageandtext">
<figure>
<img src="assets/images/painting.jpg" class="img-thumbnail">
<div class="caption">
<p>Painting</p>
</div>
<div class="imageandtext image_grid">
<img src="assets/images/photography.jpg" class="img-thumbnail" >
<div class="caption1">
<p>Photography</p>
</div></div>
</figure>
</div>
it should display like below image
now it is working like this
https://jsfiddle.net/liza_susan/L8jyum77/

Here is a start, using a pseudo element for the cover, a label and an input of type radio to take care of the selection.
I wrapped the image in a label, and when clicked, it simply checks the input.
In the CSS, when an input is checked, the .image_grid input:checked + .caption::after rule apply the properties to cover and show the check mark.
Updated fiddle
.caption {
position: absolute;
top: 0;
left: 5px; /* changed to match image_grid padding */
height: 100%;
width: calc(100% - 5px); /* changed to match image_grid padding */
padding: 0 10px;
box-sizing: border-box;
pointer-events: none;
}
.caption p {
display: inline-block;
padding: 10px;
color: #fff;
background: rgba(0,0,0,0.5);
font-family: 'Myriad Pro regular';
font-size: 15.31px;
}
.imageandtext {
position: relative;
}
.image_grid {
display: inline-block;
padding-left: 5px;
}
.image_grid img { /* added rule */
display: block;
}
.image_grid input {
display: none;
}
.image_grid input:checked + .caption {
background: rgba(0,0,0,0.5);
}
.image_grid input:checked + .caption::after {
content: '✔';
position: absolute;
top: 50%; left: 50%;
width: 70px; height: 70px;
transform: translate(-50%,-50%);
color: white;
font-size: 60px;
line-height: 80px;
text-align: center;
border: 2px solid white;
border-radius: 50%;
}
<div class="grid-two imageandtext">
<div class="imageandtext image_grid">
<label for="selimg1">
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
</label>
<input type="radio" name="selimg" id="selimg1">
<div class="caption">
<p>Painting</p>
</div>
</div>
<div class="imageandtext image_grid">
<label for="selimg2">
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
</label>
<input type="radio" name="selimg" id="selimg2">
<div class="caption">
<p>Photography</p>
</div>
</div>
</div>
Based on a comment, here is a version where the caption is positioned inside the label, as a span (as label can only have inline element as children).
With this one doesn't need unique id on the input and can drop the for attribute, and no need to compensate for any padding and/or margin set on the image_grid.
Updated fiddle
Stack snippet
.caption {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
pointer-events: none;
}
.caption span {
display: inline-block;
padding: 10px;
color: #fff;
background: rgba(0,0,0,0.5);
font-family: 'Myriad Pro regular';
font-size: 15.31px;
}
.image_grid {
display: inline-block;
padding-left: 25px;
}
.image_grid label {
position: relative;
display: inline-block;
}
.image_grid img {
display: block;
}
.image_grid input {
display: none;
}
.image_grid input:checked + .caption {
background: rgba(0,0,0,0.5);
}
.image_grid input:checked + .caption::after {
content: '✔';
position: absolute;
top: 50%; left: 50%;
width: 70px; height: 70px;
transform: translate(-50%,-50%);
color: white;
font-size: 60px;
line-height: 80px;
text-align: center;
border: 2px solid white;
border-radius: 50%;
}
<div class="grid-two imageandtext">
<div class="imageandtext image_grid">
<label>
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
<input type="radio" name="selimg">
<span class="caption">
<span>Painting</span>
</span>
</label>
</div>
<div class="imageandtext image_grid">
<label>
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
<input type="radio" name="selimg">
<span class="caption">
<span>Painting</span>
</span>
</label>
</div>
</div>

How about adding an image when someone hovers over it.
i.e.
.image-thumbnail:hover {
background-image: <path to image>;
background-repeat: no-repeat;
}

How about this JQuery function:
$('.image_grid').click(function() {
$('.image_grid img:nth-of-type(2)').hide();
$(this).children('img:nth-of-type(2)').show();
});
$('.image_grid').click(function() {
$('.image_grid img:nth-of-type(2)').hide();
$(this).children('img:nth-of-type(2)').show();
});
.grid-two {
width: 50%;
display: inline;
}
.caption1 {
position: absolute;
top: -51px;
left: 11px;
width: 100%;
color: #000;
font-family: Myriad Pro regular;
font-size: 15.31px;
}
.imageandtext {
position: relative;
}
.image_grid {
display: inline;
padding-left: 5px;
}
.absolute {
border: 1px solid black;
position: absolute;
left: 0px;
display: none;
width: 50%;
margin: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="grid-two imageandtext">
<figure>
<div class="imageandtext image_grid">
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
<div class="caption1">
<p>Painting</p>
</div>
<img src="https://i.stack.imgur.com/Kg1Do.png" class="absolute">
</div>
<div class="imageandtext image_grid">
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
<div class="caption1">
<p>Photography</p>
</div>
<img src="https://i.stack.imgur.com/Kg1Do.png" class="absolute">
</div>
</figure>
</div>
JSFiddle

change image to another image

im trying to change a image to another image when the user clicks on the options they have of images or colors, i have a picture below to show what im trying to do
this are the links for second images
http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg
http://s4.postimg.org/6ualhzpex/HM10_T_BACKLOGOLESS_BK.jpg
html
<div class="container">
<p class="img-main">
<a href="#" class="overlaybox-img">
<img src="http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg">
</a> </p>
<div id="colorsAndAltContainer">
<ul class="">
<li class="defaultColor selected">
<div class="inner">
<div class="description">BLACK</div>
<div class="rgbColor" data-color="000000" style="background-color: #000000"></div>
</div>
</li>
<li>
<div class="inner">
<div class="description">WHITE</div>
<div class="rgbColor" data-color="FFFFFF" style="background-color: #FFFFFF"></div>
</div>
</li>
<div class="altImages">
<ul class="alternativeImages">
<li class="selected">
</li>
<li>
<img alt="T-Shirt and Jersey" class="alternativeImage" src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" >
</li>
</ul>
</div>
</ul>
</div>
</div>
css:
.container {
min-height: 565px;
width: 878px;
margin: 0 auto;
padding-top: 220px;
position: relative;
}
body{
background-color: #000;
}
.img-main {
margin-bottom: 10px;
text-align: center;
float: left;
margin-top: 0px;
}
#colorsAndAltContainer {
position: relative;
top: 0;
right: 0;
width: 70px;
height: 300px;
float: left;
margin-left: 6px;
}
.inner {
cursor: pointer;
}
.description {
display: none;
}
.rgbColor {
border: 1px solid #cbcbcb;
width: 13px;
height: 13px;
}
.selectColor {
float: left;
}
.selectColor ul {
float: left;
margin-right: 6px;
}
ul {
list-style: none;
padding: 0;
margin-top: 0px;
}
.altImages {
position: absolute;
width: 70px;
bottom: 0;
right: 0;
}
.alternativeImages {
bottom: 0;
}
.alternativeImages li {
cursor: pointer;
margin-top: 6px;
}
img {
display: block;
}

First assign an ID to your T-shirt image:
<img id="t-shirt" alt="T-Shirt and Jersey" class="alternativeImage" src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" >
Then on your black & white buttons assign a data attribute with the URL of the image the t-shirt will be changed to:
<div class="inner" data-image-id="http://urltoblackimage.jpg"></div>
Then use jQuery to change the image src on click:
$('div.inner').click(function() {
var image = $(this).attr('data-image-id');
$('#t-shirt').attr('src', image);
});
Maybe give your div class="inner" a better trigger name with an ID or a more descriptive class name to avoid conflicts.

Here is the simplest way to do it in plain Javascript.
function switchImages(){
if(document.getElementById("mainImage").src != "http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg") {
document.getElementById("mainImage").src = "http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg";
document.getElementById("smallImage").src = "http://s4.postimg.org/6ualhzpex/HM10_T_BACKLOGOLESS_BK.jpg";
}else{
document.getElementById("mainImage").src = "http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg";
document.getElementById("smallImage").src = "http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg";
}
}
.container {
min-height: 565px;
width: 878px;
margin: 0 auto;
padding-top: 220px;
position: relative;
}
body{
background-color: #000;
}
.img-main {
margin-bottom: 10px;
text-align: center;
float: left;
margin-top: 0px;
}
#colorsAndAltContainer {
position: relative;
top: 0;
right: 0;
width: 70px;
height: 300px;
float: left;
margin-left: 6px;
}
.inner {
cursor: pointer;
}
.description {
display: none;
}
.rgbColor {
border: 1px solid #cbcbcb;
width: 13px;
height: 13px;
}
.selectColor {
float: left;
}
.selectColor ul {
float: left;
margin-right: 6px;
}
ul {
list-style: none;
padding: 0;
margin-top: 0px;
}
.altImages {
position: absolute;
width: 70px;
bottom: 0;
right: 0;
}
.alternativeImages {
bottom: 0;
}
.alternativeImages li {
cursor: pointer;
margin-top: 6px;
}
img {
display: block;
}
<div class="container">
<p class="img-main">
<a href="#" class="overlaybox-img">
<img id="mainImage" src="http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg">
</a> </p>
<div id="colorsAndAltContainer">
<ul class="">
<li class="defaultColor selected">
<div class="inner">
<div class="description">BLACK</div>
<div onclick="switchImages();" class="rgbColor" data-color="000000" style="background-color: #000000"></div>
</div>
</li>
<li>
<div class="inner">
<div class="description">WHITE</div>
<div onclick="switchImages();" class="rgbColor" data-color="FFFFFF" style="background-color: #FFFFFF"></div>
</div>
</li>
<div class="altImages">
<ul class="alternativeImages">
<li class="selected">
</li>
<li>
<img onclick="switchImage();" id="smallImage" alt="T-Shirt and Jersey" class="alternativeImage" src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" >
</li>
</ul>
</div>
</ul>
</div>
</div>

Here's a simple way without changing anything in your existing code.
<script>
$().ready(function(){
$('#colorsAndAltContainer li').on('click',function()
{
if($(this).find('.rgbColor').data('color') === "000000")
{
$('a.overlaybox-img img').attr("src","http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg");
$('.alternativeImage').attr("src","http://s4.postimg.org/6ualhzpex/HM10_T_BACKLOGOLESS_BK.jpg");
}
else if($(this).find('.rgbColor').data('color') === "FFFFFF")
{
$('a.overlaybox-img img').attr("src","http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg");
$('.alternativeImage').attr("src","http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg");
}
});
$('.alternativeImage').on('click',function()
{
var smallImageUrl = $(this).attr("src");
var mainImageUrl = $(".img-main img").attr("src");
$(this).attr("src",mainImageUrl);
$(".img-main img").attr("src",smallImageUrl);
$(".img-main img").css("width","300px");
});
});
</script>
Working link : http://jsfiddle.net/b2c5e19h/5/

Add an id to the relevant <a> tag, access it with
document.getElementById('idOfTag').setAttribute('href')='someOtherImage.jpg';
This would just be several lines within a javascript function. Make the button, or whatever the user is clicking, listen and execute this function by adding onclick="yourFunctionsName()
No jquery necessary!