Plynule prechody obrazku

1. Návštěvník F4542D43 16. 2. 2004 21:31

   potreboval bych poradit jak zapricinit, aby se obrazek plynule zmenil v jiny (napr. po prejeti mysi). vyuzil bych to pro zmenu pozadi pod textem v menu. nejlepe by se mi to hodilo pomoci css (pokud mozno). dik za pomoc!

2. Návštěvník 636C646C 16. 2. 2004 22:06

   http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/example.html Vážně chytré! :-)

3. Návštěvník F4542D43 16. 2. 2004 22:16

   jo dik, ale takhle to umim taky.... me de o to, aby zmena barvy (nebo proste toho obrazku) probehla plynule, ne aby se proste a jednoduse okamzite vymenil za jiny. proste aby prvni obrazek "presel" v druhy. jde to pomoci javascriptu, to vim, uz sem to nekde videl. ale ja javascript moc nemusim a proto bych radsi nake to css. a stejnak sem tomu scriptu moc neporozumel (videl sem to jen v cizim zdrojaku bez vysvetleni)...

4. Návštěvník 68EF7512 16. 2. 2004 22:18

   novas: to pujde asi jen flashem.. mam dojem, ze ve schopnostech CSS nic takoveho neni

5. Návštěvník F4542D43 16. 2. 2004 22:30

   ale tim js by to melo jit, ne?

6. Návštěvník 68EF7512 16. 2. 2004 22:36

   js? to nevim, ale pochybuju

