Autor Zpráva
Markii
Profil *
Ahoj,nevíte prosím jak udělat tento efekt?

http://www.blesk.cz/

maj tam hlavní obrázek a pod ním tři. Nevíte jak se dělá to prolnutí z černé?
Chamurappi
Profil
Reaguji na Markiiho:
Postupně mění skriptem průhlednost, viz opacity či filter.
Markii
Profil *
Vím co je cyklus

for (i=0; i <= 100; i++) {

}


a vím jak používat průhlednost, ale nevím jak to dát dohromady, poradíte?


potřebuju tedy ze stylu k obrázku

   opacity: 1.0;  
    filter: alpha(opacity=100);  
    -moz-opacity: 1;  
    -khtml-opacity: 1;  


dostat
	opacity: 0;  
    filter: alpha(opacity=0);  
    -moz-opacity: 0;  
    -khtml-opacity: 0;  


poradíte jak na to přesně?
javascript jde bohužel mimo mě docela, mám jen základy
Chamurappi
Profil
Reaguji na Markiiho:
Cyklus můžeš nechat plavat, budeš asi potřebovat funkci setInterval. A nebo ne. Zkusíme ten cyklus a setTimeout.

Pokusím se napsat to alespoň trochu názorně:
<script>
function schovat(co)
{
  var obr = document.getElementById(co);
  for(var i = 1; i <= 20; i++)
  {
    setTimeout(krokAnimace(obr, i / 20), i * 30);
  }
}

function krokAnimace(element, krok)
{
  // je zapotřebí vrátit novou funkci — ta se teprve zavolá při načasovaném timeoutu, zatímco krokAnimace se volá dvacetkrát při načasování
  return function()
  {
    var o = 1 - krok;
    var of = Math.round((1 - krok) * 100);
    
    // tento řádek nastavuje atribut style
    element.style.cssText = "\
      opacity: " + o + ";\
      filter: alpha(opacity=" + of + ");\
      -moz-opacity: " + o + ";\
      -khtml-opacity: " + o + ";\
    ";
  };
}
</script>
<img id="obrazek" src="http://diskuse.jakpsatweb.cz/img/logo.gif"><br>
<input type="button" value="Plynule schovat" onclick="schovat('obrazek')">
Markii
Profil *
Tyjo opravdu moc děkuji za věnovaný čas, pomohlo moc !
Markii
Profil *
Takže upravil jsem to aby se to nezesvětlovalo ale ztmavovalo:
teda ztmavovalo a né zesvětlovalo
<script>
function ukazat(co)
{
  var obr = document.getElementById(co);
  for(var i = 1; i < 100; i++)
  {
    setTimeout(krokAnimace(obr, i / 80), i * 80);
  }
}

function krokAnimace(element, krok)
{

  return function()
  {
    var o = 0 + krok;
    var of = Math.round((0 + krok) * 100);
    
      element.style.cssText = "\
      opacity: " + o + ";\
      filter: alpha(opacity=" + of + ");\
      -moz-opacity: " + o + ";\
      -khtml-opacity: " + o + ";\
    ";
  };
}
</script>


Jenže nějak to blbne. Po prvním spuštění skriptu je to OK, ale když na ten obrázek, který to spouští, ukážu znova, tak to blbne a blbě problikává.

spouštím to takhle:

je to taková jednoduchá fotogalerie, omlouvám se za prasácký kód:

//fotka která to mění
echo "<img id =  \"foto\" name = \"foto\" alt = \"$radek[titulek]\" style = \"width:530px;\" src = \"../foto/530/$line[fotka].jpg\">";

//generování náhledových fotek z adresáře
$cesta = $_SERVER['DOCUMENT_ROOT']."/galerie/$radek[id]";
if (file_exists($cesta)) 
{
              
$slozka = dir($cesta); 
while($soubor=$slozka->read()) { 
  if ($soubor=="." || $soubor=="..") continue; 

  echo "<img   class = \"nahled\"  onmouseover=\"foto.src='../galerie/$radek[id]/$soubor'; className='nepruhledne'; \" onmouseover=\"ukazat(fotka);\" alt = \"$radek[titulek]\" src = \"../galerie/$radek[id]/$soubor\"> "; 
} 
$slozka->close(); 

}

Moderátor Chamurappi: Sloučeno sdělení ze tří příspěvků.
Chamurappi
Profil
Reaguji na Markiiho:
teda ztmavovalo a né zesvětlovalo
Ten můj skript ani neztmavuje, ani nezesvětluje — on zprůhledňuje. Pokud je pod obrázkem černo, bude to vypadat jako ztmavování.

setTimeout(krokAnimace(obr, i / 80), i * 80);
Jaký smysl tam podle tebe má ta první osmdesátka? V cyklu, kde „i“ mění od jedné do stovky se ten druhý argument bude měnit od 1 / 80 do 100 / 80. Tzn. budeš nastavovat „opacity: 1.25“.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: