Anpassungsbares Menü aus Grafiken

[Holger]

Moin,

ich baue gerade eine Startseite, die nur aus Grafken bestehen soll.
Die Grafiken sind Buttons, die dann zu den Haupt-Teilen der Seite führen.
Ich würde den Besuchern gerne eine Funktion anbieten, die es ermöglicht
1) diese Buttons per Drag&Drop zu verschieben
ODER
2) einzelne Knöpfe ein-/auszublenden

Die Einstellung dafür sollte dann gespeichert werden? Kann man das in Cookies speichern?

Ich habe bei javascript.internet.com und www.hotscripts.com schon vergeblich gesucht. Kennt jemand so ein Script?

Gruss
Holger

[oxpus]

Da bin ich auch überfragt.
CMS-Systeme, auch mit AJAX gibts ja genügend, aber mit "nur" Grafiken...

[Holger]

Die Funktionalitet habe ich gefunden, nur die "Speicherbarkeit" habe ich nicht ...

[Bootenks]

was für daten sind es denn?? reine Strings?? wenn ja dann mach doch ein set_cookie() Oo

[Holger]

Code: Alles auswählen

<!-- Paste this code into the CSS section of your HTML document  -->

.drag {
  width: 200px;
  height: 200px;
  position: absolute;
  border: 1px solid black;
  background: silver
}



<!-- Paste this code into an external JavaScript file named: dragAndDrop.js  -->

var ie = document.all
var ns = document.getElementById && !ie

function dragbyclass(e) {
  var fobj = ns ? e.target : event.srcElement
  if (fobj.tagName=="DIV" && fobj.className=="drag") {
   	var ev=e||event
   	var offsetx=ev.clientX-fobj.offsetLeft
   	var offsety=ev.clientY-fobj.offsetTop
  		document.onmousemove=function() {
    		fobj.style.left=ev.clientX-offsetx
    		fobj.style.top=ev.clientY-offsety
    		return false
  		}
  		fobj.onmouseup=function() {
   	 	document.onmousemove=null
   		}
  }
}

document.onmousedown=dragbyclass



<!-- Paste this code into the HEAD section of your HTML document.
     You may need to change the path of the file.  -->

<script type="text/javascript" src="dragAndDrop.js"></script>



<!-- Paste this code into the BODY section of your HTML document  -->

<div class="drag" style="left:40px;top:60px;z-index:100">Drag number ONE</div>
<div class="drag" style="left:40px;top:60px">Drag number TWO</div>