ďťż

[JS] Płynne przejście z jednego obrazka do drugiego

       

Podstrony


telcocafe

Mam sobie poniższy kodzik, lecz problem jest taki, że chciałbym aby na pierwszym obrazku załadowanym po otwarciu strony nacisnąć na jakieś miejsc (mapa odsyłaczy) i żeby dopiero mi zamienił się na drugi obrazek. Ciężka sprawa, prawda?

<script type="text/javascript"> /* author: neo, neo.mlodzi.pl date: 5.12.2006 licence: http://creativecommons.org/licenses/by-sa/2.5/deed.pl use only with this comment */ function opac(img, m, o){ clearTimeout(img.t); o=img.style.opacity=+(o=img.style.opacity)+.05*m;//.01 oznacza o ile zmienia� opacity w jednym kroku. im wi�cej - tym szybciej o>0&&o<1?img.t=setTimeout(function(){opac(img,m)},50):0;//ostatnia jedynka tego wiersza oznacza po ilu milisekundach zmodyfikowa� przezroczysto�� } var on=window.onload||Function; onload=function(){ on(); for(var i=0,d,el,img; d=document.getElementsByTagName('ul')[i++];){ if(d.className=='change'){ d.className='change_s'; el=d.getElementsByTagName('img'); img=el[el.length-1]; img.t=0; img.style.opacity=1; d.style.height=img.height+'px'; img.onmouseover=function(){opac(this, -1)} img.onmouseout=function(){opac(this, 1)} } } } </script> <style type="text/css"> .change_s{ list-style:none; position:relative; } .change_s li{ position:absolute; left:0; top:0; } </style> <meta http-equiv="content-type" content="text-html;charset=utf-8" /> </head> <body> <h1>P�ynne przej�cie obrazk�w.</h1> <ul class="change"> <li><img src="pusta2.bmp" alt="mak polny" /></li> <li><img src="czolowa2.bmp" alt="inny polny mak" /></li>



Zasada numer pierwsza: Nigdy, ale to nigdy nie wstawiamy obrazków w formacie bmp na strony.

Zrób sobie tę mapę odsyłaczy. Ustawiasz jej onclick na jakąś funkcję - wewnątrz tej funkcji wywołujesz opac(pierwszy_obraz,-1); opac(drugi_obaz,1); i powinno działać.

  • zanotowane.pl
  • doc.pisz.pl
  • pdf.pisz.pl
  • nvm.keep.pl

  • Sitedesign by AltusUmbrae.