Javascript-форум - Показать сообщение отдельно - Привязка каждого изображения к своей кнопке

рони · #3 (**permalink**) 11.10.2018, 09:55

DmitryBelg,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
   <script>
    window=onload = function() {
//-----BUTTON
var nDD = document.getElementsByClassName('screenshot');
var y = nDD.length;
for(var i = 0; i < y; i++){
var eItem = document.createElement("BUTTON");
eItem.className = "button";
eItem.dataset.i = i;
var sTekst = document.createTextNode('скрыть');
eItem.appendChild(sTekst);
nDD[i].parentNode.appendChild(eItem);

//-----прячем IMG
 eItem.onclick = function() {
    var i = this.dataset.i;
    var img = nDD[i];
    img.style.display = img.style.display ? ""  : "none";
    this.textContent = img.style.display ? "показать"  : "скрыть";
}
}
}

  </script>
</head>

<body>
<dl>
    <dt>Site &ndash; Manage Sites - New:</dt>
    <dd>de Wizard Site definition verschijnt, je beantwoordt een aantal vragen
      <div class="toggle"><img class="screenshot" width="238" height="222" src="images/clip_image014.gif" alt="schermafdruk"></div>
    </dd>
    <dt> &ldquo;Hoe wil u de website noemen?&rdquo; </dt>
    <dd>vul in <i> George&rsquo;s site</i>
      <div class="toggle"><img class="screenshot" width="310" height="307" src="images/clip_image002.gif" alt="schermafdruk"> </div>
    </dd>
    <dt> &ldquo;Wil u Server technologie gebruiken?&rdquo;</dt>
    <dd> Neen, ga verder
      <div class="toggle"><img class="screenshot" width="407" height="175" src="images/clip_image004.gif" alt="schermafdruk"> </div>
    </dd>
    <dt> &ldquo;Hoe wil u tewerk gaan met de bestanden?&rdquo; </dt>
    <dd>kies voor <i>Ik wil de bestanden lokaal bewerken en dan uploaden naar de server (aangeraden)</i> </dd>
    <dt>&rdquo;Waar wil u de bestanden lokaal opslaan?</dt>
    <dd>Op <i>C:\My Documents\George\George&rsquo;s site </i>(wordt automatisch ingevuld)
      <div class="toggle"><img class="screenshot" width="487" height="294" src="images/clip_image006.gif" alt="schermafdruk"> </div>
    </dd>
    <dt> &ldquo;Hoe wil u de bestanden kopi&euml;ren naar de Remote Server?&rdquo;</dt>
    <dd>kies voor <i>Local/Network</i></dd>
    <dt>&rdquo;In welke map op die server wil u de bestanden kopi&euml;ren?&rdquo;</dt>
    <dd>Op <i>\\Server2\cursisten\Daikin\George\</i>
      <div class="toggle"><img class="screenshot" width="494" height="246" src="images/clip_image008.gif" alt="schermafdruk"> </div>
    </dd>
    <dt> &ldquo;Wilt u &lsquo;check in&lsquo; en &lsquo;check out&rsquo; activeren?&rdquo; </dt>
    <dd><i>Neen</i>, ga verder
      <div class="toggle"><img class="screenshot" width="407" height="175" src="images/clip_image010.gif" alt="schermafdruk"> </div>
    </dd>
    <dt> U bent klaar: de opsomming van al deze instellingen verschijnt</dt>
    <dd>klik <i>Done</i> als u klaar bent
      <div class="toggle"><img class="screenshot" width="422" height="418" src="images/clip_image012.gif" alt="schermafdruk"> </div>
    </dd>
    <dt> U ziet de lijst van websites die je reeds maakte, </dt>
    <dd>klik opnieuw <i>Done</i>
      <div class="toggle"><img class="screenshot" width="238" height="222" src="images/clip_image014.gif" alt="schermafdruk"> </div>
    </dd>
    <dt>Eenmaal een site gemaakt, heb je een overzicht van alle bestanden ervan in het<i> Files Panel</i> </dt>
    <dd>De figuur hieronder toont de toestand van een afgewerkte site.
      <div class="toggle"><img class="screenshot" width="216" height="313" src="images/clip_image016.gif" alt="schermafdruk"> </div>
    </dd>
  </dl>

</body>
</html>