Hi.
Can anyone help me please? I’m new to html and trying to teach myself.
I have a html tab which displays an image (image1) with two buttons on it which takes me to image2 and image3
I’m wanting to place a button on image2 and 3 when pressed will close the tab and go back to image1.
But I can’t manage to put a button on the linked images
Here is what I have so far
<!DOCTYPE html>
<html lang="en"
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<title>Button</title>
<link rel="stylesheet" href="styles.css" >
<title>RD LOGO</title>
</head>
<body
<div class="container">
<img src="image1.jpg">
<a href="C:\Users\iain\Desktop\HTML\image2.jpg" target "_blank">
<button class="btn">image2</button>
</a>
<a href="C:\Users\iain\Desktop\HTML\image3.jpg" target "_blank">
<button class="btn2">image3</button>
</div>
</body>
</html>
Above the links go directly to the image files, like "image2.jpg". But when opened directly in a browser, image files can't do anything, they are just images.
Instead you need to link to a separate HTML file/page, which might be similar to the current one but with a different arrangement of links (one linking back to the first HTML file/page). For example, the "image2" link might go to a page called "image2.html".
To make an open tab close by clicking an HTML button you need javascript, but it's easier and more user-friendly to not automatically open new tabs in the first place.
I'd just link to a separate page in the same tab, like this:
Hi there imalc,
you might consider keeping the three images on the same page like this...
index.htmlCODE
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
</head>
<body>
<input id="r1" type="radio" name="r">
<input id="r2" type="radio" name="r">
<input id="r3" type="radio" name="r">
<div id="images">
<label for="r1">one</label>
<label for="r2">two</label>
<label for="r3">three</label>
</div>
</body>
</html>
screen.cssCODE
body {
background-color: #f9f9f9;
font: normal 1em / 1.5 arial, helvetica, sans-serif;
}
input {
position: absolute;
left: -999em;
}
#images {
position: relative;
width: 29em;
height: 29em;
margin: 3em auto 0;
border: 1px solid #000;
box-shadow: 0.3em 0.3em 0.3em rgba(0,0,0,0.4);
background-image: url(https://picsum.photos/id/208/320/320);
background-size: cover;
}
#r1:checked ~ #images {
background-image: url(https://picsum.photos/id/208/320/320);
}
#r2:checked ~ #images {
background-image: url(https://picsum.photos/id/210/320/320);
}
#r3:checked ~ #images {
background-image: url(https://picsum.photos/id/152/320/320);
}
label {
position: absolute;
padding: 0.25em 0.5em;
border: 1px solid #000;
background-color: #fff;
top: -2.5em;
cursor: pointer;
}
label:nth-of-type(2) {
left: 50%;
transform: translate(-50%, 0);
}
label:nth-of-type(3) {
left: 100%;
transform: translate(-100%, 0);
}
@media (max-width: 31em) {
#images {
width: 20em;
height: 20em;
}
}
@media (max-width:22em) {
#images {
width: 17em;
height: 17em;
}
}
You may view the example here...
Full Page View
https://codepen.io/coothead/full/LYvJBxV
Editor View
https://codepen.io/coothead/pen/LYvJBxV
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)