I want to display some text inside a button but only when this one is hover using HTML or CSS.
When the button isn't hover, the main text it a title (I've already somthing working), and when you hover this with your mouse, the title slides to the top and some additionnal text appers like a description and a little "Visit >>" at the end.
I've putted my code and the thing that I need to have on a codepen page here (and at the end of this message) : https://codepen.io/floksyyt/pen/WNrVjJd
Thanks for your future help !
.btn {
opacity: 0.6;
border-radius: 8px;
background-color: #f4511e;
border: none;
color: #ffffff;
text-align: center;
font-size: 28px;
padding: 20px;
width: 100%;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.btn span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.btn span:after {
content: "\00bb";
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.btn:hover span {
padding-right: 25px;
}
.btn:hover span:after {
opacity: 1;
right: 0;
}
.btn:hover {
opacity: 1;
}
<h1>Bienvenue chez Floksy !</h1>
<h2>Vous vous trouvez actuellement sur la plateforme de sélection de sous-site internet de Floksy.</h2>
<table width="100%">
<tr>
<td width="5%"></td>
<td width="25%">
<center>Pour venir voir mon profil professionnel ainsi que mes gros projets
</td>
<td width="2.5%"></td>
<td width="25%">
<center>Si vous souhaitez découvrir ou en apprendre plus sur mes aventures sur Youtube et Twitch
</td>
<td width="2.5%"></td>
<td width="25%">
<center>Si vous veniez à propos de mes services d'informatique et électronique
</td>
<td width="5%"></td>
</tr>
<tr>
<td></td>
<td>
<center><button class="btn" onclick="window.location.href='somewhere';"><span>Espace Professionnel </span></button>
</td>
<td></td>
<td>
<center><button class="btn" onclick="window.location.href='somewhere';"><span>Espace Création Web </span></button>
</td>
<td></td>
<td>
<center><button class="btn" onclick="window.location.href='somewhere';"><span>Espace Services </span></button>
</td>
<td></td>
</tr>
</table>
<p>Example for one button :<br /><br />
Title<br />(always visible)
<hr>
Description<br />(only visible by hover button)
<hr>
Visit >><br />(only visible by hover button)
</p>
There are several ways to accomplish your task (assuming I understand project goals).
One way to is use the 'onmouseover' and 'onmouseout' events on the button
A second way is to use JS to alter the class assignments of the hidden messages.
This is also accomplished with the same events a before except assigned to an element event listener via the 'addEventListener' function assigned to the button elements.
Here is an example of both methods.
<!DOCTYPE html><html lang="en"><head><title> Test Page </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
<!-- For: https://stackoverflow.com/questions/63200448/display-some-text-inside-a-button-when-hover -->
<style>
.hide { display: none; }
#btn1Msg { background-color: pink; width: 15em; }
#btn2Msg { background-color: lime; width: 15em; }
</style>
</head><body>
First button uses only HTML for effect<br>
<button id="btn0"
onmouseOver="document.getElementById('demo').classList.remove('hide')"
onmouseOut="document.getElementById('demo').classList.add('hide')"
>First Button Description</button>
<pre id='demo' class="hide">Message to be displayed on First button hover</pre>
<hr />
Second and Third buttons use JS to achieve effect
<p />
<input type="button" id="btn1" value="Second Button Description">
<div id='btn1Msg' class="hide">Message to be displayed on Second button hover</div>
<p />
<input type="button" id="btn2" value="Third Button Description">
<div id='btn2Msg' class="hide">Message to be displayed on Third button hover</div>
<script>
console.clear();
const hoverShow = (IDS) => { document.getElementById(IDS+'Msg').classList.remove('hide') };
const hoverHide = (IDS) => { document.getElementById(IDS+'Msg').classList.add('hide') };
function init() {
let sel = document.querySelectorAll('input[type=button]');
for (let el of sel) {
el.addEventListener('mouseover', function(event) { hoverShow(event.currentTarget.id) }, false );
el.addEventListener('mouseout', function(event) { hoverHide(event.currentTarget.id) }, false );
}
} init();
</script>
</body></html>
Related
I want that the :hover in CSS will work on the whole row in the table at once (if the mouse will be over the image, so the hover will work on both text and pic - same as if the mouse is over the text), but it only work with specific object (if the mouse is over the text the hover catch only the text without the pic)
.linkFooter {
opacity: 80%;
color: white;
vertical-align: top;
}
.linkFooter:hover {
opacity: 100%;
}
.linkFooter:link {
text-decoration: none;
}
.iconContentFooter {
width: 25px;
height: 25px;
padding-bottom: 10px;
}
<table>
<tr class="linkFooter">
<td>
<a href="tel:+972503303397">
<img src="pics/phone.png" class="iconContentFooter">
</a>
</td>
<td>
<a href="tel:+972*********" class="linkFooter">
<b>
טלפון:
</b> ***-***-****
</a>
</td>
</tr>
<tr class="linkFooter">
<td>
<a href="mailto:****#gmail.com">
<img src="pics/mail.png" class="iconContentFooter">
</a>
</td>
<td>
<a href="mailto:lahavadam#gmail.com" class="linkFooter">
<b>
אימייל:
</b> ****#gmail.com
</a>
</td>
</tr>
</table>
OP Comment:
that the hover works only about the specific object (text/pic) and not the whole row
So for that you need to change the hover from parent to child
Note: remove the class from a because its the same class of tr and it will conflict the styles
.linkFooter td {
vertical-align: top;
}
.linkFooter a {
text-decoration: none;
opacity: 40%;
color: red;
}
.linkFooter a:hover {
opacity: 100%;
}
.iconContentFooter {
width: 25px;
height: 25px;
padding-bottom: 10px;
}
<table>
<tr class="linkFooter">
<td>
<a href="tel:+972503303397">
<img src="https://picsum.photos/200/300" class="iconContentFooter">
</a>
</td>
<td>
<a href="tel:+972*********">
<b>
טלפון:
</b> ***-***-****
</a>
</td>
</tr>
<tr class="linkFooter">
<td>
<a href="mailto:****#gmail.com">
<img src="https://picsum.photos/200/300" class="iconContentFooter">
</a>
</td>
<td>
<a href="mailto:lahavadam#gmail.com">
<b>
אימייל:
</b> ****#gmail.com
</a>
</td>
</tr>
</table>
I am trying to make a table with drop-down info tabs that appear when you scroll over a term.
My initial approach was to make these info tabs not display with display : none css rule, then
when the user hovers the mouse over the corresponding text, the the info tab appears by altering display property to display: block.
My problem is that I can't figure out how to override the default behavior for the containing/parent element, and the table resizes to fit the newly appeared element, then resizes back to normal when the user scrolls away. I experimented with z-index (setting the td to z-index: 1 and info tab to z-index:2) as well as visibility:hidden -> visibility:visible vs display:none -> display:block, but no luck with either of those. I also tried setting the max height of the td element to 200px, but it seems to grow past that regardless.
Here is the source code for what i have so far:
/* In an attempt to prevent row from expanding automatically */
td {
max-height: 100px;
}
.card-body {
display: none;
border: 2px solid black;
height: 300px;
width: 400px;
z-index: 2;
}
.card-trigger:hover+.card-body {
display: inline-block;
position: relative;
top: 0px;
right: 15px;
}
.card-body:hover {
display: block;
}
.card-body .game-info {
display: none;
}
.card-body .dd-trigger:hover+.game-info {
display: block;
}
<h3>Ratings by som bol</h3>
<p>sort by release date (asc/desc), rating amout, game category, game creator, game console</p>
<input type="text" placeholder="filter by game title, categories, creators, consoles, console makers">
<div>Search hints</div>
<table class="table">
<thead>
<tr>
<th>Game title</th>
<th>your rating</th>
<th>Average rating</th>
<th></th>
</tr>
</thead>
<tbody>
<!-- Row 1 -->
<tr>
<td>
<a class="card-trigger" href="#">Some Videogame</a>
<div class="card-body">
<img src="#" alt="picture of the game in question" />
<h3><a [routerLink]="">Game title</a></h3>
<p>Some stuff happens and you have fun</p>
<span class="dd-trigger">Show more info</span>
<ul class="game-info">
<li>Average Rating: </li>
<li>Average Review Score: </li>
</ul>
</div>
</td>
<td>
your rating : 2
</td>
<td>
average rating : 3
</td>
<td><button>Delete rating</button></td>
</tr>
<!-- Row 2 -->
<tr>
<td>
<a class="card-trigger" href="#">Some Videogame</a>
<div class="card-body">
<img src="#" alt="picture of the game in question" />
<h3><a [routerLink]="">Game title</a></h3>
<p>Some stuff happens and you have fun</p>
<span class="dd-trigger">Show more info</span>
<ul class="game-info">
<li>Average Rating: </li>
<li>Average Review Score: </li>
</ul>
</div>
</td>
<td>
your rating : 2
</td>
<td>
average rating : 3
</td>
<td><button>Delete rating</button></td>
</tr>
<!-- row 3 -->
<tr>
<td>
<a class="card-trigger" href="#">Some Videogame</a>
<div class="card-body">
<img src="#" alt="picture of the game in question" />
<h3><a [routerLink]="">Game title</a></h3>
<p>Some stuff happens and you have fun</p>
<span class="dd-trigger">Show more info</span>
<ul class="game-info">
<li>Average Rating: </li>
<li>Average Review Score: </li>
</ul>
</div>
</td>
<td>
your rating : 2
</td>
<td>
average rating : 3
</td>
<td><button>Delete rating</button></td>
</tr>
</tbody>
</table>
In order to prevent parents from resizing to fit the contained element, you must do three things:
Set parent position to relative
Set child position to absolute (and position in appropriate place using top, bottom, left, right)
Set child element z-index higher than that of parent. We do this to prevent any parent styles from overlapping with child styles. It essentially makes the child element look like it is sitting on top of the parent element.
the html is a trivial example of a table with one row. the css hides the contained child div by default, and sets the display to block when hovering, in addition to default styles and the positioning/z-index mentioned above
table, th, td {
border: 1px solid black;
}
.pop-up {
display: none
}
td {
position: relative;
}
td:hover > .pop-up {
display: block;
}
.pop-up {
width: 500px;
height: 100px;
background: red;
border: 1px solid black;
position: absolute;
left: 50px;
z-index: 1;
}
click here to see full example
I am working on a HTLM editor who combine HTML & CSS in the same page. I want that the users have a zoom when mouseover on a picture in front page
<h4><img style="border: 1px solid black; align: right;" title="" src="sys_attachment.do?sys_id=00ee33cbdb1b9c507261e03cd396190b" alt="" width="204" align="right" border="1" hspace="" vspace="" /></h4>
<h4><strong>4. Entrez votre mot de passe.</strong></h4>
<ul style="list-style-type: disc; list-style-position: inside;">
<li>Puis, cliquez sur "Suivant".</li>
</ul>
I searched for solution but the solution is always when HTML and CSS are separated
If someone has any advice or solution, please help me !
Sorry for my english, i am still learning !
Here a full example working with css :hover. No need JS.
You need to set the style element into your head element out of body element
<html>
<head>
<style>
.zoom {
transition: transform .2s; /* Animation */
}
.zoom:hover {
transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
position:absolute;
right:0;
}
</style>
</head>
<body>
<p> </p>
<hr />
<h4 class="zoom"><img style="border: 1px solid black; align: right;" title="" src="https://cdn.pixabay.com/photo/2020/09/09/13/03/bike-riding-5557589_1280.png" alt="" width="204" align="right" border="1" hspace="" vspace="" /></h4>
<h4><strong>4. Entrez votre mot de passe.</strong></h4>
<ul style="list-style-type: disc; list-style-position: inside;">
<li>Puis, cliquez sur "Suivant".</li>
</ul>
<p> </p>
</body>
</html>
Here is a solution with JS Adapt from answer here : Javascript: Zoom in on mouseover WITHOUT Jquery or plugins
<html>
<head>
<style>
</style>
</head>
<body>
<p> </p>
<hr />
<h4>
<img id="imgZoom" style="border: 1px solid black; align: right;" width="200px" height="200px" align="right" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="https://cdn.pixabay.com/photo/2020/09/09/13/03/bike-riding-5557589_1280.png">
<div style="border: 1px solid black;
width: 200px;
height: 200px;
display: none;
background-image: url('https://cdn.pixabay.com/photo/2020/09/09/13/03/bike-riding-5557589_1280.png');
background-repeat: no-repeat;"
id="overlay"
onmousemove="zoomIn(event)"></div>
</h4>
<h4><strong>4. Entrez votre mot de passe.</strong></h4>
<ul style="list-style-type: disc; list-style-position: inside;">
<li>Puis, cliquez sur "Suivant".</li>
</ul>
<p> </p>
<script>
function zoomIn(event) {
var element = document.getElementById("overlay");
element.style.display = "inline-block";
var img = document.getElementById("imgZoom");
var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;
element.style.backgroundPosition = (-posX * 4) + "px " + (-posY * 4) + "px";
}
function zoomOut() {
var element = document.getElementById("overlay");
element.style.display = "none";
}
</script>
</body>
</html>
Last example with style directly in body:
It is accepted normaly based https://www.w3.org/Submission/1996/1/WD-jsss-960822
<html>
<body>
<style>
.zoom {
transition: transform .2s; /* Animation */
}
.zoom:hover {
transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
position:absolute;
right:0;
}
</style>
<p> </p>
<hr />
<h4 class="zoom"><img style="border: 1px solid black; align: right;" title="" src="https://cdn.pixabay.com/photo/2020/09/09/13/03/bike-riding-5557589_1280.png" alt="" width="204" align="right" border="1" hspace="" vspace="" /></h4>
<h4><strong>4. Entrez votre mot de passe.</strong></h4>
<ul style="list-style-type: disc; list-style-position: inside;">
<li>Puis, cliquez sur "Suivant".</li>
</ul>
<p> </p>
</body>
</html>
I'm trying to save page length in SharePoint by having a list of links that expose corresponding copy directly below them onto the page.
I have this working great outside of SharePoint thanks to the labels solution in this question and once in SP it works fine in Chrome but the hidden divs don't expand when the links are clicked in IE11.
To get around SP stripping the formatting away I created a .txt file containing the CSS and HTML and uploaded it to the sites style library. Then linked to it in a Content Editor Webpart. you can see what I'm using in the demo.
I'd like a solution without using JQuery as I'm not sure if we can use it within our internal enviroment (I've asked if we can but haven't heard back yet) It seems logical that there must be a simple way to do this within SP itself or SharePoint Designer or CSS without the above issue?
.artifact_top
{padding:10px;border:1px solid lightgrey;margin:10px;overflow:auto;}
.collapse{
cursor: pointer;
display: block;
color: #6490d6;
text-decoration: none;
}
.collapse:hover{
text-decoration: underline;
}
.collapse + input{
display: none; /* hide the checkboxes */
}
.collapse + input + div{
display:none;
}
.collapse + input:checked + div{
display:block;
}
table
{border-collapse:separate;width:100%;border:none;}
td
{padding-left:10px;padding-top:10px;vertical-align:top;}
<div style="float: right; width: 35%; padding-left: 5%;"><div class="ms-rteFontSize-2" style="border-bottom: 1px solid orange; margin: 4px; padding: 4px;"><strong style="font-size: 13.3333px;">Implementation</strong><strong> Artifacts</strong></div>
<br/>
<span class="ms-rteFontSize-1">This topic provides you a list of the artifacts and supporting documentation related to <span>Implementation</span>. Artifacts with an asterisk are required for all projects.</span>
<br/><br/>
<div><label class="collapse" for="_1">Final Implementation Plan*</label>
<input id="_1" type="checkbox"/>
<div class="artifact_top">The Implementation Plan identifies tasks, owners, timeline, and communication for IT components of the Implementation phase.<br/><br/>
<table>
<tbody><tr>
<td width="50%"><strong>Artifact Owner</strong><br/>PM</td>
<td width="50%"><strong>Template</strong><br/>View the Implementation Plan template.</td>
</tr>
<tr>
<td width="50%"><strong>Approver</strong><br/>Delivery Lead, PM, Release Manager</td>
<td width="50%"><strong>Sample</strong><br/>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
<div><label class="collapse" for="_2">Operational Readiness Review (ORR)*</label>
<input id="_2" type="checkbox"/>
<div class="artifact_top">The Operational Readiness Review is a checklist to ensure all required documentation listed within the ORR is completed.<br/><br/>
<table>
<tbody><tr>
<td width="50%"><strong>Artifact Owner</strong><br/>App Services</td>
<td width="50%"><strong>Template</strong><br/>View the Operational Readiness Review template.</td>
</tr>
<tr>
<td width="50%"><strong>Approver</strong><br/>App Services</td>
<td width="50%"><strong>Sample</strong><br/>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
<div><label class="collapse" for="_3">System/Application Documentation*</label>
<input id="_3" type="checkbox"/>
<div class="artifact_top">The System/Application Documentation consolidates content about the system/application, which backend users can use to determine how that system/application is designed and functions. <br/><br/>
<table>
<tbody><tr>
<td width="50%"><strong>Artifact Owner</strong><br/>TechComm</td>
<td width="50%"><strong>Template</strong><br/>N/A</td>
</tr>
<tr>
<td width="50%"><strong>Approver</strong><br/>IT Configuration Management</td>
<td width="50%"><strong>Sample</strong><br/>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
</div>
To support some advanced functionality in Internet Explorer, SharePoint 2010 uses some ActiveX controls that are only available in IE8. SharePoint forces Internet Explorer 11 into compatibility view to emulate Internet Explorer 8, essentially downgrading your version of IE.
Unfortunately, the input:checked CSS selector was introduced with CSS 3 and was not yet available in Internet Explorer 8.
As an alternative, you can use a click event handler in JavaScript to toggle the visibility of the divs. JavaScript can be entered into the same .txt file as your CSS and HTML (enclosed within <script> tags). If you put the JavaScript below your HTML, it will not execute until the preceding HTML is loaded by the browser, allowing you to query and reference the preceding HTML elements in your script.
<script>
var labels = document.querySelectorAll(".collapse"); // get all labels
for(var i = 0; i < labels.length; i++){
var label = labels[i];
(function(div){
label.onclick = function(){
if(div.style.display == "block"){
div.style.display = "none";
}else{
div.style.display = "block";
}
};
})(label.parentNode.querySelector("div"));
}
</script>
var labels = document.querySelectorAll(".collapse"); // get all labels
for (var i = 0; i < labels.length; i++) {
var label = labels[i];
(function(div) {
label.onclick = function() {
if (div.style.display == "block") {
div.style.display = "none";
} else {
div.style.display = "block";
}
};
})(label.parentNode.querySelector("div"));
}
.collapse {
cursor: pointer;
display: block;
color: #6490d6;
text-decoration: none;
}
.collapse:hover {
text-decoration: underline;
}
.collapse + input {
display: none;
/* hide the checkboxes */
}
.collapse + input + div {
display: none;
}
table {
border-collapse: separate;
width: 100%;
border: none;
}
td {
padding-left: 10px;
padding-top: 10px;
vertical-align: top;
}
.artifact_top {
padding: 10px;
border: 1px solid lightgrey;
margin: 10px;
overflow: auto;
}
<div style="float: right; width: 35%; padding-left: 5%;">
<div class="ms-rteFontSize-2" style="border-bottom: 1px solid orange; margin: 4px; padding: 4px;"><strong style="font-size: 13.3333px;">Implementation</strong><strong> Artifacts</strong>
</div>
<br/>
<span class="ms-rteFontSize-1">This topic provides you a list of the artifacts and supporting documentation related to <span>Implementation</span>. Artifacts with an asterisk are required for all projects.</span>
<br/>
<br/>
<div>
<label class="collapse" for="_1">Final Implementation Plan*</label>
<input id="_1" type="checkbox" />
<div class="artifact_top">The Implementation Plan identifies tasks, owners, timeline, and communication for IT components of the Implementation phase.
<br/>
<br/>
<table>
<tbody>
<tr>
<td width="50%"><strong>Artifact Owner</strong>
<br/>PM
</td>
<td width="50%"><strong>Template</strong>
<br/>View the Implementation Plan template.</td>
</tr>
<tr>
<td width="50%"><strong>Approver</strong>
<br/>Delivery Lead, PM, Release Manager</td>
<td width="50%"><strong>Sample</strong>
<br/>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
<div>
<label class="collapse" for="_2">Operational Readiness Review (ORR)*</label>
<input id="_2" type="checkbox" />
<div class="artifact_top">The Operational Readiness Review is a checklist to ensure all required documentation listed within the ORR is completed.
<br/>
<br/>
<table>
<tbody>
<tr>
<td width="50%"><strong>Artifact Owner</strong>
<br/>App Services</td>
<td width="50%"><strong>Template</strong>
<br/>View the Operational Readiness Review template.</td>
</tr>
<tr>
<td width="50%"><strong>Approver</strong>
<br/>App Services</td>
<td width="50%"><strong>Sample</strong>
<br/>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
<div>
<label class="collapse" for="_3">System/Application Documentation*</label>
<input id="_3" type="checkbox" />
<div class="artifact_top">The System/Application Documentation consolidates content about the system/application, which backend users can use to determine how that system/application is designed and functions.
<br/>
<br/>
<table>
<tbody>
<tr>
<td width="50%"><strong>Artifact Owner</strong>
<br/>TechComm</td>
<td width="50%"><strong>Template</strong>
<br/>N/A</td>
</tr>
<tr>
<td width="50%"><strong>Approver</strong>
<br/>IT Configuration Management</td>
<td width="50%"><strong>Sample</strong>
<br/>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
</div>
pure css and html, nice work!
have you the possibility to add a meta into the header?
see / try the ie=edge meta:
What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?
we got a lot of issues with our sharepoint / our ie version on our workmachines - css styles are ignored, scripts not working etc.
are the contents always hidden and the click has no effect or are they alwasy visible?
I am looking for code to replace a specific image with one chosen from a list of potential images.
I have a list of images which I plan to have the images (or their label) clickable, and on that click I want to have one of the four images at the top of the page to change in to the clicked image. (Sorry for the run on sentence, I am really bad at explaining things.)
Let me know if I can provide any further information to clarify. Thanks in advance!
PS Here is the code I have so far:
<html>
<head>
<style type="text/css">
.row { vertical-align: top; height:auto !important; }
.list {display:none; }
.show {display: none; }
.hide:target + .show {display: inline; }
.hide:target {display: none; }
.hide:target ~ .list {display:inline; }
#media print { .hide, .show { display: none; } }
</style>
<script type="text/javascript">
function Down(sender)
{ var thisWidth=parseInt(sender.style.width.replace('px',''));
sender.style.width=(300) + 'px';}
function Up(sender)
{ var thisWidth=parseInt(sender.style.width.replace('px',''));
sender.style.width=(150) + 'px';}
</script>
<style>
a:link {color: #003300; font-weight: bold; font-size:18;}
a:visited {color: #003300; font-weight: bold; font-size:18;}
a:hover {color: #00FF00; font-weight: bold; font-size:18;}
a:active {color: #00CC00; font-weight: bold; font-size:18;}
table {width:99%; border: 2px solid black; background-color:white;}
td {border: 0px solid #ccc; vertical-align:center;}
img {border:2px solid #000; width:150px;}
#select1, #select2, #select3, #select4 {border:2px solid #000; width:300px;}
#name {text-align:right;}
#pic {text-align:left;}
</style>
</head>
<body>
<font size="5"><center><b>Here are the seed beads I currently have available. Click and hold an image to see a larger image.</b></center></font>
<table>
<tr>
<td>
<center><img id="select1" src="img/selectedIMG.jpg"/></center>
</td>
<td>
<center><img id="select2" src="img/selectedIMG2.jpg"/></center>
</td>
</tr>
</table><br>
<div class="Toho Seed Beads Size 15">
Toho Seed Beads Size 15 (+)
Toho Seed Beads Size 15 (-)
<div class="list">
<ul type="none">
<li>
<table>
<tr>
<td id="name">Silver Lined<br>Crystal Clear<br>Size 15</td>
<td id="pic"><img src="img/Toho_s15_SilverLinedCrystalClear.jpg" onmousedown="Down(this)" onmouseup="Up(this)" /></td>
<td id="name">Transparent<br>Deep Sky Blue<br>Size 15</td>
<td id="pic"><img src="img/Toho_s15_TransparentDeepSkyBlue.jpg" onmousedown="Down(this)" onmouseup="Up(this)" /></td>
<td id="name">Ceylon<br>Light Rose<br>Size 15</td>
<td id="pic"><img src="img/Toho_s15_CeylonLightRose.jpg" onmousedown="Down(this)" onmouseup="Up(this)" /></td>
<td id="name">Opaque<br>Black<br>Size 15</td>
<td id="pic"><img src="img/Toho_s15_OpaqueBlack.jpg" onmousedown="Down(this)" onmouseup="Up(this)" /></td>
</tr>
<tr><td colspan="8"><center>(Close)</center/></td></tr>
</table>
</li>
</ul>
</div>
</div>
</body>
</html>
Perhaps this example will be helpful? I see that you've tagged the question with HTML and CSS, but the best solution will involve JavaScript as well. You can see that inside the <script> tag below.
<!DOCTYPE html>
<html>
<head>
<!-- I prefer using jQuery. If you don't use it, it makes life easier :) -->
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
<!-- this is wherever your images are actually displayed... -->
<img id="changing-images" src="first_image.png">
<!-- and this is whatever triggers the action. Note the IDs on these -->
<input type="button" id="changing-button" value="Change picture">
</body>
<script>
$(document).ready(function(){
image_names = ["first_image.png", "second_image.png", "third_image.png"];
number_of_images = image_names.length;
current_index = 0;
$("#changing-button").click(function(){
// take the mod so that we cycle around the array
current_index = (current_index+1)%number_of_images;
// catch the ID of the image area; update its "src" attribute
$("#changing-images").attr("src",image_names[current_index]);
});
});
</script>
</html>
$("a").on("click", function(e){
e.preventDefault();
var newImg = $(this).attr("href");
$(".foo").attr("src", newImg);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
image 1
image 2
image 3
</p>
<p>
<img class="foo" src="http://lorempixel.com/200/200/">
</p>