diese blöden divs -.-

[Neander94]

Hallö Leute,

ich bin ziemlich neu mit der ganzen Materie, so Javascript und HTML und so, deshalb hab ich ziemliche Schwierigkeiten beim gestalten einer Website.
Das Problem welches sich auftut, ist folgendes:
ich versuche ein vorgefertigtes div beim aufrufen der Seite hinter einer Bildschirm füllenden Grafik verschwinden zu lassen, um es dann mithilfe eines Links wieder sichtbar zu machen. Dieses div soll verschiebbar sein und 3 Links enthalten (das div selbst soll ein Hintergrundbild erhalten, auf welchem 3 Knöpfe abgebildet sind. es ist außerdem wesentlich kleiner als die Ursprungsgrafik).
Der eine Link auf dem kleinen div soll dafür zuständig sein dieses wieder zu schließen, wenn man es nicht mehr braucht.
Grundsätzlich habe ich bereits gegoogelt und die ergebnisse ausprobiert (auch von selfhtml) aber bisher habe ich keinen Erfolg gehabt.
Hier nochmal die Eugenschaften, die das neue div haben soll:
-verschiebbar
-versteckbar
-bedienbar (Links)

Folgende Fehler treten bei mir auf:
-das div öffnet sich links unter dem Ursprungsdiv
-das div zeigt die hintergrundgrafik nicht an
-es ist nicht verschiebbar

Hier nun einige Teile des Codes den ich verwende:

-Für die erstellung des divs:
<div id="dragable" onmousedown="dragstart(this)style="display:none; position:fixed;top:0px;left:0px;height:500px;width:200px; border-style:none" / border="0"">//ich habe auch schon als position absolute und relative probiert

Für die Verschiebbarkeit:

<script type="text/javascript">  
                var dragobjekt=null;  
  
                        var dragx = 0;  
                        var dragy = 0;  
  
                        var posx = 0;  
                        var posy = 0;  
  
                        function draginit() {  
                        document.onmousemove = drag;  
                        document.onmouseup = dragstop;  
                }  
  
                         function dragstart(element) {  
  
                        dragobjekt = element;  
                        dragx = posx - dragobjekt.offsetLeft;  
                        dragy = posy - dragobjekt.offsetTop;  
                }  
  
                        function dragstop() {  
  
                        dragobjekt=null;  
                }  
  
                        function drag(ereignis) {  
  
                        posx = document.all ? window.event.clientX : ereignis.pageX;  
                        posy = document.all ? window.event.clientY : ereignis.pageY;  
                        if(dragobjekt != null) {  
                        dragobjekt.style.left = (posx - dragx) + "px";  
                        dragobjekt.style.top = (posy - dragy) + "px";  
                }  
                }

Dieser Teil stammt aus SelfHTML.org

Für das Verstecken und Hervorholen:

function hervor(dragable){  
                if(document.getElementById(dragable){  
                Wenn es sichtbar war, unsichtbar machen und umgedreht.*/  
                document.getElementById(dragable).style.display =  
                (document.getElementById(dragable).style.display == 'none') ? 'inline' : 'none';  
 }  
}

Der Link zum aktivieren der Sichtbarkeitsfunktion:
<area shape="rect" coords="646,270,717,304" href="javascript:hervor">

Ein weiters Problem ist, das ich den Aufwand so gering wie möglich halten möchte, da ich 10 Seiten brauche, auf denen man nachher 30 solcher divs öffnen können soll (natürlich alle mit unterschiedlichen Bilder dahinter ;).

Danke schonmal im vorraus :)

[Siri]

Hallo,

in deinem Code gibt es diverse Fehler, sowohl im HTML, als auch im JavaScript. Schau dir erstmal an, was die Fehlerkonsole deines Browsers sagt bzw. benutze Firebug für Mozilla. Behebe die Syntaxfehler und poste dann nochmals sauberen Code.

Grüße
Siri

[Siri]

Hast Du Dich mit dem Thema Doctype beschäftigt?

[Neander94]

