CHROMATIC-SYSTEM v1.03_MANUAL_IMAGE_AND_TEXT_FADE_IN-OUT_CHANGER_DISPLAY_ENGINE

INFORMATION & CODE

Manual Shaped Image & text Fade in-out Changer Display

What the Code Does

The code creates a manually controlled image-and-text slider. It displays four different images alongside four corresponding blocks of text. The user switches between the four items by clicking one of the numbered circular buttons underneath the display. When a button is selected, the associated image and text fade in while the other three fade out.

How the Code Works

The HTML provides the structure of the component. The .text-wrap contains four .textbox elements, each with a heading and paragraph. The .overlay contains four .images elements, which correspond to the four text boxes in the same order. The .dotbox contains four buttons that act as navigation controls. For example, clicking button 1 displays the first image and first text box, while clicking button 3 displays the third pair.

The CSS controls the appearance and layout. The .main-wrapper creates the main display area, while .overlay creates the large curved image section on the left. Each image and text box is positioned on top of the others, with their opacity initially set to 0. The first image and first text box are given opacity: 1, so they are visible when the page loads. The transition-duration: 3s property creates the three-second fade effect when JavaScript changes the opacity.

The JavaScript controls which image, text box, and navigation button are active. querySelectorAll() collects all the images, text boxes, and buttons into separate collections. When a navigation button is clicked, focusOnDot() first hides all images and text boxes and resets all buttons to their inactive appearance. It then converts the button's ID (10, 11, 12, or 13) into an array position by subtracting 10. For example, button ID 12 becomes array position 2, which selects the third image and third text box. That selected pair is then given opacity: 1, causing it to fade into view.

How to Use the Code

To use the component, place the HTML in your webpage, put the CSS in the referenced styles.css file, and put the JavaScript in scripts.js. Replace the four image URLs with your own images and replace the headings and paragraphs with your own content. The important rule is that the images and text boxes must remain in the same order: the first image corresponds to the first text box, the second image to the second text box, and so on. The component works as a simple manual four-slide fade changer, with the numbered buttons providing direct navigation between each image-and-text combination.

HTML


                <!doctype html>
<html lang="en/US">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manual Shaped Image & text Fade in-out Changer Display</title>
    <link rel="stylesheet"  href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/d9cf1148e3.js" crossorigin></script>
  </head>
  <body>
    <h1>Manual Shaped Image & text Fade in-out Changer</h1>
    <div class="main-wrapper">
      <div class="text-wrap">
        <div class="textbox">
          <h4>Tim Berners-Lee</h4>
          <p>In 1989, Tim Berners-Lee invented of the modern day world wide web, an Internet-based hypermedia initiative for global information sharing while at CERN, the European Particle Physics Laboratory. He wrote the first web client and server in 1990. His specifications of URIs, HTTP and HTML were refined as web technology spread.</p>
        </div>
        <div class="textbox">
          <h4>Modern Day Computing</h4>
          <p>Computers these days are light weight, portable with much more memory than the big bulky computers of the seventies, eighties and early nineties. Giving the modern day programmer much more computing power and a much cleaner look.</p>
        </div>
        <div class="textbox">
          <h4>Computing On The Go</h4>
          <p>As mentioned before the modern day computing is both light weight and portable meaning it is possible to work anywhere you like providing that you have connection to the internet or company server. While the invention of wi-fi has made home computing more flexible an mobile without trailing wires.</p>
        </div>
        <div class="textbox">
          <h4>Maximum Mobile Computing</h4>
          <p>The invention of the mobile phone has allowed computing to become even more mobile than the laptop and the Iphone has more memory than a lot of laptops. So with its large memory and being pocket sized the Iphone is the ideal tool to use when you are on the move.</p>
        </div>
      </div>
      <div class="overlay">
        <img src="https://e-nash.net/photos/berners-lee.jpg" class="images" alt="Tim Berners-Lee inventor of the internet.">
        <img src="https://e-nash.net/photos/vpn.jpg" class="images" alt="computer desk.">
        <img src="https://e-nash.net/photos/outdoors-office.jpg" class="images" alt="outside computing.">
        <img src="https://e-nash.net/photos/woman-mobile.jpg" class="images" alt="Woman on a mobile phone.">
      </div>
    </div>
    <div class="dotbox">
      <button class="dot" id="10" onclick="focusOnDot(this.id)">1</button>
      <button class="dot" id="11" onclick="focusOnDot(this.id)">2</button>
      <button class="dot" id="12" onclick="focusOnDot(this.id)">3</button>
      <button class="dot" id="13" onclick="focusOnDot(this.id)">4</button>
    </div>
    <script src="scripts.js"></script>
  </body>
</html>