7. Návštěvník 636C646C 16. 2. 2004 22:41

   Tohle jsem kdysi někde sehnal. Jedna barva se postupně promění v druhou. Píšu to tady celé... V HTML: <div style="position:relative;padding-bottom:85px"> <div class="lix"> <table border="0" cellpadding="0" cellspacing="2" width="138" class="lix"> <tr> <td> <div class="neco">MENU</div> </td> </tr> <tr> <td> <a href="index.htm" onmouseover="lite(this)" onmouseout="lite(this)" onfocus="this.blur()">DOMŮ</a> </td> </tr> <tr> </table> </div> </div> V JS: function lite(obj) { if(document.all&&!window.opera) { obj.filters.blendTrans.apply(); obj.filters.blendTrans.play(); } } V CSS: table.lix a { display: block; width:136px; border:1px solid black; cursor:crosshair; filter:blendTrans(duration=0.5); font-family: arial,verdana,ms sans-serif; text-align: center; } div.lix { position:absolute; top:5px; left:5px; font-family: arial,verdana,ms sans-serif; text-align: center; } div.lix a { color:#053A5B; background-color:#099DFB; font-size:11px; font-family: arial,verdana,ms sans-serif; text-align: center; text-decoration: none; } div.lix a:link { color:#053A5B; background-color:#099DFB; font-size:11px; font-family: arial,verdana,ms sans-serif; text-align: center; } div.lix a:visited { color:#053A5B; background-color:#099DFB; font-size:11px; font-family: arial,verdana,ms sans-serif; text-align: center; } div.lix a:hover { color:white; background-color:#1A5280; border:1px solid white; text-decoration: none; font-weight: normal; font-size:11px font-family: arial,verdana,ms sans-serif; text-align: center; } div.lix a:active { color:white; background-color:#1A5280; border:1px solid white; font-size:11px font-family: arial,verdana,ms sans-serif; text-align: center; } Osobně tomu moc nerozumím:-), ale můžeš to vyzkoušet.

8. Návštěvník 68EF7512 16. 2. 2004 22:47

   CSS filtry, ty nejake schopnosti maj, ale neni jisty, ze to pujde na vsech prohlizecich, chce to zkouknout manual, pomoco js by s tim pak neco urcite delat dalo, to je fakt...

9. Návštěvník 1891CA5A 17. 2. 2004 01:28

   <HTML>mno jestli se IMHO nepletu tak JS umi menit transparenci.. tudis staci dat dva pod sebe a prvni nechat zanikat,druhy vynikat</HTML>

10. Návštěvník 8C3C1665 17. 2. 2004 09:07

    Vyzkousej tohle: <script language="JavaScript1.2"> //Fade-in image slideshow- By Dynamic Drive //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com //This credit MUST stay intact for use var slideshow_width=200//SET IMAGE WIDTH var slideshow_height=200//SET IMAGE HEIGHT var pause=2000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds) var fadeimages=new Array() //SET IMAGE PATHS. Extend or contract array as needed fadeimages[0]="tgifs/1.gif" fadeimages[1]="tgifs/2.jpg" fadeimages[2]="tgifs/3.jpg" fadeimages[3]="tgifs/4.jpg" fadeimages[4]="tgifs/5.jpg" ////NO need to edit beyond here///////////// var preloadedimages=new Array() for (p=0;p<fadeimages.length;p++){ preloadedimages[p]=new Image() preloadedimages[p].src=fadeimages[p] } var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1 var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1 if (ie4||dom) document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>') else document.write('<img name="defaultslide" src="'+fadeimages[0]+'">') var curpos=10 var degree=10 var curcanvas="canvas0" var curimageindex=0 var nextimageindex=1 function fadepic(){ if (curpos<100){ curpos+=10 if (tempobj.filters) tempobj.filters.alpha.opacity=curpos else if (tempobj.style.MozOpacity) tempobj.style.MozOpacity=curpos/100 } else{ clearInterval(dropslide) nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1" tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas) tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">' nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0 setTimeout("rotateimage()",pause) } } function rotateimage(){ if (ie4||dom){ resetit(curcanvas) var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.style.zIndex++ var temp='setInterval("fadepic()",50)' dropslide=eval(temp) curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0" } else document.images.defaultslide.src=fadeimages[curimageindex] curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0 } function resetit(what){ curpos=10 var crossobj=ie4? eval("document.all."+what) : document.getElementById(what) if (crossobj.filters) crossobj.filters.alpha.opacity=curpos else if (crossobj.style.MozOpacity) crossobj.style.MozOpacity=curpos/100 } function startit(){ var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">' rotateimage() } if (ie4||dom) window.onload=startit else setInterval("rotateimage()",pause) </script>

11. Návštěvník 6558E0FD 17. 2. 2004 09:44

    Nějaký příklad s využitím css filtrů je tady http://www.kosek.cz/clanky/dhtml/ukazky.html (někde uprostřed stránky), samotná ukázka je tu http://www.kosek.cz/clanky/dhtml/_10.html? . Kód je podstatně kratší než výše uvedené příklady (čímž nechcu říct, že jsou špatné). Funkční je to jen a pouze v MSIE.

12. Návštěvník F4542D43 17. 2. 2004 12:38

    Dik!Vsecko to zkusim!

13. Návštěvník F4542D43 17. 2. 2004 13:03

    takze sem si to prosel, a nejlip se jevi to co napsal pad. je to v podstate to co jsem videl (nekde-jak uz sem rek) a presne to co psal master. jsou tam pres sebe absolutne poziovane dva obrazky a meni se jejich pruhlenost pomoci filtru. ja ale JS moc nerozumim :( a proto me posledni prani je, jestli by mi nekdo nepomohl upravit kod tak, aby se po najeti mysi na obrazek plynule zmenil v jiny a tak zustal po celou dobu co na nem mys bude, a v momente kdy mys sjede, aby se zase zmenil (plynule) zpatky. <SCRIPT LANGUAGE="JavaScript"> <!-- var id, op = 100, // počáteční průhlednost step = -10; // krok function Start() { id = window.setInterval("Move()", 50); } function Stop() { window.clearInterval(id); } function Move() { op += step; if (op < 0) { op = 0; step = -step; }; if (op > 100) { op = 100; step = -step; }; document.all.img1.filters.Alpha.opacity = op; document.all.img2.filters.Alpha.opacity = 100-op; } // --> </SCRIPT> </HEAD> <BODY> <IMG ID=img1 SRC=tiger1.gif onMouseOver="Start()" onMouseOut="Stop()" STYLE="position: absolute; top: 10px; left: 10px; z-index: 2; filter: Alpha(Opacity=100)"> <IMG ID=img2 SRC=tiger2.gif STYLE="position: absolute; top: 10px; left: 10px; z-index: 1; filter: Alpha(Opacity=0)">

14. Návštěvník F4542D43 17. 2. 2004 19:52

    ha! uz to mam! a dokonce to i funguje! to ale neznamena ze tam nejsou chyby... davam to sem kdyby to nekoho zajimalo... a ani to neni tak slozity... <head> <title>Untitled</title> <SCRIPT LANGUAGE="JavaScript"> <!-- var id1,id2; op = 100, step = -20; function Start() { id1 = window.setInterval("Move()", 50),window.clearInterval(id2); } function Stop() { id2 = window.setInterval("Move2()", 50),window.clearInterval(id1); } function Move() { op += step; if (op > 100) { op = 100; step = -step; }; document.all.img1.filters.Alpha.opacity = op; document.all.img2.filters.Alpha.opacity = 100-op; } function Move2() { op += step; if (op < 0) { op = 0; step = -step; }; document.all.img1.filters.Alpha.opacity = op; document.all.img2.filters.Alpha.opacity = 100-op; } // --> </SCRIPT> </HEAD> <BODY> <IMG ID=img1 SRC=obr1.bmp onMouseOver="Start()" onMouseOut="Stop()" STYLE="position: absolute; top: 10px; left: 10px; z-index: 2;filter: Alpha(Opacity=100)"> <IMG ID=img2 SRC=obr2.bmp STYLE="position: absolute; top: 10px; left: 10px; z-index: 1;filter: Alpha(Opacity=0)"> <body> </body>

15. Návštěvník D06679CD 21. 2. 2004 13:39

    zkus zapojit novy veci, ktery jsou vymysleny k tomuto ucelu..... napr.: <animateColor attributeName="fill" attributeType="CSS" from="barva1" to="barva2" begin="onclick()" /> rek bych ze je to daleko srozumetelnejsi... koukni na www.w3.org/Graphics/SVG/

16. Návštěvník F1A7C185 29. 2. 2004 14:08

    uzasny scripty, ktery funguji jen v IE, genialni... ;)

17. Návštěvník 8C3C1665 1. 3. 2004 10:54

    2Raven: Ten script, co sem napsal ja, tak funguje jak v Opere, tak i Mozille....

← Zpět na všechna témata