Announcement

Collapse
No announcement yet.

Dynamisches JS, aber wie?

Collapse
X
Collapse
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Dynamisches JS, aber wie?

    Hallo,
    ich habe da mal eine JS Anfängerfrage.

    Ich habe verschiedene Layer, in den jeweils die gleichen Bilder zu sehen sind.
    nun möchte ich, wenn z.b. im ersten layer das erste von vier bildern angecklickt wird, das dieses den style ändert.
    wenn nun z.b. das dritte bild angeklickt wird, das sich dort der style ändert, und der rest wieder auf den ursprung zu rück geht.
    unten seht ihr meinen riesen quelltext dafür.
    meine frage ist nun, wie kann ich den text verkürzen.

    ich dachte da an sowas in der art (cih weiss nciht wie ich es besser audrücken soll):

    test(layer,bild,max)

    function test(1,2,4)
    {
    x = 1;
    for (x < max)
    if (bild(x) = bild then bild.style.border(1px))
    else bild.style.border(0px)
    }

    nur wie schreibe ich das in JS?

    hier mein code.
    Danke für die Hilfe :-)

    Code:
    <html>
<head>
<title>Shop</title>
<link href="../layout/design.css" rel="stylesheet">
<script type="text/javascript"> 
function stoff_1_1() { 
  document.getElementById("bild_stoff_1_1").style.border="2px dotted #000000";
  document.getElementById("bild_stoff_1_2").style.border="0px";
  document.getElementById("bild_stoff_1_3").style.border="0px";
  document.getElementById("bild_stoff_1_4").style.border="0px";
} 

function stoff_1_2() { 
  document.getElementById("bild_stoff_1_1").style.border="0px";
  document.getElementById("bild_stoff_1_2").style.border="2px dotted #000000";
  document.getElementById("bild_stoff_1_3").style.border="0px";
  document.getElementById("bild_stoff_1_4").style.border="0px";
} 

function stoff_1_3() { 
  document.getElementById("bild_stoff_1_1").style.border="0px";
  document.getElementById("bild_stoff_1_2").style.border="0px";
  document.getElementById("bild_stoff_1_3").style.border="2px dotted #000000";
  document.getElementById("bild_stoff_1_4").style.border="0px";
} 

function stoff_1_4() { 
  document.getElementById("bild_stoff_1_1").style.border="0px";
  document.getElementById("bild_stoff_1_2").style.border="0px";
  document.getElementById("bild_stoff_1_3").style.border="0px";
  document.getElementById("bild_stoff_1_4").style.border="2px dotted #000000";
} 

function stoff_2_1() { 
  document.getElementById("bild_stoff_2_1").style.border="2px dotted #000000";
  document.getElementById("bild_stoff_2_2").style.border="0px";
  document.getElementById("bild_stoff_2_3").style.border="0px";
  document.getElementById("bild_stoff_2_4").style.border="0px";
} 

function stoff_2_2() { 
  document.getElementById("bild_stoff_2_1").style.border="0px";
  document.getElementById("bild_stoff_2_2").style.border="2px dotted #000000";
  document.getElementById("bild_stoff_2_3").style.border="0px";
  document.getElementById("bild_stoff_2_4").style.border="0px";
} 

function stoff_2_3() { 
  document.getElementById("bild_stoff_2_1").style.border="0px";
  document.getElementById("bild_stoff_2_2").style.border="0px";
  document.getElementById("bild_stoff_2_3").style.border="2px dotted #000000";
  document.getElementById("bild_stoff_2_4").style.border="0px";
} 

function stoff_2_4() { 
  document.getElementById("bild_stoff_2_1").style.border="0px";
  document.getElementById("bild_stoff_2_2").style.border="0px";
  document.getElementById("bild_stoff_2_3").style.border="0px";
  document.getElementById("bild_stoff_2_4").style.border="2px dotted #000000";
} 
</script> 
</head>

<body>
</head>
<body>
<div id="body-color-1" style="position:absolute; z-index:1; left: 300px; top: 375px;">
	<a href="#" onClick="stoff_1_1()"><img id="bild_stoff_1_1" src="../pictures/stoff-01.jpg" style="border:0"></a>
	<a href="#" onClick="stoff_1_2()"><img id="bild_stoff_1_2" src="../pictures/stoff-02.jpg" style="border:0"></a><br>
	<a href="#" onClick="stoff_1_3()"><img id="bild_stoff_1_3" src="../pictures/stoff-03.jpg" style="border:0"></a>
	<a href="#" onClick="stoff_1_4()"><img id="bild_stoff_1_4" src="../pictures/stoff-04.jpg" style="border:0"></a>
</div>
<div id="body-color-2" style="position:absolute; z-index:1; left: 300px; top: 525px;">
	<a href="#" onClick="stoff_2_1()"><img id="bild_stoff_2_1" src="../pictures/stoff-01.jpg" style="border:0"></a>
	<a href="#" onClick="stoff_2_2()"><img id="bild_stoff_2_2" src="../pictures/stoff-02.jpg" style="border:0"></a><br>
	<a href="#" onClick="stoff_2_3()"><img id="bild_stoff_2_3" src="../pictures/stoff-03.jpg" style="border:0"></a>
	<a href="#" onClick="stoff_2_4()"><img id="bild_stoff_2_4" src="../pictures/stoff-04.jpg" style="border:0"></a>
</div>
</body>
</html>
    Tags: None
  • #2
    Hallo,

    es gibt verschiedene Möglichkeiten dies zu lösen. Eine Variante wäre sich ausgehend vom aktuell angeklickten Element durch das DOM zu hangeln und die Elemente entsprechend zu bearbeiten. Das ist zwar im Endeffekt sehr flexibel, aber auch sehr komplex.
    Die einfachste Möglichkeit wäre folgendes:
    Code:
    <script type="text/javascript"> 
  var letzteBildID = '';

  function markiereStoff(pID)
  {
    var aktuellesBild = document.getElementById(pID);
    if (aktuellesBild) {
      aktuellesBild.style.border="2px dotted #000000";
      if (letzteBildID.length) {
        document.getElementById(letzteBildID).style.border="none";
        letzteBildID = pID;
      }
    }
  }
</script>
...
<img id="bild_stoff_1_1" src="../pictures/stoff-01.jpg" style="border:0"
  onclick=markiereStoff(this.id)>
...
    Gruß Falk
    Wenn du denkst du hast alle Bugs gefunden, dann ist das ein Bug in deiner Denksoftware.

    Quellcode ohne ein Mindestmaß an Formatierung sehe ich mir nicht an! Ich leiste keinen Privatsupport per Mail oder PN!

    Comment

    Previous template Next
    Working...
    X