Image Mauskoordinaten auslesen und Bild + Text einfügen

[Trolleule]

Ahoy,

ich habe bisher noch nicht mit javascript gearbeitet. Ich möchte auf einer HTML Seite ein Bild ausgeben (Deutschlandkarte) und dann über einen Linksklick an Mausposition ein Bild setzen z.B. ein Pin/Stecknadel, zusätzlich dann noch die Möglichkeit haben einen Text/Namen einzugeben. Der Name wird dann beispielsw. unter das Bild gesetzt.

Das Problem ist, das Ganze macht erst Sinn wenn sich auch mehrere User darin eintragen können, sage ich mal, was aber vorraussetzt das die Objekte nach aktuallisieren des Browsers nicht verloren gehen, sprich in irgendeiner Art gespeichert werden.

Das habe ich bisher:

<div><img id="bild" src="bild.jpg"></div>  
  
<script type="text/javascript">  
  
var karte = document.getElementById('bild');  
karte.onclick = function(e) {  
    var m = mouse(e);  
    var img = document.createElement('img');  
    img.src = 'dot.gif';  
    img.style.position = 'absolute';  
    img.style.top = m.top + 'px';  
    img.style.left = m.left + 'px';  
    document.body.appendChild(img);  
};  
  
function mouse(e) {  
    if(!e) e = window.event;  
    var body = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ?  
    window.document.documentElement : window.document.body || null;  
  
    var mouse = {};  
  
    // Position im Dokument  
    mouse.top = e.pageY ? e.pageY : e.clientY + body.scrollTop;  
    mouse.left = e.pageX ? e.pageX : e.clientX + body.scrollLeft;  
  
    return mouse;  
}  
</script>  

Das Schlimme ist ich habe überhaupt keine Ahnung, ich kann mich nicht mal dran erinnern jemals im Internet gesehen zu haben das Bilder o.ä., die durch eine Funktion oder so erstellt wurden, in irgend einer Weise gespeichert wurden, oder bin ich jetzt verrückt?

Ich weiss nicht mal wonach ich suchen soll :/

Ich bedanke mich schon mal vielmals.