nicht angemeldet
Frage zum Wiki-Artikel „Funktion“
Gunnar Bittersmann
Rolf B
Tabellenkalk
Matthias Scharwieshallo 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
-
@@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
wenn es sich nicht gerade um einen Sprung zum Seitenanfang handelt ↩︎
-
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
-
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-
@@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-
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-
@@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
-
-
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
-
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-
@@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-
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
-
-
Ja sind nebeneinander im selben html document Werde das ausprobieren Danke euch mal so weit
-
@@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-
Hallo Gunnar,
DOM Reihenfolge ≠ Visuelle Reihenfolge? Uh oh…
Rolf
--
sumpsi - posui - obstruxi-
@@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
-
-
Ja sind nebeneinander!
-
Dieser Beitrag wurde gelöscht: Der Beitrag ist ein Duplikat eines anderen Beitrags.
-
wie lautet jetzt also das komplette script
-
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 -
@@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 -
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
-
-
-
-
@@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ängenKö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-
sondern? Wie die Bilder tauschen ohne das Dom ändern
-
@@Roland Würfl
sondern? Wie die Bilder tauschen ohne 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-
<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😎😒
-
@@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 ansdiv, sondern ganz oben anshtml-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-
<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
-
-
-
-
-
-
-
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.“-
Hallo Matthias,
sondern zu einem Tutorial / Video von html-seminar.de.
Hast Du da einen Bezugspunkt gefunden? Welchen?
Rolf
--
sumpsi - posui - obstruxi-
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.“-
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.“-
@@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
- Die Verwendung von
-
-
-