Sun. Oct 1st, 2023

[ANSWERED] javascript – Give user ablity to click on images and upload their own picture

By

Nov 20, 2022 css, html, javascript

Solution 1 :

Use label and hide the upload button

<form id='form' method='post' action='/'>
    <label for='img1'>
        <input id='img1' type='file' style='display: none;' />
        <img id='img1_preview' src='' />
    </label>

    <input type='submit' value='Update' />
</form>

When you click the img, which also click on the label it will automatically trigger the input file which will pop up the upload image window, click on the submit to submit the form. It is better to use JS to capture the image and upload it using ajax though, will be more responsive.

Solution 2 :

use this code to choose a image and onclick submit button you need to process it with your baground

<form > <label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile"><br><br> <input type="submit"> </form>

Problem :

I have a profile page consisting of two people. I want users to be able to click on one of two images and upload their own image to one of the image frames

    textarea {
        border: none;
        overflow: auto;
        outline: none;

        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    :root {
        font-size: 10px;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }
    sans-serif;
        min-height: 100vh;
        background-color: #fafafa;
        color: #262626;
        padding-bottom: 3rem;
    }


    img {
        display: block;
    }

    .container {
      
        width: 400px;
        margin-left: auto;
        margin-right: auto;
        max-width: 93.5rem;
        margin: 0 auto;
        padding: 0 2rem;
    }

    .btn {
        display: inline-block;
        font: inherit;
        background: none;
        border: none;
        color: inherit;
        padding: 0;
        cursor: pointer;
    }

    .btn:focus {
        outline: 0.5rem auto #4d90fe;
    }

    .visually-hidden {
        position: absolute !important;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }

    /* Profile Section */

    .profile {
        padding: 5rem 0;
    }

    .profile::after {
        content: "";
        display: block;
        clear: both;
    }


    .profile-user-settings,
    .profile-stats,
    .profile-bio {
        float: left;
        width: calc(66.666% - 2rem);
    }

    .profile-user-settings {
        margin-top: 1.1rem;
    }

    .profile-user-name {
        display: inline-block;
        font-size: 3.2rem;
        font-weight: 300;
    }

    .profile-edit-btn {
        font-size: 1.4rem;
        line-height: 1.8;
        border: 0.1rem solid #dbdbdb;
        border-radius: 0.3rem;
        padding: 0 2.4rem;
        margin-left: 2rem;
    }





    .profile-stats li {
        display: inline-block;
        font-size: 1.6rem;
        line-height: 1.5;
        margin-right: 4rem;
        cursor: pointer;
    }

    .profile-stats li:last-of-type {
        margin-right: 0;
    }



    .profile-real-name,
    .profile-stat-count,
    .profile-edit-btn {
        font-weight: 600;
    }

    /* Gallery Section */

    .gallery {
        display: flex;
        flex-wrap: wrap;
        margin: -1rem -1rem;
        padding-bottom: 3rem;
    }

    .gallery-item {
        position: relative;
        flex: 1 0 22rem;
        margin: 1rem;
        color: #fff;
        cursor: pointer;
    }

    .gallery-item:hover .gallery-item-info,
    .gallery-item:focus .gallery-item-info {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .gallery-item-info {
        display: none;
    }

    .gallery-item-info li {
        display: inline-block;
        font-size: 1.7rem;
        font-weight: 600;
    }

    .gallery-item-likes {
        margin-right: 2.2rem;
    }

    .gallery-item-type {
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 2.5rem;
        text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
    }

    .fa-clone,
    .fa-comment {
        transform: rotateY(180deg);
    }

    .gallery-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }



    /* Media Query */

    @media screen and (max-width: 40rem) {
        .profile {
            display: flex;
            flex-wrap: wrap;
            padding: 4rem 0;
        }

        .profile::after {
            display: none;
        }

        .profile-image,
        .profile-user-settings,
        .profile-bio,
        .profile-stats {
            float: none;
            width: auto;
        }


        .profile-user-settings {
            flex-basis: calc(100% - 10.7rem);
            display: flex;
            flex-wrap: wrap;
            margin-top: 1rem;
        }

        .profile-user-name {
            font-size: 2.2rem;
        }

        .profile-edit-btn {
            order: 1;
            padding: 0;
            text-align: center;
            margin-top: 1rem;
        }

        .profile-edit-btn {
            margin-left: 0;
        }

        .profile-bio {
            font-size: 1.4rem;
            margin-top: 1.5rem;
        }

        .profile-edit-btn,
        .profile-bio,
        .profile-stats {
            flex-basis: 100%;
        }

        .profile-stats {
            order: 1;
            margin-top: 1.5rem;
        }

        .profile-stats ul {
            display: flex;
            text-align: center;
            padding: 1.2rem 0;
            border-top: 0.1rem solid #dadada;
            border-bottom: 0.1rem solid #dadada;
        }

        .profile-stats li {
            font-size: 1.4rem;
            flex: 1;
            margin: 0;
        }

        .profile-stat-count {
            display: block;
        }
    }

    /* Spinner Animation */

    @keyframes loader {
        to {
            transform: rotate(360deg);
        }
    }

    /*

 

    @supports (display: grid) {
        .profile {
            display: grid;
            grid-template-columns: 1fr 2fr;
            grid-template-rows: repeat(3, auto);
            grid-column-gap: 3rem;
            align-items: center;
        }

        .profile-image {
            grid-row: 1 / -1;
        }

        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
            grid-gap: 2rem;
        }

        .profile-image,
        .profile-user-settings,
        .profile-stats,
        .profile-bio,
        .gallery-item,
        .gallery {
            width: auto;
            margin: 0;
        }

        @media (max-width: 40rem) {
            .profile {
                grid-template-columns: auto 1fr;
                grid-row-gap: 1.5rem;
            }

            .profile-image {
                grid-row: 1 / 2;
            }

            .profile-user-settings {
                display: grid;
                grid-template-columns: auto 1fr;
                grid-gap: 1rem;
            }

            .profile-edit-btn,
            .profile-stats,
            .profile-bio {
                grid-column: 1 / -1;
            }

            .profile-user-settings,
            .profile-edit-btn,
            .profile-settings-btn,
            .profile-bio,
            .profile-stats {
                margin: 0;
            }
        }
    }
    @import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800);
    @import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
    figure.snip0056 {
      font-family: 'Raleway', Arial, sans-serif;
      position: relative;
      overflow: hidden;
      margin: 10px;
      min-width: 380px;
      max-width: 480px;
      width: 100%;
      background: #ffffff;
      color: #000000;
    }
    figure.snip0056 * {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    figure.snip0056 > img {
      width: 50%;
      border-radius: 50%;
      border: 4px solid #ffffff;
      -webkit-transition: all 0.35s ease-in-out;
      transition: all 0.35s ease-in-out;
      -webkit-transform: scale(1.6);
      transform: scale(1.6);
      position: relative;
      float: right;
      right: -15%;
      z-index: 1;
    }
    figure.snip0056 figcaption {
      padding: 20px 30px 20px 20px;
      position: absolute;
      left: 0;
      width: 50%;
    }
    figure.snip0056 figcaption h2,
    figure.snip0056 figcaption p {
      margin: 0;
      text-align: left;
      padding: 10px 0;
      width: 100%;
    }
    figure.snip0056 figcaption h2 {
      font-size: 1.3em;
      font-weight: 300;
      text-transform: uppercase;
      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }
    figure.snip0056 figcaption h2 span {
      font-weight: 800;
    }
    figure.snip0056 figcaption p {
      font-size: 0.9em;
      opacity: 0.8;
    }
    figure.snip0056 figcaption .icons {
      width: 100%;
      text-align: left;
    }
    figure.snip0056 figcaption .icons i {
      font-size: 26px;
      padding: 5px;
      top: 50%;
      color: #000000;
    }
    figure.snip0056 figcaption a {
      opacity: 0.3;
      -webkit-transition: opacity 0.35s;
      transition: opacity 0.35s;
    }
    figure.snip0056 figcaption a:hover {
      opacity: 0.8;
    }
    figure.snip0056 .position {
      width: 100%;
      text-align: left;
      padding: 15px 30px;
      font-size: 0.9em;
      opacity: 1;
      font-style: italic;
      color: #ffffff;
      background: #000000;
      clear: both;
    }
    figure.snip0056.blue .position {
      background: #20638f;
    }
    figure.snip0056.red .position {
      background: #962d22;
    }
    figure.snip0056.yellow .position {
      background: #bf6516;
    }
    figure.snip0056:hover > img,
    figure.snip0056.hover > img {
      right: -12%;
    }
    @import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

    #social {
      position: absolute;
      right:    0;
      bottom:   0;
      margin: 20px 10px;
      text-align: center;
    }

    .smGlobalBtn { /* global button class */
        display: inline-block;
        position: relative;
        cursor: pointer;
        width: 50px;
        height: 50px;
        border:2px solid #ddd; /* add border to the buttons */
        box-shadow: 0 3px 3px #999;
        padding: 0px;
        text-decoration: none;
        text-align: center;
        color: #fff;
        font-size: 25px;
        font-weight: normal;
        line-height: 2em;
        border-radius: 27px;
        -moz-border-radius:27px;
        -webkit-border-radius:27px;
    }

    /* facebook button class*/
    .facebookBtn{
        background: #4060A5;
    }

    .facebookBtn:before{ /* use :before to add the relevant icons */
        font-family: "FontAwesome";
        content: "f09a"; /* add facebook icon */
    }

    .facebookBtn:hover{
        color: #4060A5;
        background: #fff;
        border-color: #4060A5; /* change the border color on mouse hover */
    }

    /* twitter button class*/
    .twitterBtn{
        background: #00ABE3;
    }

    .twitterBtn:before{
          font-family: "FontAwesome";
          content: "f099"; /* add twitter icon */
          
    }

    .twitterBtn:hover{
          color: #00ABE3;
          background: #fff;
          border-color: #00ABE3;
    }


    /* instagram button class*/
    .instagramBtn{
        background: #4169E1;
    }

    .instagramBtn:before{
          font-family: "FontAwesome";
          content: "f16d"; /* add instagram icon */
    }

    .instagramBtn:hover{
          color: #00FFFF;
          background: #fff;
          border-color: #4169E1;
    }

    <div class="container">

      <div class="profile">

        <form action="testing.php" method="post">
          <textarea name="text2" rows="2" cols=0> Family Name</textarea><br>
        </form>

        <button class="btn profile-edit-btn">Edit Profile</button>

      </div>
      <!-- End of profile section -->

    </div>
    <!-- End of container -->

    </header>

    <main>

      <div class="container">
        <figure class="snip0056">
          <figcaption>
            <textarea name="text2" rows="2" cols=0>Name(john Doe)</textarea>
            <textarea name="text3" rows="8" cols=20>Bio,Social media, Favorite Quote,A letter to your partner.</textarea>
            </p>

          </figcaption> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample8.jpg" alt="profilepic1" id="imgClickAndChange" onclick="changeImage()"  />

          <div class="position">
            <textarea name="text4" rows="1" cols=9>Proffession</textarea>
          </div>
          </h3>
        </figure>
        <figure class="snip0056 yellow">
          <figcaption>
            <textarea name="text5" rows="2" cols=0>Name(jane Doe)</textarea>
             <textarea name="text6" rows="8" cols=20>Bio,Social media, Favorite Quote,A letter to your partner.</textarea>

          </figcaption><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample9.jpg" alt="sample9" />
          <div class="position">
           <textarea name="text4" rows="1" cols=9>Title</textarea>
        </figure>
        <div id="social">
          <a class="facebookBtn smGlobalBtn" href="https://facebook.com/ngurah.dimas.94"></a>
          <a class="twitterBtn smGlobalBtn" href="https://twitter.com/ngurahdimas"></a>

          <a class="instagramBtn smGlobalBtn" href="http://instagram.com/ngurahdimas_"></a>
        </div>

    </main>

Comments

Comment posted by kalatabe

You can’t do that with just HTML and CSS. This requires either a server backend, or at the very least some client-side JavaScript that uploads the images to a persistent storage (AWS or an image hosting service) and loads those images dynamically on page load.

Comment posted by jipjipinton

yes i am going to then add those images to a mysql server

By

Related Post

[ANSWERED] problem in selecting list item in html/css

Nov 20, 2022

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022

[ANSWERED] html – Trying to align a div to the right using CSS

Nov 20, 2022