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:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <title>Page Title</title>  
  5.   <style type="text/css">  
  6.     #images {  
  7.       list-style: none;  
  8.       margin: 0 0 0 420px;  
  9.     }  
  10.     #images li {  
  11.       float: left;  
  12.       margin: 0 1em 1em 0;  
  13.       padding: 1px;  
  14.       cursor: pointer;  
  15.     }  
  16.     #images img {  
  17.       display: block;  
  18.     }  
  19.     #large {  
  20.       float: left;  
  21.       width: 400px;  
  22.       padding: 0 10px 10px;  
  23.     }  
  24.     #images .active {  
  25.       border: 1px solid red;  
  26.       padding: 0;  
  27.     }  
  28.   </style>  
  29. </head>  
  30. <body>  
  31.   <div id="large">  
  32.     <img src="http://placehold.it/400x400&amp;text=N1" alt="N1" />  
  33.   </div>  
  34.   <ul id="images">  
  35.     <li class="active">  
  36.       <img src="http://placehold.it/150x150&amp;text=1" alt="1" />  
  37.     </li>  
  38.     <li>  
  39.       <img src="http://placehold.it/150x150&amp;text=2" alt="2" />  
  40.     </li>  
  41.     <li>  
  42.       <img src="http://placehold.it/150x150&amp;text=3" alt="3" />  
  43.     </li>  
  44.   </ul>  
  45.   <script type="text/javascript">  
  46.     (function (window, document) {  
  47.           // Nagykép  
  48.       var large = document.getElementById('large'),  
  49.           // Kisképek  
  50.           images = document.getElementById('images'),  
  51.           // Trim reguláris kifejezése  
  52.           trim = /^\s*([\S\s]*?)\s*$/,  
  53.           lis, i, li,  
  54.           // Alap eseménykezelés  
  55.           addEvent = document.addEventListener ? function (element, event, callback) {  
  56.               element.addEventListener(event, callback, false);  
  57.             } :  
  58.             document.attachEvent ? function (element, event, callback) {  
  59.               element.attachEvent('on' + event, callback);  
  60.             } :  
  61.             function (element, event, callback) {  
  62.               element['on' + event] = callback;  
  63.             }  
  64.       // A nagykép és a kisképek léteznek  
  65.       if (large && images) {  
  66.         largelarge = large.getElementsByTagName('img')[0];  
  67.   
  68.         // Végigmegyünk a kisképeken  
  69.         lis = images.getElementsByTagName('li');  
  70.         for (i = lis.length - 1; i >= 0; i -= 1) {  
  71.           li = lis[i];  
  72.           // Hozzáadjuk a click kezelését.  
  73.           addEvent(li, 'click', function () {  
  74.             var i, li,  
  75.                 // Az aktuális kiskép  
  76.                 img = this.getElementsByTagName('img')[0];  
  77.   
  78.             // Megváltoztatjuk a nagykép 'src' és 'alt' tulajdonságát.  
  79.             large.src = img.src.replace('150x150', '400x400').replace(/(&text=)(\d)[^&]*/, '$1N$2');  
  80.             large.alt = 'N' + img.alt;  
  81.             // Végigmegyünk az összes kisképen és eltávolitjuk az 'active' osztályt róluk.  
  82.             for (i = lis.length - 1; i >= 0; i -= 1) {  
  83.               li = lis[i];  
  84.               li.className = (' ' + li.className + ' ').replace(' active ', ' ').replace(trim, '$1');  
  85.             }  
  86.             // Hozzáadjuk az 'active' osztályt az aktuális elemhez.  
  87.             this.className = (this.className + ' active').replace(trim, '$1');  
  88.             return false;  
  89.           });  
  90.         }  
  91.       }  
  92.     })(this, document);  
  93.   </script>  
  94. </body>  
  95. </html>  
megjegyzés: a largelarge igazából csak large, és kipróbálható.