Code Asteroid IDE : How to create image annotation / marker in HTML and JavaScript

- Home
- Services
- Our Products
  ›
  - Back
    ‹
  - Palette RGB
  - Code Asteroid
- Skill Test
- Code War
- Videos
- News
  ›
  - Back
    ‹
  - Jobs & Hiring
  - Tech News
  - Startups
- Aptitude Test
- Technology
  ›
  - Back
    ‹
  - Developer Corner
  - Tutorials

How to create image annotation / marker in HTML and JavaScript Views: 992 By: Ankur Hack

Contribute Run

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

<div class="image-marker-wrapper">
<div class="image-showcase-con" style="margin-bottom: 10px;">
    <div class="field image-annotation-plugin-con" data-annotatedimageid="demo" id="uniqueInspectionId">
        <label class="field-label"><strong>Image Anotation / Marker Tool (Click on image to add marker)</strong></label>
        <div class="vehicle-angle-image-con">
            <div class="inspectionImage-con">
                <img src="https://www.palettergb.com/ImagesGallery/CompressImage/2022-01-22-01-46-DSC-7973.JPG" />
                <div class="image-marker-overlay">
                    <div class="image-marker-cc">

                        <!-- Hard Code Demo Marker --Start -->
                        <div class="image-marker-item" style="top:116px;left:178px">
                            <div class="image-marker-Note">
                                <div class="image-market-icon">
                                    <i class="fas fa-map-marker-alt"></i>
                                </div>
                                <div class="image-marker-text" style="display: none;">
                                    <div class="form-marker-div" style="display: none;">
                                        <div>
                                            <div class="field-inline">
                                                <label class="field-label" for="_called">Description</label>
                                                <textarea class="market-note-textarea" rows="4" cols="25"></textarea>
                                            </div>
                                            <div class="form-action-buttons">
                                                <button type="button" onclick="saveMarkerText(this)"
                                                    class="marker-note-save">Add</button>
                                                <button type="button" onclick="cancelMarker(this)"
                                                    class="marker-note-cancel">Cancel</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="edit-and-markerCon" style="">
                                        <div class="field-inline">
                                            <label class="field-label" for="_called">Description</label>
                                            <p class="marker-text">Bulb Light 1</p>
                                        </div>

                                        <div class="edit-marker-buttons">
                                            <a onclick="editAnnotationNote(this)"><i class="fas fa-edit"></i></a>
                                            <a onclick="cancelMarker(this)"><i class="fas fa-trash"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Hard Code Demo Marker --End -->

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

CSS

.image-showcase-con{
  width:500px;
  margin:auto;
}   
.vehicle-angle-image-con {
        max-width: 100%
        padding: 10px;
        border: 2px solid #c6c6c6;
    }

    .inspectionImage-con {
        position: relative;
    }

    .vehicle-angle-image-con img {
        width: 100%;
    }


    .image-marker-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .image-marker-c {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .image-marker-cc {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .image-marker-item {
        position: absolute;
        font-size: 25px;
        background-color: #00000073;
    }

    .image-marker-Note {
        position: relative;
        background-color: rgba(0,0,0,0.5); /* Black background with opacity */
        z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    }

    .image-market-icon {
        position: absolute;
        top: -26px;
        left: -8px;
        color: #f80000;
    }

    .image-marker-text {
        color: #fff;
        padding: 10px;
        font-size: 14px;
        z-index: 99;
        position: relative;
    }

    .image-marker-Note:hover .image-marker-text {
        display: block !important;
    }

    .edit-marker-buttons a {
        color: #fff;
        cursor: pointer;
    }
.field-label{
  text-align:center;
  padding:10px
}

$(".image-marker-cc").on("click", function (event) {
    var className = event.target.className;
    if (className === "image-marker-cc") {
        var isEditorAlreadyOpen = $(event.target).find(".editing").length;
        if (isEditorAlreadyOpen == 0) {
            var x = event.originalEvent.layerX - this.offsetLeft + "px";
            var y = event.originalEvent.layerY - this.offsetTop + "px";
            var generateId = event.originalEvent.layerX - this.offsetLeft;
            var markerElementItem = `<div class="image-marker-item editing" style="top:` + y + `;left:` + x + `">
                                <div class="image-marker-Note">
                                    <div class="image-market-icon">
                                        <i class="fas fa-map-marker-alt"></i>
                                    </div>
                                    <div class="image-marker-text">
                                        <div class="form-marker-div">
                                            <div><div class="field-inline">
                                                  <label class="field-label" for="_called">Description</label>
                                                     <textarea class="market-note-textarea" rows="4" cols="25"></textarea>
                                                </div>
                                            <div class="form-action-buttons">
                                                <button type="button" onClick="saveMarkerText(this)" class="marker-note-save">Add</button>
                                                <button type="button" onClick="cancelMarker(this)" class="marker-note-cancel">Cancel</button>
                                          </div>
                                 </div>
                           </div>
                        <div class="edit-and-markerCon" style="display:none;">
                            <div class="field-inline">
                                  <label class="field-label" for="_called">Description</label>
                                <p class="marker-text"></p>
                            </div>
                         
                         <div class="edit-marker-buttons">
                                <a onclick="editAnnotationNote(this)"><i class="fas fa-edit"></i></a>
                                <a onClick="cancelMarker(this)"><i class="fas fa-trash"></i></a>
                         </div>
                       </div>
                    </div>
                </div>
            </div>`;
            $(event.currentTarget).append(markerElementItem);
            $(event.currentTarget).find(".market-note-textarea").focus();
        }
    }
});

function saveMarkerText(e) {
    var parentCon = $(e).closest(".image-marker-text");
    var formCon = $(parentCon).find(".form-marker-div");
    var formTextAreaValue = $(parentCon).find(".market-note-textarea").val();
    var editMarkerCon = $(parentCon).find(".edit-and-markerCon");
    $(parentCon).find(".marker-text")[0].innerText = formTextAreaValue;

    if (formTextAreaValue != "" && formTextAreaValue != null) {
        $(formCon).hide();
        parentCon.hide();
        $(editMarkerCon).show();
        $(e).closest(".image-marker-item").removeClass("editing");
    } else {
        cancelMarker(e);
    }
}

function editAnnotationNote(e) {
    var itemsParentCon = $(e).closest(".image-marker-text");
    var editMarkerCon = $(itemsParentCon).find(".edit-and-markerCon");
    var markerNoteText = $(itemsParentCon).find(".marker-text")[0].innerText;

    var markerFormCon = $(itemsParentCon).find(".form-marker-div");
    var markerTextArea = $(itemsParentCon).find(".market-note-textarea");
    markerTextArea.val(markerNoteText);

    $(e).closest(".image-marker-item").addClass("editing");
    editMarkerCon.hide();
    itemsParentCon.show();
    markerFormCon.show();
    markerTextArea.focus();
}

function cancelMarker(e) {
    $(e).closest(".image-marker-item").detach();
}

Site

Training

Save Code

No code found to submit, Please add code in editors.

Thank you for your contribution. Our experts are soon review your canvas and update you.