Member Avatar for sammer021486

I am looking to create a changeable image similar to how it is done in this thread Pure CSS Image Gallery with mouse click

Here is the layout of my page. I would like for the image to be shown in the frame that I have given it and then when I click on the button the image associated with that button will load in the frame.
[img][/img]

Here is my html code for my page, less the image code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link href="../StyleSheet.css" rel="stylesheet" type="text/css" />
    <link href="../menu.css" rel="stylesheet" type="text/css" />
    
</head>
<body>

   <div class="headerleft">
        <div class="chapter">Chapter Title</div>
        <div class="section">Sub-Chapter Title</div>
    </div>
    
    <div class="headerright">
         <div class="maintitle">Main Title</div>
         <div class="subtitle">Sub Title</div>
    </div>
    
   <!-- #include file ="../menu.aspx" -->						

    <div class="text"></div>
    
    <div class="graphics"></div>
    
        
     <div class="navigation">
    <a href="1131.aspx">
    <img class="navbutton" src="../Nav_Images/left_arrow.png" alt="Previous" /></a>
    <a href="#"> 
    <img class="navbutton" src="../Nav_Images/home.png" alt="HOME" /></a>
    <a href="#">
    <img class="navbutton" src="../Nav_Images/right_arrow.png" alt="Next" /></a>
   </div>

</body>
</html>

CSS code for page layout

body {
background-color: #FFF;
}

div.headerleft {
float: left;
width:40%;
border:3px solid #CCC;
min-width: 350px;
margin-left:-3px;
clear: left;
}

div.chapter 
{
border-bottom:3px solid #CCC;
color: #000;
padding: 10px;
text-align: left;
}

div.section {
border-top:3px solid #CCC;
margin-top: -3px;
color: #000;
padding: 10px;
text-align: left;
}

div.headerright {
float: left;
width: 59%;
height: 83px;
border: solid 3px #CCC;
min-width: 350px;
margin-left: -3px;
clear: right;
}

div.maintitle {
color: #000;
padding: 10px;
text-align: left;
}

div.subtitle {
color: #000;
padding: 10px;
text-align: left;
}

div.text {
float: left;
width: 25%;
border: solid 3px #CCC;
margin-left: -3px;
color: #000;
overflow:auto;
height: 500px;
clear: left;
min-width: 200px;
}

div.text1 {
color: #000;
padding: 10px;
overflow: auto;
}

div.graphics {
float: left;
width: 74%;
border: solid 3px #CCC;
margin-left: -3px;
overflow: auto;
height: 500px;
clear: right;
}

div.image {
color: #000;
padding: 10px;
text-align: center;
margin: auto;
border: solid 1px #000;
}

div.navbutton
{
 clear: left;
 float: right;
 width: 30px;
 height: 30px;
}

div.navigation
{
float: right;
margin-top: -3px;
}

a img 
{
border: 0;
padding: 3px;
margin-top: 2px;
margin-right: 5px;
}
Edited by sammer021486 because: n/a
  • 1 Contributor
  • 1 Reply
  • 92 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by sammer021486

Dani AI

Generated

used an iframe as a quick fix, which is a practical short-term approach. For a cleaner, more accessible and performant solution, place a single <img> inside the graphics/frame area and swap its src when a control is clicked. An <img> keeps semantics and alt text, avoids loading a separate document, and plays nicer with CSS (for example object-fit: contain to preserve aspect ratio).

A minimal pattern (HTML + CSS + JavaScript) that fits into the existing floated layout:

<div class="frame" style="width:600px;height:400px;border:1px solid #ccc;overflow:hidden;">
  <img id="viewer" src="images/initial.jpg" alt="Main image"
       style="width:100%;height:100%;object-fit:contain;display:block;">
</div>

<div class="controls">
  <button data-src="images/pic1.jpg" data-alt="Picture 1">Pic 1</button>
  <button data-src="images/pic2.jpg" data-alt="Picture 2">Pic 2</button>
</div>

<script>
document.querySelectorAll('button[data-src]').forEach(function(btn){
  btn.addEventListener('click', function(){
    var img = document.getElementById('viewer');
    img.src = btn.getAttribute('data-src');
    if (btn.getAttribute('data-alt')) img.alt = btn.getAttribute('data-alt');
  });
});
</script>

Common pitfalls to watch for: use matching protocols (https) to avoid mixed-content blocking; some hosts block hotlinking (403), so check image URLs; preload frequently used images to avoid visible flicker; provide descriptive alt text for accessibility. For layout scaling, see the object-fit reference on MDN for behavior and browser support: object-fit.

Member Avatar for sammer021486

Found what I was looking for, by using an iframe. Had to change my search question to find the correct code examples

Edited by sammer021486 because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.