Link to home
Start Free TrialLog in
Avatar of Balu Al
Balu AlFlag for United States of America

asked on

How to show static image upon clicking a button in HTML

I am new to HTML/CSS/JS. I have a piece of code that I snagged from the internet. It is a menu bar with some animation. What I want is, upon clicking a menu item, I want a static picture to show. Here is the code that I have.

Here is the working code from the internet >>> 


<!DOCTYPE html>

<html lang="en" >


  <meta charset="UTF-8">

  <title>CodePen - Animated Tab Bar</title>

  <link rel="stylesheet" href="./style.css">



<!-- partial:index.partial.html -->

<menu class="menu">


    <button class="menu__item active" style="--bgColorItem: #ff8c00;" >

      <svg class="icon" viewBox="0 0 24 24">

        <path d="M3.8,6.6h16.4"/>

        <path d="M20.2,12.1H3.8"/>

        <path d="M3.8,17.5h16.4"/>



    <button class="menu__item" style="--bgColorItem: #f54888;"> 

      <svg class="icon" viewBox="0 0 24 24">

        <path  d="M6.7,4.8h10.7c0.3,0,0.6,0.2,0.7,0.5l2.8,7.3c0,0.1,0,0.2,0,0.3v5.6c0,0.4-0.4,0.8-0.8,0.8H3.8


        <path  d="M3.4,12.9H8l1.6,2.8h4.9l1.5-2.8h4.6"/>



    <button class="menu__item" style="--bgColorItem: #4343f5;" >

      <svg class="icon" viewBox="0 0 24 24">

      <path  d="M3.4,11.9l8.8,4.4l8.4-4.4"/>

      <path  d="M3.4,16.2l8.8,4.5l8.4-4.5"/>

      <path  d="M3.7,7.8l8.6-4.5l8,4.5l-8,4.3L3.7,7.8z"/>


    <button class="menu__item" style="--bgColorItem: #e0b115;" > 

      <svg class="icon" viewBox="0 0 24 24" >

        <path  d="M5.1,3.9h13.9c0.6,0,1.2,0.5,1.2,1.2v13.9c0,0.6-0.5,1.2-1.2,1.2H5.1c-0.6,0-1.2-0.5-1.2-1.2V5.1


        <path  d="M4.2,9.3h15.6"/>

        <path  d="M9.1,9.5v10.3"/>


    <button class="menu__item" style="--bgColorItem:#65ddb7;">

      <svg class="icon" viewBox="0 0 24 24" >

        <path  d="M5.1,3.9h13.9c0.6,0,1.2,0.5,1.2,1.2v13.9c0,0.6-0.5,1.2-1.2,1.2H5.1c-0.6,0-1.2-0.5-1.2-1.2V5.1


        <path  d="M5.5,20l9.9-9.9l4.7,4.7"/>

        <path  d="M10.4,8.8c0,0.9-0.7,1.6-1.6,1.6c-0.9,0-1.6-0.7-1.6-1.6C7.3,8,8,7.3,8.9,7.3C9.7,7.3,10.4,8,10.4,8.8z"/>



    <div class="menu__border"></div>


  <div class="svg-container">

    <svg viewBox="0 0 202.9 45.5" >

      <clipPath id="menu" clipPathUnits="objectBoundingBox" transform="scale(0.0049285362247413 0.021978021978022)">

        <path  d="M6.7,45.5c5.7,0.1,14.1-0.4,23.3-4c5.7-2.3,9.9-5,18.1-10.5c10.7-7.1,11.8-9.2,20.6-14.3c5-2.9,9.2-5.2,15.2-7






<!-- partial -->

  <script  src="./script.js"></script> 




html {

    box-sizing: border-box;

    --bgColorMenu : #1d1d27;

    --duration: .7s;    


html *,

html *::before,

html *::after {

    box-sizing: inherit;




    margin: 0;

    display: flex;

    height: 30vh;

    overflow: hidden;

    align-items: center;

    justify-content: center;

    background-color: #ffffff;

    -webkit-tap-highlight-color: transparent;

    transition: background-color var(--duration);



    margin: 0;

    display: flex;

    /* Works well with 100% width  */


    font-size: 1.5em;

    padding: 0 2.85em;

    position: relative;

    align-items: center;

    justify-content: center;

    background-color: var(--bgColorMenu);





    all: unset;

    flex-grow: 1;

    z-index: 100;

    display: flex;

    cursor: pointer;

    position: relative;

    border-radius: 50%;

    align-items: center;

    will-change: transform;

    justify-content: center;

    padding: 0.55em 0 0.85em;

    transition: transform var(--timeOut , var(--duration));





    content: "";

    z-index: -1;

    width: 4.2em;

    height: 4.2em;

    border-radius: 50%;

    position: absolute;

    transform: scale(0);

    transition: background-color var(--duration), transform var(--duration);


} {

    transform: translate3d(0, -.8em , 0);



    transform: scale(1);

    background-color: var(--bgColorItem);




    width: 2.6em;

    height: 2.6em;

    stroke: white;

    fill: transparent;

    stroke-width: 1pt;

    stroke-miterlimit: 10;

    stroke-linecap: round;

    stroke-linejoin: round;

    stroke-dasharray: 400;


} .icon {

    animation: strok 1.5s reverse;



@keyframes strok {

    100% {

        stroke-dashoffset: 400;




    left: 0;

    bottom: 99%;

    width: 10.9em;

    height: 2.4em;

    position: absolute;

    clip-path: url(#menu);

    will-change: transform;

    background-color: var(--bgColorMenu);

    transition: transform var(--timeOut , var(--duration));



.svg-container {

    width: 0;

    height: 0;


@media screen and (max-width: 50em) {


        font-size: .8em;




// Designed by:  Mauricio Bucardo

// Original image:


"use strict"; 

const body = document.body;

const bgColorsBody = ["#ffb457", "#ff96bd", "#9999fb", "#ffe797", "#cffff1"];

const menu = body.querySelector(".menu");

const menuItems = menu.querySelectorAll(".menu__item");

const menuBorder = menu.querySelector(".menu__border");

let activeItem = menu.querySelector(".active");

function clickItem(item, index) {

   //var div = document.getElementById("x");



    if (activeItem == item) return;


    if (activeItem) {




    item.classList.add("active"); = bgColorsBody[index];

    activeItem = item;

    offsetMenuBorder(activeItem, menuBorder);




function offsetMenuBorder(element, menuBorder) {

    const offsetActiveItem = element.getBoundingClientRect();

    const left = Math.floor(offsetActiveItem.left - menu.offsetLeft - (menuBorder.offsetWidth  - offsetActiveItem.width) / 2) +  "px"; = `translate3d(${left}, 0 , 0)`;


offsetMenuBorder(activeItem, menuBorder);

menuItems.forEach((item, index) => {

    item.addEventListener("click", () => clickItem(item, index));



window.addEventListener("resize", () => {

    offsetMenuBorder(activeItem, menuBorder);"--timeOut", "none");


Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Balu Al


Hi, Michel -

This is exactly what I want and you hit the nail on the head. However,

1. I want to use the pictures that are in the same directory as the html, css, js files are. Somehow I cannot get them to work with the code. 

2. I want the pictures right underneath the menu bar, exactly as wide as the menu bar. Maybe leave some gap between the menu bar and the pictures.

Thank you a ton for your help!

Avatar of Balu Al


OK, I was able to figure it out myself. Thank you a lot for you help, Michel

For 1, I did add the following code in the html

<img id="staticImage" src="file://C:/MVBP" style="width:100%; height:100%"/>

Open in new window

For 2, I added this in the js file: = '150px'; = '-1127px'; = '750px'; = '820px';


To use images in the same dir, just do

<img id="staticImage" src="image1.jpg" />

const images = [

and move

width:100%; height:100%;
to the css