#

Download:

Datei 1: Word_Vorlage_Fotos_einfuegen_in_Tabelle.dotm

 

 

Wie kann man in HTML ein Bild austauschen und einen Text-Zahlenwert verändern?

 

Aufgabe:

Ich möchte beim Klicken auf einen Button ein eingebettetes Bild des Buttons verändern und den nebenstehenden Text als Zahl erhöhen oder erniedrigen.

 

Lösung:

Die Lösung der Änderungen zu Laufzeit werden mit javascript oder jQuery auf der Webseite durchgeführt.

 

HTML-Text in Zahl, Zähler ändern:

Ein Text auf einer Webseite wird mit jQuery .text() aus dem Span-HtmlElement gelesen.

Anschliessend kann man mit Number(String) eine Zahl in eine echte Nummer umwandeln.

var counter_Follow = $("#divCount_Follows").text();

counter_Follow = Number(counter_Follow);

Diese kann anschliessend als Nummer erhöht oder verkleinert werden.

Abschliessend kann man die Zahl mit der jQuery .text(Zahl) wieder in ein HTML Element einbetten

counter_Follow = counter_Follow + 1;

$("#divCount_Follows").text(counter_Follow);

 

 

Button Image ändern

Ein Link oder Button Image kann mit jQuery Attribute(..) geändert werden.

Zum Lesen, welches Bild in einem HTMLElement eingebettet ist, kann man das Attribute HtmlElement.src lesen

Image Lesen

$("#imgFollow").attr("src")

 

Man kann ein anderes Bild einem Button oder HtmlTag zuweisen mit der jQuery.HtmlElement.attribute Methode und dem zweiten Parameter

Image Ändern

 $("#imgFollow").attr("src", "/images/Ico/icoPin.png");

 

Ändern, wenn Bild nicht grau, dann auf das Graue Icon wechseln

if ($("#imgFollow").attr("src").indexOf("gray") > 0)

{ $("#imgFollow").attr("src", "/images/Ico/icoPin.png"); }

 

 

jQuery und javascript function zum Ändern der Zahl und des Images

mit jQuery und javascript

    <script>

        function Follow()

        {

            //----< Follow() >----

            var counter_Follow = $("#divCount_Follows").text();

            counter_Follow = Number(counter_Follow);

 

 

            if ($("#imgFollow").attr("src").indexOf("gray") > 0) {

                counter_Follow = counter_Follow + 1;

                $("#divCount_Follows").text(counter_Follow);

                $("#imgFollow").attr("src", "/images/Ico/icoPin.png");

            }

            else {

                counter_Follow = counter_Follow - 1;

                $("#divCount_Follows").text(counter_Follow);

                $("#imgFollow").attr("src", "/images/Ico/icoPin_gray.png");

 

            }

            //----</ Follow() >----

        }

 

    </script>

 

 

 

Beispiel-Code:

Kompletter HTML, jQuery und javascript Code

HTML mit Scrpt in jQuery und javascript

Asp.Net Core Razor View

    @*--------< Like >--------*@

    <style>

        .divInteract {

            /*display:flex;*/

            /*flex-direction:column;*/

            /*padding: 6px;*/

            font-size:small;

            color:gray;

        }

        .interact {

            padding: 6px;

            background: rgba(0,0,0,0.1);

        }

 

        .interact:hover {

                opacity: 0.7;

            }

 

        .interact-img {

            height: 30px;

            width: 30px;

        }

 

        .like { }

    </style>

    <div class="divInteract">

        <br />

        <button type="button" id="btnFollow" class="like" title="abo pin follow" onclick="Follow();"><img id="imgFollow" src="~/images/Ico/icoPin_gray.png" class="interact-img" /></button>

        <span id="divCount_Follows">1234

            @{ if (@Model.Note.sumFollows > 0){ @Model.Note.sumFollows ; }}

            </span>

        <br />

 

        <button type="button" id="btnLike" class="like" title="Like it" onclick="Like();"> <img src="~/images/Ico/icoLike_gray.png" class="interact-img" /></button>

        @{ if (@Model.Note.sumLikes > 0)

        { Html.Raw("(" + Model.Note.sumLikes + ")"); }

        }

 

        <br />

        <button type="button" id="btnDislike" class="like" title="Copy Link and Share to your ID " onclick="Dislike();"> <img src="~/images/Ico/icoDislike_gray.png" class="interact-img" /></button>

        @{ if (@Model.Note.sumDislikes > 0)

        { Html.Raw("(" + Model.Note.sumDislikes + ")"); }

        }

 

        <br />

        <button type="button" id="btnComment" class="like" title="Comment" onclick="Comment();"> <img src="~/images/Ico/icoComment_gray.png" class="interact-img" /></button>

        @{ if (@Model.Note.sumComments > 0)

        { Html.Raw("(" + Model.Note.sumComments + ")"); }

        }

 

    </div>

 

    <script>

        function Follow()

        {

            //----< Follow() >----

            var counter_Follow = $("#divCount_Follows").text();

            counter_Follow = Number(counter_Follow);

 

 

            if ($("#imgFollow").attr("src").indexOf("gray") > 0) {

                counter_Follow = counter_Follow + 1;

                $("#divCount_Follows").text(counter_Follow);

                $("#imgFollow").attr("src", "/images/Ico/icoPin.png");

            }

            else {

                counter_Follow = counter_Follow - 1;

                $("#divCount_Follows").text(counter_Follow);

                $("#imgFollow").attr("src", "/images/Ico/icoPin_gray.png");

 

            }

            //----</ Follow() >----

        }

 

    </script>

    @*--------</ Like >--------*@

 

 

 

 

</div>

@*--------</ DivRight >--------*@

 

 

 

Mobile

.