Kleines JavaScript - Hilfe gesucht

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Post Reply
frase
Posts: 3350
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Kleines JavaScript - Hilfe gesucht

Post by frase » Thu Dec 19, 2019 7:58 am

Ich benötige ein kleines JavaScript das alle Bildtypen auf einer Seite von PNG auf SVG ändert.
Es soll nur Bilder ausgetauscht werden, die sich in einem DIV mit einer bestimmten Klasse befinden.
Kein jQuery, sondern reines JS!

Beispiel IST-Zustand:

Code: Select all

...
<div class="imgDiv">
    <img src="img1.png" alt="img1"><div>
</div>
...
<div class="imgDiv">
    <img src="img2.png" alt="img2"><div>
</div>
...
<div class="imgDiv">
    <img src="img3.png" alt="img3"><div>
</div>
...
SOLL werden:

Code: Select all

...
<div class="imgDiv">
    <img src="img1.svg" alt="img1"><div>
</div>
...
<div class="imgDiv">
    <img src="img2.svg" alt="img2"><div>
</div>
...
<div class="imgDiv">
    <img src="img3.svg" alt="img3"><div>
</div>
...
Also: Alles bleibt wie es ist, nur der Bildtyp soll von PNG auf SVG geändert werden.

Mit jQuery ginge das wohl relativ einfach - aber wie geht das mit reinem JS?

Holger
Site Admin
Posts: 3211
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany
Contact:

Re: Kleines JavaScript - Hilfe gesucht

Post by Holger » Thu Dec 19, 2019 2:22 pm

Da fällt mir aus dem Kopf ein Einzeiler ein:

Code: Select all

document.getElementsByClassName("myclass").getElementsByTagName("img").src = img.src.replace("xxx", "yyy");
:mrgreen:

frase
Posts: 3350
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Kleines JavaScript - Hilfe gesucht

Post by frase » Thu Dec 19, 2019 3:13 pm

Holger wrote:
Thu Dec 19, 2019 2:22 pm
Da fällt mir aus dem Kopf ein Einzeiler ein:
Leider klappt das nicht.
Die beiden getElements hintereinander bringen den Browser aus dem Konzept.
Die Konsole meckert das an.
Wahrscheinlich muss man eine Schleife bauen oder so was.

frase
Posts: 3350
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Kleines JavaScript - Hilfe gesucht

Post by frase » Thu Dec 19, 2019 7:27 pm

Ha, ich kann die Aufgabenstellung vereinfachen:
Suche auf einer Seite alle Bilder mit Namen "bild.png".
Benenne alle diese Bilder um in "bild.svg".
Das dürfte nicht schwierig sein - oder?
Mein Versuch ...

Code: Select all

var images = document.images;
for (var i=0, iLen=images.length; i<iLen; i++){
    if (images[i].src == './xxx/yyy/bild.png') {
        images[i].src = './xxx/yyy/bild.svg';
    }
}
... funktioniert leider nicht sauber.
Mit einem Gleichheitszeichen bei der Bedingung werden ein paar Bilder zu viel umbenannt.
Mit zwei oder drei, kommt keine src an.
Das muss doch irgendwie gehen :?:

Holger
Site Admin
Posts: 3211
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany
Contact:

Re: Kleines JavaScript - Hilfe gesucht

Post by Holger » Thu Dec 19, 2019 7:32 pm

frase wrote:
Thu Dec 19, 2019 3:13 pm
Leider klappt das nicht.
Das war jetzt auch nicht wirklich ganz so ernst gemeint (Stichwort: you don't need jQuery):
myself wrote: :mrgreen:
(Obwohl, das würde schon funktionieren, wenn es sich nur um ein Div mit eindeutiger Id drehen würde.)

Hier dann eine Lösung, die auch wirklich funktionieren sollte:

Code: Select all

<script>
var myDiv = document.getElementsByClassName("imgDiv");
    for (var i = 0; i < myDiv.length; i++) {
        var image = myDiv[i].getElementsByTagName('img')[0];
        image.src = image.src.replace(".png", ".svg");
        //console.log(image);
    }
</script>
Besser du packst das noch in eine Funktion, damit es keine Namenskollisionen mit anderen globalen Variablen geben kann.

Edit: der Code war noch für die "nicht vereinfachte" Variante gedacht

frase
Posts: 3350
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Kleines JavaScript - Hilfe gesucht

Post by frase » Thu Dec 19, 2019 8:38 pm

Holger wrote:
Thu Dec 19, 2019 7:32 pm
Hier dann eine Lösung, die auch wirklich funktionieren sollte:
Un das dud se :P
Super!
Danke!

frase
Posts: 3350
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Kleines JavaScript - Hilfe gesucht

Post by frase » Fri Jan 24, 2020 4:07 pm

Ich kann es ja verraten, es geht um das JavaScript im assets-Ordner.

Code: Select all

var replTooltipIcon = document.getElementsByClassName("pl_tooltip");
for (var i = 0; i < replTooltipIcon.length; i++) {
	var image = replTooltipIcon[i].getElementsByTagName('img')[0];
	image.src = image.src.replace(".png", ".svg");
	//console.log(image);
}
Holgers Code funktioniert also perfekt - ABER ...

Dummerweise gibt es aber Plugins, die eigene Fragezeichen-Icons verwenden (z.B. Sitemapper).
Die image.src verweist dann auf den Plugin-Ordner.
Dort gibt es aber kein *.svg :evil:
Es müsste also noch eine weitere Bedingung eingebaut werden:
Die Endung der gefundenen Bilder soll nur ausgetauscht werden, wenn sich das Ursprungsbild im Ordner
... /assets/css/
befindet.

Leider habe ich es nicht hinbekommen, einen Teilstring aus der img.src auszulesen und zu vergleichen und die Bedingung einzufügen.

@Holger
Könntest du mir nochmal auf die Sprünge helfen?

Holger
Site Admin
Posts: 3211
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany
Contact:

Re: Kleines JavaScript - Hilfe gesucht

Post by Holger » Fri Jan 24, 2020 4:36 pm

Bin grad auf dem Sprung. Daher nur kurz:

Schau mal hier: https://developer.mozilla.org/de/docs/W ... ng/indexOf

frase
Posts: 3350
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Kleines JavaScript - Hilfe gesucht

Post by frase » Fri Jan 24, 2020 5:37 pm

Holger wrote:
Fri Jan 24, 2020 4:36 pm
Schau mal hier: https://developer.mozilla.org/de/docs/W ... ng/indexOf
Könnte sein, dass der Tipp geholfen hat.
Muss noch bissl testen.
Danke!

Post Reply