CSS


                     
      * {
        box-sizing: border-box;
      }
      body {
        background-color: #f7f7f7;
      }
      h1 {
        width: 750px;
        padding: 10px 20px;
        margin: 30px auto 0px auto;
        color: #ffff77;
        font-size: 48px;
        background-color: #c9c9c9;
        border-radius: 10px;
        box-shadow: 1px 1px 5px #00ff00, 2px 2px 10px #ff7777;
        text-shadow: 1px 1px 5px #00ff00, 2px 2px 10px #00ff00, 3px 3px 15px #00ff00, 4px 4px 20px #00ff00;
        text-align: center;
        
      }
      .main-wrapper {
        position: relative;
        top: 80px;
        left: 50%;
        transform: translatex(-50%);
        width: 750px;
        height: 300px;
        background-color: #ffffdd;
        border: 2px solid #aaaaaa;
        border-radius: 20px;
        box-shadow: 2px 2px 15px 3px #77ff77, 4px 4px 20px 6px #ff7777;
        border: 2px solid #aaaaaa;
        overflow: hidden;
      }
      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 450px;
        height: 600px;
        margin: -150px 0 0 0;
        background-color: #ffffff;
        border-right: 2px solid #aaaaaa;
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        box-shadow: 1px 0 5px #999999;
        overflow: hidden;
      }
      .images {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 450px;
        height: 300px;
        margin-top: 150px;
        transition-duration: 3s;
      }
      .images:first-child {
        opacity: 1;
      }
      .text-wrap {
        position: relative;
        float: right;
        margin: 10px 10px 0 0;
        width: 275px;
        height: 275px;
        padding: 10px;
        border: 2px solid #aaaaaa;
        border-radius: 10px;
        box-shadow: inset 2px 2px 10px #777777;
        overflow: hidden;
        z-index: 1;
      }
      .textbox {
        position: absolute;
        top: 10px;
        left: 10px;
        opacity: 0;
        width: 255px;
        height: 255px;
        background-color: #ffffdd;
        transition-duration: 3s;
        overflow: auto;
      }
      .textbox:first-child {
        opacity: 1;
      }
      h4,
      p {
        text-align: center;
      }
      
      .dotbox {
        position: relative;
        top: 110px;
        left: calc(50% - 126px);
        width: 257px;
        background-color: #ffffdd;
        border: 1px solid #aaaaaa;
        border-radius: 10px;
        box-shadow: 1px 1px 5px #00ff00, 2px 2px 10px #ff7777;
      }
      .dot {
        width: 20px;
        height: 20px;
        margin: 20px;
        background-color: #ffdddd;
        border: 1px solid #cc0000;
        outline: 2px solid #cc0000;
        outline-offset: +4px;
        border-radius: 50%;
      }
      .dot:nth-child(1) {
        background-color: #77ff77;
        border: 1px solid #77cc77;
        outline: 2px solid #77cc77;
      }
      .dot:focus {
        background-color: #77ff77;
        border: 1px solid #77cc77;
        outline: 2px solid #77cc77;
      }

JAVASCRIPT


                var img = document.querySelectorAll(".images");
var box = document.querySelectorAll(".textbox");
var dot = document.querySelectorAll(".dot");
var i;
      
function focusOnDot(inc) {
  for (i = 0; i < img.length; i++) {
    img[i].style.opacity = 0;
    box[i].style.opacity = 0;
    dot[i].style.backgroundColor = "#ffcccc";
    dot[i].style.borderColor = "#cc0000";
    dot[i].style.outlineColor = "#cc0000";
  }
  var inc = inc - 10;
  img[inc].style.opacity = 1;
  box[inc].style.opacity = 1;
  dot[inc].style.backgroundColor = "#77ff77";
  dot[inc].style.borderColor = "#77ff77";
  dot[inc].style.outlineColor = "#77ff77";
}

PREVIEW

Manual Shaped Image & text Fade in-out Changer

Tim Berners-Lee

In 1989, Tim Berners-Lee invented of the modern day world wide web, an Internet-based hypermedia initiative for global information sharing while at CERN, the European Particle Physics Laboratory. He wrote the first web client and server in 1990. His specifications of URIs, HTTP and HTML were refined as web technology spread.

Modern Day Computing

Computers these days are light weight, portable with much more memory than the big bulky computers of the seventies, eighties and early nineties. Giving the modern day programmer much more computing power and a much cleaner look.

Computing On The Go

As mentioned before the modern day computing is both light weight and portable meaning it is possible to work anywhere you like providing that you have connection to the internet or company server. While the invention of wi-fi has made home computing more flexible an mobile without trailing wires.

Maximum Mobile Computing

The invention of the mobile phone has allowed computing to become even more mobile than the laptop and the Iphone has more memory than a lot of laptops. So with its large memory and being pocket sized the Iphone is the ideal tool to use when you are on the move.