Hast Du Dich mit dem Thema Doctype beschäftigt?

wie gesagt: ich bin ziemlich neu in HTML etc. mit anderen worten nein :(

[Siri]

Hast Du Dich mit dem Thema Doctype beschäftigt?
wie gesagt: ich bin ziemlich neu in HTML etc. mit anderen worten nein :(

Der Doctype entscheidet sehr stark mit, wie die Darstellung bzw. die Interpretation von CSS ausfällt. Strichwort: Quirksmode. Du musst Deine Seite auf jeden Fall http://de.selfhtml.org/html/xhtml/unterschiede.htm#dokumenttyp@title=deklarieren

Ansonsten, wie gesagt: Fehlerkonsole zu rate ziehen, Firebug verwenden und erstmal den Code sauber bekommen, dann sehen wir weiter!

[Neander94]

meinst du ich kann die doctype zeile einfach stecihen? die hat mir mapedit da rein gepackt, und ich will sie halt ned rausnehmen weil ich keinen plan hab ob die wichtig ist oder nicht...

[Neander94]

phase5 hat mir jetzt den code bereinigt, aber ich hab keine ahnung ob jetzt alle fehler raus sind.

<?xml version="1.0" encoding="utf-8"?>  
<html xml:lang="en" lang="en">  
<head>  
<title>Imagemap</title>  
  
<script type="text/javascript">  
                var dragobjekt=null;  
  
                        var dragx = 0;  
                        var dragy = 0;  
  
                        var posx = 0;  
                        var posy = 0;  
  
                        function draginit() {  
                        document.onmousemove = drag;  
                        document.onmouseup = dragstop;  
                }  
  
                         function dragstart(element) {  
  
                        dragobjekt = element;  
                        dragx = posx - dragobjekt.offsetLeft;  
                        dragy = posy - dragobjekt.offsetTop;  
                }  
  
                        function dragstop() {  
  
                        dragobjekt=null;  
                }  
  
                        function drag(ereignis) {  
  
                        posx = document.all ? window.event.clientX : ereignis.pageX;  
                        posy = document.all ? window.event.clientY : ereignis.pageY;  
                        if(dragobjekt != null) {  
                        dragobjekt.style.left = (posx - dragx) + "px";  
                        dragobjekt.style.top = (posy - dragy) + "px";  
                }  
                }  
  
                function hervor(dragable){  
                if(document.getElementById(dragable){  
                Wenn es sichtbar war, unsichtbar machen und umgedreht.*/  
                document.getElementById(dragable).style.display =  
                (document.getElementById(dragable).style.display == 'none') ? 'inline' : 'none';  
 }  
}  
  
  
</script>  
</head>  
<body>  
<div><img src="images/104.jpg" usemap="#104" style="border-style:none" border="0"></div>  
<div id="dragable" onmousedown="dragstart(this)style=" border="0"><img src="images/1028"></div>  
<map name="104">  
<area shape="rect" coords="450,59,549,89" href="110">  
<area shape="rect" coords="421,269,507,299" href="106">  
<area shape="rect" coords="421,330,508,360" href="107">  
<area shape="rect" coords="420,390,508,420" href="108">  
<area shape="rect" coords="421,451,507,480" href="109">  
<area shape="rect" coords="636,708,730,738" href="111">  
<area shape="rect" coords="259,837,325,867" href="87">  
<area shape="rect" coords="1504,594,1621,623" href="129">  
<area shape="rect" coords="1485,422,1634,452" href="105">  
<area shape="rect" coords="1499,60,1622,88" href="1">  
<area shape="rect" coords="1499,117,1633,146" href="86">  
<area shape="rect" coords="1305,274,1369,303" href="84">  
<area shape="rect" coords="646,270,717,304" href="javascript:hervor">  
<area shape="rect" coords="646,402,717,439" href="1029">  
<area shape="rect" coords="645,446,719,481" href="1030">  
<area shape="rect" coords="461,663,511,689" href="1021">  
<area shape="rect" coords="364,666,414,692" href="1032">  
<area shape="rect" coords="1156,93,1206,120" href="1033">  
<area shape="rect" coords="1155,164,1207,191" href="1034">  
<area shape="rect" coords="1285,138,1360,175" href="1035">  
<area shape="rect" coords="1195,305,1269,341" href="1036">  
<area shape="rect" coords="1347,408,1421,446" href="1037">  
<area shape="rect" coords="1099,412,1150,436" href="1038">  
<area shape="rect" coords="1185,413,1234,440" href="1039">  
<area shape="rect" coords="1314,515,1366,540" href="1040">  
<area shape="rect" coords="1390,514,1441,539" href="1041">  
<area shape="rect" coords="1500,512,1548,539" href="1042">  
<area shape="rect" coords="1576,515,1625,542" href="1043">  
<area shape="rect" coords="1389,666,1439,690" href="1044">  
<area shape="rect" coords="1314,666,1362,690" href="1045">  
<area shape="rect" coords="1133,638,1203,671" href="1046">  
<area shape="rect" coords="1013,711,1062,737" href="1048">  
<area shape="rect" coords="917,707,965,733" href="1049">  
<area shape="circle" coords="1059,597,21" href="1047">  
<area shape="default" nohref></map>  
</body>  
</html>  

[Siri]

Hallo,

<div id="dragable" onmousedown="dragstart(this)style=" border="0"><img src="images/1028"></div>

<div id="dragable" onmousedown="dragstart(this)" style=" border="0"><img src="images/1028"></div>

<area shape="rect" coords="646,270,717,304" href="javascript:hervor">

<area shape="rect" coords="646,270,717,304" href="javascript:hervor()">

Die zwei sehe ich spontan, das hätte Dir aber auch beides Deine Fehlerkonsole zeigen müssen, wenn Du sie benutzt hättest...

Grüße
Siri

[Neander94]

mit den zweien von dir hat mir die fehlerkonsole ganze 3 syntaxerrors angezeigt. hab alle, soweit es mir möglich war, behoben, aber immernoch das gleiche problem :(

wenn ich nur den code von dieser seite nehme und irgendein Bild reinpacken will (statt der bg color), dann passiert das gleiche: nämlich gar nichts. Die div zeile sieht dann so aus:
<div onmousedown="dragstart(this)" style="position:absolute;top:0px;left:0px;height:300px;width:200px; img src="images/1028" alt="1028"> </div>

danke das du dir die zeit nimmst :/
lg Jan

[Siri]

Hallo,

mit den zweien von dir hat mir die fehlerkonsole ganze 3 syntaxerrors angezeigt.

Jeder Fehler ist ein Fehler zu viel! Dann werden Styles nicht interpretiert, Element nicht gefunden usw. Dann funktioniert nichts und man kann nicht nach Fehlern im Ablauf des JS suchen. Ein Auto, das vier Reifen hat, aber einer oder meherer sind platt, fährt sich auch nicht so gut.

<div onmousedown="dragstart(this)" style="position:absolute;top:0px;left:0px;height:300px;width:200px; img src="images/1028" alt="1028"> </div>

Auch hier wieder:
<div onmousedown="dragstart(this)" style="position:absolute;top:0px;left:0px;height:300px;width:200px;"> <img src="images/1028" alt="1028" /> </div>

Gewöhn Dir sauberes Coden an: Tags schließen, Attribute mit " und " beenden usw. Sonst wirst Du immer scheitern und niemand hier wird sich mit dem eigentlichen Problem befassen, wenn der Code schon vor Fehlern strotzt.

Grüße
Siri

[Neander94]

das ist ein toller tipp.
du gehst auch didaktisch richtig an das problem ran. is nur leider kurzfristig nicht zielführend. ich glaub ich werd mich mal hinsetzen und den kack von grund auf lernen -.-

vielen dank an dich :/

[Siri]

... ich glaub ich werd mich mal hinsetzen und den kack von grund auf lernen -.-

Das ist doch mal eine gute Idee! :-)