We Keep Coding

How to change the displayed image using HTML without JS?

I wrote the following code:
<div class="slider-button-next slider-btn"> < </div>
<img src="images/pic02.jpg" alt="" data-position="center center" />
<div class="slider-button-prev slider-btn"> > </div>
I want the users to click on the left/right buttons in order to switch between images. Currently I have only one image pic02.jpg. How can I change the image displayed, without JS? (For example, changing to pic03.jpg when pressing right and changing to pic01.jpg when pressing left and so on). I'm planning to use hosting services to host my static website so as I understand, I can't use JS.

If you're careful about where you position your elements you can do this:
#mycheckbox~.images img:first-child {
display: none;
}
#mycheckbox:checked+.images img:last-child {
display: none;
}
#mycheckbox:checked+.images img:first-child {
display: unset;
}
<input id='mycheckbox' type='checkbox'> Click me
<div class='images'>
<img src='https://picsum.photos/id/237/200/300'>
<img src='https://picsum.photos/id/433/200/300'>
</div>
The :has() pseudo class is on it's way (it's not in Firefox yet - check caniuse.com but it's coming) and this allows you lots of flexibilty:
.images img:first-child {
display: none;
}
body:has(#mycheckbox:checked) .images img:last-child {
display: none;
}
body:has(#mycheckbox:checked) .images img:first-child {
display: unset;
}
<input id='mycheckbox' type='checkbox'> Click me
<p> Lots of content here</p>
<div class='images'>
<img src='https://picsum.photos/id/237/200/300'>
<img src='https://picsum.photos/id/433/200/300'>
</div>
You'd have to look at your slider element to see how it's been rendered in the DOM to see if it's an underlying check box or other input and change the rules accordingly.

Display image below original image onClick

I have an original image of a person, and then what I want to do is basically click the image, and below a price chart will pop out. so it is hidden until it is clicked, and then if it is clicked again, hide it. I have it set up right now where i can display text, but it isn't really working, and there is no css. here it is:
<img onclick="changeText(1)" src="https://images.unsplash.com/photo-1497215728101-856f4ea42174?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60">
<img onclick="changeText(2)" src="def.jpg">
<img onclick="changeText(3)" src="efg.jpg">
<script type="text/javascript">
function changeText(val)
{
if(val==1)
{
para += "Image one was Clicked";
}
else if(val==2)
{
para += "Image Two was Clicked";
}
}
</script>
Can anyone help me please?

The easies way is to place an element like a <div> below the image that contains the price lsit or a etxt instead of an image.
Then hide the element with a class that contains display: none; as declaration. Use the onclick event on the image to toggle the class on/off to show/hide the element:
.hidden {
display: none;
}
/* for stylign purpose only */
img {
max-width: 30vw;
}
<img onclick="document.getElementById('image-label').classList.toggle('hidden')" src="https://images.unsplash.com/photo-1497215728101-856f4ea42174?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60">
<div class="hidden" id="image-label">Random Content</div>

Mousing over different images makes different text appear in the same text box

Thanks so much for your help. I am new to JavaScript and trying to learn, but it's a lot to take in. In the meantime, my team created a site where we have 5 different images that represent a capability. Under all those images, we want to have text appear. When you mouse over the image, the corresponding description of the capability should appear centered under all the images. If you move to a different image, the text should change, but it should be in the same location.
It would kind of be like jQuery tabs but with images.
If anyone could help with the code or point me in the right direction, I would really appreciate it!!

