Seite manipulieren mit 'contentEditable'
Mit dem Attribut 'contentEditable' lassen sich einzelne Bereiche oder die gesamte Seite manipulieren.
Die Manipulation ist nur virtuell, für alle anderen Benutzer verändert sich nichts.
Am besten funktioniert das im Mozilla Firefox und dem MicrosoftEdge.
Demo

In diesem Demo lässt sich der Text nach belieben veändern (kopieren, ausschneiden, einfügen), außerdem kann das Bild an eine andere Stelle verschoben werden und die Bildgröße ist änderbar.
Quelltext:<div contentEditable="true"> <img src="apfel.gif"> In einem kleinen Apfel, da sieht es niedlich aus ... </div>
Manipulation mit JavaScript
Mit JavaScript kann man die virtuelle Änderung ein.- oder ausschalten.
Demo






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
function bearbeiten() {
if (document.getElementById("BUTTON").value == "Reihenfolge ändern") {
document.getElementById("BUTTON").value = "Reihenfolge jetzt ändern";
void(document.getElementById("ID").contentEditable = true);
}
else {
document.getElementById("BUTTON").value = "Reihenfolge ändern";
void(document.getElementById("ID").contentEditable = false);
}
}
</script>
<div id="ID"
style="background-color: #FFFFEA; width: 300px; padding: 10px;">
<img src="wuerfel/w3.gif">
<img src="wuerfel/w1.gif">
<img src="wuerfel/w2.gif">
<img src="wuerfel/w6.gif">
<img src="wuerfel/w5.gif">
<img src="wuerfel/w4.gif">
</div>
<br>
<input type="button" id="BUTTON" value="Reihenfolge ändern"
onClick="bearbeiten()">
Tipps
- Lokalen Webserver einrichten und verwenden
- Um PHP-Scripte auszuführen benötigt man einen Webserver. Um nun nicht jede Datei zum testen erst per FTP auf seinen Webserver zu laden ist es sinnvoll, sich lokal auf dem Rechner einen sog. lokalen Webserver zu installieren.
- Favicon erstellen - Ihr Logo in den Lesezeichen (Favoriten)
- Das Favoriten Icon wird bei einem Bookmark in die Favoritenliste aufgenommen. Dort erscheint zukünftig die „gebookmarkte” Webseite mit einem eigenen Symbol.
- Zeichenkodierung - Schriftzeichen richtig darstellen
- Oft werden Umlaute, Akzentzeichen oder andere fehlerhafte Zeichen auf der Webseite angezeigt. Auch der Inhalt einer E-Mail, vom Kontaktformular der Website, kann falsche Umlautzeichen enthalten. Beispiele um diese Zeichen in der richtigen Zeichenkodierung darzustellen.
Diese Schlagwörter könnten Sie interessieren:
Bausteine Event-Kalender Suchmaschine CSS-Counter Kommentar-Box Textgestaltung Mehrfachauswahl Zeit-Differenz Modal-Fenster Rahmen Veranstaltungsliste Lokaler Webserver SQLite Favicon Stoppwortliste Sicherheit Geolocation API EVA-Prinzip Formular befüllen Backdrop-Filter Sortierung Mausrad Kalenderwoche Farbschema Metaphone
Bausteine Event-Kalender Suchmaschine CSS-Counter Kommentar-Box Textgestaltung Mehrfachauswahl Zeit-Differenz Modal-Fenster Rahmen Veranstaltungsliste Lokaler Webserver SQLite Favicon Stoppwortliste Sicherheit Geolocation API EVA-Prinzip Formular befüllen Backdrop-Filter Sortierung Mausrad Kalenderwoche Farbschema Metaphone