Lesefortschritt:

Zufälliges Bild auf der Website anzeigen

8. Februar 2023 | HTML, Mediathek, Scripts, Word­Press

Trick # 206 | Dieser Beitrag beinhaltet 280 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.

Möchten Sie auf Ihrer Website verschiedene Bilder zeigen, welche bei jedem Aufruf zufällig dargestellt werden? Das geht natürlich. Mit ein wenig JavaScript und unserem Hack für alle Websites.

Hier haben wir eine Handvoll Bilder deponiert. Bei jedem Aufruf dieser Seite wird eines davon zufälig dargestellt.

Aktualisieren Sie also diese Seite.

Um so etwas einzubinden, benötigen Sie nicht mehr als ein wenig JavaScript. Den folgenden Code können Sie in den <head>-Bereich Ihrer Website kopieren. Divi-User können das Script auch in ein Code-Modul auf der entsprechenden Seite setzen:

<script type="text/javascript">
var imageURLs = [
"https://domain.ch/images/image01.jpg",
"https://domain.ch/images/image02.jpg",
"https://domain.ch/images/image03.jpg",
"https://domain.ch/images/image04.jpg"
];
function getImageTag() {
var img = '<img src=\"';
var randomIndex = Math.floor(Math.random() * imageURLs.length);
img += imageURLs[randomIndex];
img += '\" alt=\"\"/>';
return img;
}
</script>
Anpassungen sind einzig nötig auf den Zeilen 3-6: Dort müssen Sie die URLs zu den von Ihnen gewünschten Bildern vermerken. Wenn Sie weniger als vier Bilder darstellen wollen, löschen Sie einfach die überzähligen Zeilen – sind es mehr, fügen Sie weitere identische Zeilen hinzu.

Nun bearbeiten Sie die Seite, auf welcher die Random-Bildanzeige erscheinen soll. Fügen Sie die folgenden Zeilen in der HTML-Ansicht ein:

<script type="text/javascript">							
document.write(getImageTag());
</script>
Das ist schon alles: Die Randombilder werden auf Ihrer Website nach Zufallsprinzip angezeigt.

Werbung

Mauszeiger anpassen – in allen Variationen

Der Mauszeiger kann auf unterschiedlichste Arten dargestellt werden. Zumeist erkennen Webbrowser die gerade benötigte Darstellung von alleine. Wenn Sie nachhelfen müssen – oder eine andere Darstellung erzwingen wollen, – bedarf es eines ...

Textauszug (Excerpt) für Seiten aktivieren

Textauszüge - auch Excerpts genannt - sind eine famose Sache. Allerdings sind sie meist - abhängig vom verwendeten Theme - nur bei Word­Press-Beiträgen, nicht aber auf Seiten zu finden. Dabei möchte man ab und an auch eine Seite mit einem kurzen ...
Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.