ugrás a tartalomhoz

Képmegjelenítés

simisoma · 2011. Szep. 16. (P), 14.45
Sziasztok,

Java scriptben szeretném megoldani, hogy:

vannak képek az oldalamon:

<img src='elerhetoseg/1.jpg' id='1' />
<img src='elerhetoseg/2.jpg' id='2' />
<img src='elerhetoseg/3.jpg' id='3' />
<img src='elerhetoseg/4.jpg' id='4' />

Azt szeretném, hogy ezek felett egy átlátszó png kör [kor.png] megjelenjen egymás után sorba folyamatosan.
és ezzel egy időbe a weboldal más pontján amikor a kép felé érkezik a kör változzon a fenti képhez tartozó nagykép:

<img src='elerhetoseg/3.jpg' id='3' /> --> ez felett a kör és megjelenik egy adott helyen a <img src='elerhetoseg/3_nagy.jpg' id='3-3' />

Van erre valami jquery megoldás vagy más JavaScript -es script?

Köszi!
‹ Input szín módosítása CSS használatával Response headers / Connection: close ›
 ■
1

Definiáld

Poetro · 2011. Szep. 16. (P), 17.19
Definiáld azt, hogy mit jelent a felett, az egymás után sorban, és a folyamatosan. Mi érkezik a kép felé? És milyen kör változzon nagy képpé?
2

Sziasztok, rajzoltam egy

simisoma · 2011. Szep. 20. (K), 17.46
Sziasztok,

rajzoltam egy kis jelmagyarázatot is:



Ezt szeretném megondani esetleg JQuery segítségével:

Van 3 képem [1][2][3], ez megjelenik a képen látható jobb oldali div -ben.
Amikor rákattintok a pl.[2] képre akkor a bal oldali div -ben betölt egy másik képet [N2]
Amikor betöltődik az oldal, viszont alapértelmezetten jelenjem meg az [1] -es képhez tartozó fotó.

Amit még szeretnék, hogy az éppen aktív [N2] fotónak a [2] kisképét CSS-el bekeretezném.

Huuu. remélem így már érthetőbb az ügy :-)))))

Köszönöm előre is!!!
3

jQuery nélkül

Poetro · 2011. Szep. 20. (K), 18.37
jQuery nélkül:
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style type="text/css">
    #images {
      list-style: none;
      margin: 0 0 0 420px;
    }
    #images li {
      float: left;
      margin: 0 1em 1em 0;
      padding: 1px;
      cursor: pointer;
    }
    #images img {
      display: block;
    }
    #large {
      float: left;
      width: 400px;
      padding: 0 10px 10px;
    }
    #images .active {
      border: 1px solid red;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="large">
    <img src="http://placehold.it/400x400&amp;text=N1" alt="N1" />
  </div>
  <ul id="images">
    <li class="active">
      <img src="http://placehold.it/150x150&amp;text=1" alt="1" />
    </li>
    <li>
      <img src="http://placehold.it/150x150&amp;text=2" alt="2" />
    </li>
    <li>
      <img src="http://placehold.it/150x150&amp;text=3" alt="3" />
    </li>
  </ul>
  <script type="text/javascript">
    (function (window, document) {
          // Nagykép
      var large = document.getElementById('large'),
          // Kisképek
          images = document.getElementById('images'),
          // Trim reguláris kifejezése
          trim = /^\s*([\S\s]*?)\s*$/,
          lis, i, li,
          // Alap eseménykezelés
          addEvent = document.addEventListener ? function (element, event, callback) {
              element.addEventListener(event, callback, false);
            } :
            document.attachEvent ? function (element, event, callback) {
              element.attachEvent('on' + event, callback);
            } :
            function (element, event, callback) {
              element['on' + event] = callback;
            }
      // A nagykép és a kisképek léteznek
      if (large && images) {
        large = large.getElementsByTagName('img')[0];

        // Végigmegyünk a kisképeken
        lis = images.getElementsByTagName('li');
        for (i = lis.length - 1; i >= 0; i -= 1) {
          li = lis[i];
          // Hozzáadjuk a click kezelését.
          addEvent(li, 'click', function () {
            var i, li,
                // Az aktuális kiskép
                img = this.getElementsByTagName('img')[0];

            // Megváltoztatjuk a nagykép 'src' és 'alt' tulajdonságát.
            large.src = img.src.replace('150x150', '400x400').replace(/(&text=)(\d)[^&]*/, '$1N$2');
            large.alt = 'N' + img.alt;
            // Végigmegyünk az összes kisképen és eltávolitjuk az 'active' osztályt róluk.
            for (i = lis.length - 1; i >= 0; i -= 1) {
              li = lis[i];
              li.className = (' ' + li.className + ' ').replace(' active ', ' ').replace(trim, '$1');
            }
            // Hozzáadjuk az 'active' osztályt az aktuális elemhez.
            this.className = (this.className + ' active').replace(trim, '$1');
            return false;
          });
        }
      }
    })(this, document);
  </script>
</body>
</html>
megjegyzés: a largelarge igazából csak large, és kipróbálható.