Roland Würfl: Frage zum Wiki-Artikel „Funktion“

problematische Seite

hallo Ich bräuchte ein script das folgendes macht; es sollen zwei bilder sichtbar sein die wenn sie angeklickt werden ihre position tauschen

das ist mein script ,das ersetzt jedoch nur ein bild gegen das andere:

html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bildwechsel </title>
<script>

orig=new Image(50,50);
orig.src="html-seminar.jpg";
neu=new Image(50,50);
neu.src="minion.jpg";

function
bildWechsel(welches,gegenwelches)
{document.images[welches].src=gegenwelches.src;

}

</script>
</head>



<body>
<A href=#"
onclick="bildWechsel('einbild',neu)"
onmouseover="bildWechsel('einbild',orig)"

return false;>

<IMG src="html-seminar.jpg" name="einbild"
witdh="50" height="50" border="0">
</A>
</body>
</html>

Könnte mir da jemand einen tipp geben

  1. problematische Seite

    @@Roland Würfl

    Bevor sich jemand auf das JavaScript-Problem stürzt, erstmal vorab die HTML-Fehler:

    html>
    

    Hier fehlt (neben dem <) die erforderliche Angabe der Sprache. Für deutsch:

    <html lang="de">
    

    <A href=#"
    onclick="bildWechsel('einbild',neu)"
    onmouseover="bildWechsel('einbild',orig)"
    
    return false;>
    

    <a href="#"> ist immer™[1] falsch. Links führen zu anderen Stellen im Web (bzw. auf der aktuellen Seite). Zum Auslösen von Aktionen sind Buttons da:

    <button onclick="">
    

    Gerade für Nutzer assistiver Technologien ist die Unterscheidung wichtig.

    Das return false; ist dir irgendwie verrutscht. Bei einem <button> brauchst du das nicht.


    <IMG src="html-seminar.jpg" name="einbild"
    witdh="50" height="50" border="0">
    

    Hier fehlt der Alternativtext, der angezeigt (bzw. angesagt) wird, wenn das Bild nicht geladen wird oder die Nutzerin keine Bilder sehen kann.

    Für rein dekorative Bilder muss alt="" angegeben werden. Deinen Bilder sind vermutlich nicht nicht rein dekorativ, sollten also einen richtigen Alternativtext haben.

    😷 LLAP

    --
    „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
    — Joachim Gauck über Impfgegner

    1. wenn es sich nicht gerade um einen Sprung zum Seitenanfang handelt ↩︎

    1. problematische Seite

      Hallo Gunnar,

      Zum Auslösen von Aktionen sind Buttons da

      Hmpf, ja, wollte ich eigentlich geschrieben haben bevor ich mich in Details verlor 😉

      Wenn der Button in einem Form enthalten ist und das Form nicht submitten soll, braucht er auch noch das type="button" Attribut.

      Hier fehlt der Alternativtext, der angezeigt (bzw. angesagt) wird

      und der umgeschaltet werden muss, wenn das Bild ausgetauscht wird.

      Rolf

      --
      sumpsi - posui - obstruxi
  2. problematische Seite

    Hallo Roland,

    dieses HTML hat eine Menge Probleme.

    • Vorn fehlt ein < vor html>, aber ich denke mal, das war nur ein Kopierfehler
    • Wenn Du möchtest, dass zwei Bilder ihre Position tauschen, solltest Du auch zwei <img> Elemente haben. Oder hast Du das ungenau beschrieben und möchtest, dass in einem img-Element ein Bild durch ein anderes ausgetauscht wird?
    • Dem href im <a> Element fehlt ein Anführungszeichen. Der Browser bekommt das zwar irgendwie auf die Reihe, aber sowas sollte man trotzdem nicht stehen lassen.
    • Mitten im HTML steht ein einsames return false;. Das ist JavaScript außerhalb eines script-Elements, bzw. eines "on..." Attributs, und es steht an einer Stelle, wo das a Element Attribute erwartet - da gehört kein Script hin. Ich nehme an, Du möchtest das im click-Handler drin haben, damit der Klick nicht den Link aktiviert. Also so:

    onclick="bildWechsel('einbild',neu); return false;"

    • Derzeit hast Du einen click-Handler und einen mouseover-Handler. Wenn die Maus den Link "berührt", wird vom mouseover-Handler das alte Bild angezeigt. Klickt man, kommt durch den click-Handler das neue Bild. Bewegt man danach die Maus, kommt vom mousemove das alte Bild zurück. Ist das das Verhalten, das Du möchtest?

    Rolf

    --
    sumpsi - posui - obstruxi
    1. problematische Seite

      @@Rolf B

      • Dem href im <a> Element fehlt ein Anführungszeichen.

      Nein. Das a-Element als solches ist falsch.

      Traurig, dass man das immer wieder sagen muss – selbst denen, die das eigentlich wissen sollten.

      😷 LLAP

      --
      „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
      — Joachim Gauck über Impfgegner
      1. problematische Seite

        Hallo Gunnar,

        wobei nicht klar ist, was der eigentlich Zweck der Seite ist. Je nach Kombination von client- und serverseitigen Aktionen (z.B. eine Bildergalerie) ist ein a Element durchaus richtig.

        Rolf

        --
        sumpsi - posui - obstruxi
        1. problematische Seite

          @@Rolf B

          wobei nicht klar ist, was der eigentlich Zweck der Seite ist. Je nach Kombination von client- und serverseitigen Aktionen (z.B. eine Bildergalerie) ist ein a Element durchaus richtig.

          <a href="#"> ist niemals™ richtig.

          <a href="path/to/image"> mag richtig sein, wenn’s der Fallback ist, das andere Bild anzuzeigen. Per unsobstrusive JavaScript kann dann der Bildwechsel auf der aktuellen Seite vollzogen werden (progressive enhancement).

          Der Fall liegt aber hier nicht vor.

          😷 LLAP

          --
          „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
          — Joachim Gauck über Impfgegner
    2. problematische Seite

      Nein die beiden Bilder sollten ihre Position gegenseitig austauschen Also das Script so ändern dass anstelle des Bildwechsels( eines gegen einanderes)Die Bilder bei zb onclick Komplett die Position tauschen aber immer beide sichtbar sind Das mit dem bildwechsel funktioniert ja eh schon Ein paar html Fehler sind reine Kopierfehler

      1. problematische Seite

        Hallo Rolandw,

        gut, dann brauchst Du zwei <img> Elemente, weil Du ja auch zwei Bilder anzeigen willst.

        Die "Position tauschen" kannst Du im Script auf 2 Arten tun:

        • src und alt Attribute der img-Elemente vertauschen
        • die Elemente selbst anders positionieren.

        Was geht, hängt auch davon ab, wie dein HTML aussieht. Sind die Bilder nebeneinander im gleichen Elternelement? Oder stehen sie an ganz an verschiedenen Stellen der Seite?

        Bei einem solchen HTML

          <div id="container">
            <img src="..." alt="...">
            <img src="..." alt="...">
          </div>
        

        könntest Du mit querySelector("#container img:first-child") das erste img-Element im Container heraussuchen und es dann mit appendChild als letztes Element anhängen - dadurch wird es von seiner bisherigen Position entfernt.

        Ob das für dich passt, hängt von deinem HTML ab.

        Lektüre im Selfwiki:

        Rolf

        --
        sumpsi - posui - obstruxi
        1. problematische Seite

          @@Rolf B

          Was geht, hängt auch davon ab, wie dein HTML aussieht.

          Zunächst aber erstmal davon, wie die Bilder aussehen. Haben sie die gleiche Breite und Höhe?

          😷 LLAP

          --
          „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
          — Joachim Gauck über Impfgegner
          1. problematische Seite

            Hallo Gunnar,

            gleiche Dimensionen? Och, wieso? Man kann doch problemlos ein 30x200 mit einem 2500x700 Bild vertauschen, dem Browser ist das komplett wurscht. Der rendert das schon.

            Dass es für den Benutzer nicht schei...ußlich aussehen soll, steht nicht in den Requirements 😉

            Rolf

            --
            sumpsi - posui - obstruxi
        2. problematische Seite

          Ja sind nebeneinander im selben html document Werde das ausprobieren Danke euch mal so weit

          1. problematische Seite

            @@Rolandw

            Ja sind nebeneinander im selben html document

            Sie stehen auch nebeneinander auf der Seite? Dann ist das Tauschen schneller gemacht als der Hase rennen kann.

            😷 LLAP

            --
            „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
            — Joachim Gauck über Impfgegner
            1. problematische Seite

              Hallo Gunnar,

              DOM Reihenfolge ≠ Visuelle Reihenfolge? Uh oh…

              Rolf

              --
              sumpsi - posui - obstruxi
              1. problematische Seite

                @@Rolf B

                DOM Reihenfolge ≠ Visuelle Reihenfolge? Uh oh…

                Ja, ich weiß.

                Die Frage ist, ob das Vertauschen Speielerei ist oder ob da ein Sinn hintersteckt.

                Vielleicht kann Roland ja mal erläutern, was das eigentlich soll.

                😷 LLAP

                --
                „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
                — Joachim Gauck über Impfgegner
            2. problematische Seite

              Ja sind nebeneinander!

            3. Dieser Beitrag wurde gelöscht: Der Beitrag ist ein Duplikat eines anderen Beitrags.
            4. problematische Seite

              wie lautet jetzt also das komplette script

              1. problematische Seite

                Hallo Roland,

                falls Du es noch nicht bemerkt hast: diesen Teil der Aufgabe wollen wir Dir überlassen. Infos zum "How To" hast Du hinreichend erhalten.

                Bau mal ein, was Du hier erfahren hast. Wenn Du Hinweise nicht verstehst, frage gern rück. Sicherlich finden wir dann noch Quellen zum weiteren Selbststudium oder können erklären.

                Rolf

                --
                sumpsi - posui - obstruxi
              2. problematische Seite

                @@Roland Würfl

                wie lautet jetzt also das komplette script

                console.log('Du bist ein Troll.');
                

                😷 LLAP

                --
                „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
                — Joachim Gauck über Impfgegner
              3. problematische Seite

                Hallo,

                wie lautet jetzt also das komplette script

                Das sinnvolle Benennen solcher Scripte ist auch eine Kunst für sich. In diesem Fall könnte es "Bilderwechsel-Script" lauten.

                Gruß
                Kalk

        3. problematische Seite

          @@Rolf B

          könntest Du mit querySelector("#container img:first-child") das erste img-Element im Container heraussuchen und es dann mit appendChild als letztes Element anhängen

          Könntest du. Ist aber Quatsch.

          Für das visuelle Rumschubsen auf der Seite muss man nicht das DOM ändern.

          😷 LLAP

          --
          „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
          — Joachim Gauck über Impfgegner
          1. problematische Seite

            sondern? Wie die Bilder tauschen ohne das Dom ändern

            1. problematische Seite

              @@Roland Würfl

              sondern? Wie die Bilder tauschen ohne das Dom ändern

              Wie gezeigt.

              😷 LLAP

              --
              „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
              — Joachim Gauck über Impfgegner
              1. problematische Seite

                <html>
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>Html Grundgerüst</title>
                
                <style type="text/css">
                div {
                	display: flex;
                	gap: 1em;
                	margin-bottom: 1em;
                }
                
                div.reversed img:last-child {
                	order: -1;	
                }
                
                img {
                	width: 15em;
                	height: 10em;
                }
                
                footer {
                	font: 0.8em sans-serif;
                	margin-top: 3em;
                }
                </style>
                <script>
                
                
                const divElement = document.querySelector('div');
                const buttonElement = document.querySelector('button');
                
                buttonElement.addEventListener('click', (event) => {
                	divElement.classList.toggle('reversed');
                });
                </script>
                </head>
                
                
                <body>
                <form>
                
                <div lang="de">
                	<img src="https://images.unsplash.com/photo-1506328177866-9e307a27fbca?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8aGFyZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="Hase"/>
                	<img src="https://images.unsplash.com/photo-1605369179814-cfc635981c03?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aGVkZ2Vob2d8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="Igel"/>
                </div>
                
                <p>
                <button>Ick bin schon da!</button>
                <footer>Photos by Vincent van Zalinge and Alexas_Fotos on Unsplash</footer>
                </p>
                </form>
                
                </body>
                </html>
                

                kommt der lösung näher oder😎😒

                1. problematische Seite

                  @@Roland Würfl

                  <html>
                  <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                  <title>Html Grundgerüst</title>
                  
                  <style type="text/css">
                  div {
                  	display: flex;
                  	gap: 1em;
                  	margin-bottom: 1em;
                  }
                  
                  div.reversed img:last-child {
                  	order: -1;	
                  }
                  
                  img {
                  	width: 15em;
                  	height: 10em;
                  }
                  
                  footer {
                  	font: 0.8em sans-serif;
                  	margin-top: 3em;
                  }
                  </style>
                  <script>
                  
                  
                  const divElement = document.querySelector('div');
                  const buttonElement = document.querySelector('button');
                  
                  buttonElement.addEventListener('click', (event) => {
                  	divElement.classList.toggle('reversed');
                  });
                  </script>
                  </head>
                  
                  
                  <body>
                  <form>
                  
                  <div lang="de">
                  	<img src="https://images.unsplash.com/photo-1506328177866-9e307a27fbca?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8aGFyZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="Hase"/>
                  	<img src="https://images.unsplash.com/photo-1605369179814-cfc635981c03?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aGVkZ2Vob2d8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="Igel"/>
                  </div>
                  
                  <p>
                  <button>Ick bin schon da!</button>
                  <footer>Photos by Vincent van Zalinge and Alexas_Fotos on Unsplash</footer>
                  </p>
                  </form>
                  
                  </body>
                  </html>
                  

                  kommt der lösung näher oder😎😒

                  Glückwunsch! Du hast es geschafft, die 3 Teile aus dem Pen richtig zusammenzusetzen.

                  Naja, fast richtig. lang="de" gehört nicht ans div, sondern ganz oben ans html-Element. (Das lässt sich in CodePen im Markup nicht machen.)

                  Und warum hast du das verschlimmbessert und ein form-Element eingebaut, wo es doch gar kein Formular gibt?

                  😷 LLAP

                  --
                  „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
                  — Joachim Gauck über Impfgegner
                  1. problematische Seite

                    <html lang=”de”>
                    <head>
                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                    <title>Html Grundgerüst</title>
                    
                    <style type="text/css">
                    div {
                    	display: flex;
                    	gap: 1em;
                    	margin-bottom: 1em;
                    }
                    
                    div.reversed img:last-child {
                    	order: -1;	
                    }
                    
                    img {
                    	width: 15em;
                    	height: 10em;
                    }
                    
                    footer {
                    	font: 0.8em sans-serif;
                    	margin-top: 3em;
                    }
                    </style>
                    <script>
                    
                    
                    const divElement = document.querySelector('div');
                    const buttonElement = document.querySelector('button');
                    
                    buttonElement.addEventListener('click', (event) => {
                    	divElement.classList.toggle('reversed');
                    });
                    </script>
                    </head>
                    
                    
                    <body>
                    
                    
                    
                    	<img src="https://images.unsplash.com/photo-1506328177866-9e307a27fbca?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8aGFyZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="Hase"/>
                    	<img src="https://images.unsplash.com/photo-1605369179814-cfc635981c03?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aGVkZ2Vob2d8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="Igel"/>
                    
                    
                    
                    <button>Ick bin schon da!</button>
                    <footer>Photos by Vincent van Zalinge and Alexas_Fotos on Unsplash</footer>
                    
                    
                    
                    </body>
                    </html>
                    

                    Form ist weg lang=”de” steht Head ? Hab ich soweit geändert

  3. problematische Seite

    Servus!

    hallo Ich bräuchte ein script das folgendes macht;

    es sollen zwei bilder sichtbar sein die wenn sie angeklickt werden ihre position tauschen

    das ist mein script ,das ersetzt jedoch nur ein bild gegen das andere:

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script>
    
    orig.src="html-seminar.jpg";
    ... 
    </script>
    

    Könnte mir da jemand einen tipp geben

    Ja, es wurde dir schon mehrfach gesagt, dass Dein Script, bzw. die Vorlage fehlerhaft ist.

    Hier ist ein modernes Tutorial:

    Am Schluss des letzten Kapitels findest Du einen Bildwechsler. Er tut zwar nicht so, wie du wünschst - kann aber zur Veranschaulichung dienen.

    Herzliche Grüße

    Matthias Scharwies

    BTW: Das ist ja keine Frage zum Wiki sondern zu einem Tutorial / Video von html-seminar.de.

    --
    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    1. problematische Seite

      Hallo Matthias,

      sondern zu einem Tutorial / Video von html-seminar.de.

      Hast Du da einen Bezugspunkt gefunden? Welchen?

      Rolf

      --
      sumpsi - posui - obstruxi
      1. problematische Seite

        Servus!

        Hallo Matthias,

        sondern zu einem Tutorial / Video von html-seminar.de.

        Hast Du da einen Bezugspunkt gefunden? Welchen?

        Eine der URLs in seinem Script-Beispiel:

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script>
        
        orig.src="html-seminar.jpg";
        ... 
        </script>
        

        Herzliche Grüße

        Matthias Scharwies

        --
        Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
        1. problematische Seite

          Servus!

          sondern zu einem Tutorial / Video von html-seminar.de.

          Hast Du da einen Bezugspunkt gefunden? Welchen?

          Eine der URLs in seinem Script-Beispiel:

          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <script>
          
          orig.src="html-seminar.jpg";
          ... 
          </script>
          

          Generell:

          • Die Verwendung von Document.images[wechsel]
          • Die Großschreibung von HTML-Elementen, wie sie in den 90ern üblich war.
          • onclick-Attribute
          • Der fehlerhafte Betreff: "Frage zum Wiki-Artikel „Funktion“"

          Was folgte: 15 Posts, in denen sich an Kleinigkeiten abgearbeitet wurde.

          Der erste Post, in dem auf moderne DOM-Methoden im Wiki verwiesen wird, erhält eine negative Bewertung!?!

          Jeden berechtigten Einwand von Euch wischt der Thread-Ersteller mit "Funktioniert doch" weg.

          In so einem Fall wäre es imho empfehlenswert, gleich kurz auf den veralteten Code und dann auf ein modernes Tutorial im SELF-Wiki oder bei MDN hinzuweisen.

          Herzliche Grüße

          Matthias Scharwies

          --
          Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
          1. problematische Seite

            @@Matthias Scharwies

            Der erste Post, in dem auf moderne DOM-Methoden im Wiki verwiesen wird, erhält eine negative Bewertung!?!

            Ja, weil erstmal geklärt werden müsste, ob man im betreffenden Anwendungsfall (den wir immer noch nicht kennen) wirklich am DOM rummachen will oder das Tauschen rein visuell macht.

            Da hab ich das vorhandene Plus neutralisiert. Von 0 auf −1 hätte ich Rolfs Posting nicht runtergewertet.

            Reihenfolge im DOM und visuelle Reihenfolge sollten i.a.R. schon übereinstimmen (accessibility). Jedenfalls initial. Aber bei nachträglichem Umsortieren – wer weiß?

            😷 LLAP

            --
            „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
            — Joachim Gauck über Impfgegner