With jQuery you can use the hover method to add a animation css to your image text on hover. To update the text in your textbox just place the image text below the hovered image then you can find the text with jQuery and copy that text to the textbox with .text(newText).
To find the text you first have to go to the parent of the image with .parent() (the li tag here) and then you can use .find(class) to go down to the image text.
For documentation to .hover(handlerIn, handlerOut) see the docs here.
A demo for what you're looking for see the demo below and here at jsFiddle.
To the css:
The overflow: hidden; on the li tag is only to hide the text below the images. The li and the image have the same height so the text is invisble.
var $textbox = $('#textbox'),
handlerIn = function () {
var $imgText = $(this).parent().find('.imgText'); // find the text
$textbox.text($imgText.text()); // add the text to the p-tag
$textbox.removeClass('animated fadeOut');
$textbox.addClass('animated fadeIn');
},
handlerOut = function () {
//var $imgText = $(this).parent().find('.imgText');
$textbox.removeClass('andimated fadeIn');
$textbox.addClass('animated fadeOut');
};
$('img').hover(handlerIn, handlerOut);
body {
font-family: Arial, Helvetica, sans-serif;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
border: 1px solid black;
height: 200px;
overflow: hidden;
}
.imgText {
text-align: center;
opacity: 0.0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<img src="http://lorempixel.com/200/200/sports/1" />
<p class="imgText">first image text...</p>
</li>
<li>
<img src="http://lorempixel.com/200/200/sports/2" />
<p class="imgText">second image text...</p>
</li>
<li>
<img src="http://lorempixel.com/200/200/sports/3" />
<p class="imgText">third image text...</p>
</li>
</ul>
<p id="textbox"></p>

Hide/Unhide an image using jquery on hover

I have 3 <a> tags in my html and they each contain 2 images. Only the grescale images are displayed and the other ones are set to none.
I want to hide the greyscale image when I hover the mouse over the grescale image and display the colored one. And when I un-hover I want the colored image to be hidden again. How can I do that using jquery?
<a class="mylink" href="">
<img src="img/thumbnails/colored-1.jpg" class="color-image"/>
<img src="img/thumbnails/greyscale-1.jpg" class="greyscale-image"/>
</a>
<a class="mylink" href="">
<img src="img/thumbnails/colored-2.jpg" class="color-image"/>
<img src="img/thumbnails/greyscale-2.jpg" class="greyscale-image"/>
</a>
<a class="mylink" href="">
<img src="img/thumbnails/colored-3.jpg" class="color-image"/>
<img src="img/thumbnails/greyscale-3.jpg" class="greyscale-image"/>
</a>
.color-image
{
display:none
}

Why use jQuery and not pure CSS?
You can use :hover and toggle the display of the images.
a.mylink:hover .color-image,
a.mylink .greyscale-image {
display: inline;
}
a.mylink .color-image,
a.mylink:hover .greyscale-image {
display: none;
}
In jQuery it is just
function swap(evt) {
var isOver = evt.type === "mouseenter";
link.find(".color-image").toggle(isOver);
link.find(".greyscale-image").toggle(!isOver);
}
$("a.mylink").hover(swap, swap);

NO Jquery needed. Use the :hover css pseudo on the .myLink anchor, like:
.color-image {
display:none;
}
a.myLink:hover .color-image {
display: block;
}
a.myLink:hover .greyscale-image {
display: none;
}

My way :p
a[class="mylink"]:not(:hover) img[class*="greyscale"],
a[class="mylink"]:hover img[class*="color"] {
display: inline-block;
}
a[class="mylink"]:not(:hover) img[class*="color"],
a[class="mylink"]:hover img[class*="greyscale"] {
display: none;
}
Here is a demo JSFiddle
http://jsfiddle.net/agaex70r/
Here is another JSFiddle with a transition.
http://jsfiddle.net/agaex70r/2/

You could do this with css:hover. Hover on gray scale image, display:none and the reverse for the colored image. This has the benefit of working when JS is disabled. Otherwise, you could look into Jquery UI

Get the image to appear larger with moving my other elements on my page

Here is the exact thing i've got to do:
Appropriate JavaScript and html so that when the user moves the mouse
over a thumbnail image of one particular type of room that is on
special offer, a full size (larger) image relating to it is displayed
(note that the display of a larger image should not cause other page
elements to move). When the user moves the mouse away from the
thumbnail image, the larger image should disappear.
Here is my website.
I just want to be able to hover over those image and get them to appear above the page, without altering how the page looks now.
This is my javascript section at the moment;
div = {
show: function(elem) {
document.getElementById(elem).style.visibility = 'visible';
},
hide: function(elem) {
document.getElementById(elem).style.visibility = 'hidden';
}
}
But i'm unsure if that is right or now for what i want,
Then this is the html;
<img src="images/garden2.jpg" width="201" height="143" alt="Garden Room" onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')"/>
<div id="div1"><img src="images/garden2.jpg" alt="Garden Room" /></div>
but that creates a div below the image and alters the my elements which is not what i want to happen.

If you want some element to appear over other elements this element need to be positioned - the best way in your case is to set all containers element - meaning elements that contains the original shown image and the hidden image - in style position relative - and the hidden image set absolute position and when you hover on the original image just show the hidden image as your coded already:
I made a simple jsfiddle for you to understand
html:
<div class="container">
<img src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')" />
<div id="div1" class="hid-img"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" /></div>
<div>
<div class="container">
<img src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" onMouseOver="div.show('div2')" onMouseOut="div.hide('div2')" />
<div id="div2" class="hid-img"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" /></div>
<div>
css:
.container{
position: relative;
}
.container .hid-img{
position: absolute;
display:none;
z-index:1;
}
js:
var div = {
show: function(elem) {
document.getElementById(elem).style.display = 'block';
},
hide: function(elem) {
document.getElementById(elem).style.display = 'none';
}
}
EDIT:
just add width,height to img tag http://jsfiddle.net/MKPgv/2/

I would use a simpler code like this:
HTML:
<a href="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg">
<img width="100" src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" />
<img class="fullsize" src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" />
</a>
<a href="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg">
<img width="100" src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" />
<img class="fullsize" src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" />
</a>
CSS:
a {
position: relative;
display: inline-block;
}
a .fullsize {
position: absolute;
top: 100%;
left: 0;
display: none;
z-index: 1;
}
a:hover .fullsize {
display: inline;
}
JS:
-NONE-
Fiddle: http://jsfiddle.net/84anu/
Preview http://jsfiddle.net/84anu/show/