Net Framework, Office 365, C#, WPF, ASP.Net, Visual Studio, Programmiersprachen PC, C# Programmieren, vba, SQL Server, free source code snippets Antivirus free
#

 

 

Dieses Code Beispiel fügt einem HTML Image beim Maus-Click einen veränderbaren Rahmen hinzu.

Beim Ziehen des Rahmens in der rechten unteren Ecke verändert sich dann auch die dargestellt Bild-Größe.

Wenn man den Editor (div-Element) verlässt, werden automatisch alle Resize-Rahmen entfernt und die Image-Größen bleiben erhalten.

 

Sobald man in ein Bild klickt, erscheint ein roter Rahmen, welchem man in der Größe verändern kann.

 

Beim Verlassen des Editor-Div-Bereichs werden die roten Resize-Rahmen entfernt

 

 

Javascript Code,

HTML, javascript

<div contenteditable="true" id="ctlEditor_HTML" style="resize:vertical" >

</div>

 

 

<button type="button" title="optimize" onclick="add_Events_in_Editor();">Test</button>

@*------------< script: Image-Tools >------------*@

<script>

    //----< events >----

    function add_Events_in_Editor() {

        //------< add_Events_in_Editor() >------

        //< add >

        //*add when click on image

        set_Event_on_Children("ctlEditor_HTML", "img", "click");

        //</ add >

 

        //< remove >

        //*remove all divResize when leaving

        var divEditorHTML = document.getElementById("ctlEditor_HTML");

        divEditorHTML.addEventListener("mouseleave", remove_all_ImageResize_Divs);

        //</ remove >

        //------</ add_Events_in_Editor() >------

    }

 

 

    function set_Event_on_Children(sElementID, sChildren_Tagname, sEventname) {

        //----< set_Event_on_Children() >----

        //*sets an event to all children with match type

 

        var div = document.getElementById(sElementID);

        var elements = div.getElementsByTagName(sChildren_Tagname);

 

        //< loop: children >

        for (var i = 0; i < elements.length; i++) {

            //< attach event >

            elements[i].addEventListener(sEventname, add_Sizeable_Div, { once: true });

            //</ attach event >

        }

        //</ loop: children >

        //----</ set_Event_on_Children() >----

    }

 

    function add_Sizeable_Div() {

        //------< add_Sizeable_Div() >------

        //*adds a sizable div-around the image

 

        //< adapt image >

        var img = this;

        var intWidth = img.width;

        img.style.width = "100%";

        //</ adapt image >

 

        //< create div >

        var div = document.createElement("div");

        div.setAttribute("contenteditable", "true");

        div.setAttribute("class", "divResizeImage");

        div.style.resize = "both";

        div.style.overflow = "auto";

        div.style.width = intWidth + "px";

        div.style.paddingRight = "6px";

        div.style.paddingBottom = "6px";

        div.style.border = "1px solid red";

        //</ create div >

 

        //< move img into div >

        //*jquery wrap

        this.parentNode.append(div);

        div.appendChild(this);

        //</ move img into div >

 

        //------</ add_Sizeable_Div() >------

    }

 

    function remove_all_ImageResize_Divs() {

        //----< remove_all_ImageResize_Divs() >----

        //*removes all resize-Divs

        //< get divResize >

        var divContainer = document.getElementById("ctlEditor_HTML");

        var divElements = divContainer.getElementsByClassName("divResizeImage");

        //</ get divResize >

 

        //< loop: children >

        var i = 0;

        while (divElements.length > 0) {

            //< check: loop >

            i++;

            if (i > 100) break;

            //</ check: loop >

 

            //< attach event >

            var divResizeImage = divElements[0]

 

            //< get image >

            var img = divResizeImage.firstChild;

            img.style.width = divResizeImage.style.width;

            //</ get image >

 

            divResizeImage.parentNode.append(img);

            divResizeImage.parentNode.removeChild(divResizeImage);

            //</ attach event >

        }

        //</ loop: children >

 

        //< reactivate click >

        set_Event_on_Children("ctlEditor_HTML", "img", "click");

        //</ reactivate click >

        //----</ remove_all_ImageResize_Divs() >----

    }

 

 

   

</script>

@*------------</ script: Image-Tools >------------*@

 

 

 

Mobile
»
Javascript Code: Resize-Border um ein Bild hinzufügen und entfernen
»
Javascript: HTML Element mit einem andern Element umrahmen
»
Javascript : Event an alle Children anhängen
»
Javascript: Style verändern in javascript
»
Remove Class, Css Klasse entfernen in HTML
»
Javascript: onScroll event in HTML Body Window
»
HTML,Javascript: Neue Zeile, Zeilenumbruch in HTML Output element
»
Javascript: Debug script in Visual Studio at Runtime
»
HTML,Javascript: Einbetten eines kleinen script zwischen HTML Bereichen

.

Jobs, Projekte, Angebote für Freiberufler, Selbstständig an Raimund.Popp@Microsoft-Programmierer.de