The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> 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
Christian J
post Apr 16 2024, 11:12 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,663
Joined: 10-August 06
Member No.: 7
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:

CODE
<a href="image2.html">image2</a>

and then on the new page "image2.html", use something like

CODE
<a href="image1.html">image1</a>

<img src="image2.jpg" alt="">

<a href="image3.html">image3</a>


Note that you can't use the file path to your own computer ("C:\Users...") if the page is uploaded to the web.

Also I removed the BUTTON elements. In my understanding the HTML5 spec does not allow BUTTON elements in links (or links in BUTTON elements): https://html.spec.whatwg.org/multipage/text...l#the-a-element says "there must be no interactive content descendant" and BUTTON is indeed listed as Interactive content on https://html.spec.whatwg.org/multipage/dom....ctive-content-2
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Apr 16 2024, 01:53 PM
Post #3


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
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

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

 

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

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

- Lo-Fi Version Time is now: 30th April 2024 - 05:04 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC