The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> linked images, Place button on a linked image
imalc
post Apr 16 2024, 10:23 AM
Post #1





Group: Members
Posts: 1
Joined: 16-April 24
Member No.: 29,167
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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
 Reply to this topicStart new topic
Replies
coothead
post Apr 16 2024, 01:53 PM
Post #2


Advanced Member
****

Group: Members
Posts: 206
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
Hi there imalc,

you might consider keeping the three images on the same page like this...

index.html
CODE

<!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.css
CODE

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


coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
imalc   linked images   Apr 16 2024, 10:23 AM
Christian J   Above the links go directly to the image files, li...   Apr 16 2024, 11:12 AM
coothead   Hi there imalc, you might consider keeping the th...   Apr 16 2024, 01:53 PM

« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 20th May 2024 - 07:00 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC