Plynule prechody obrazku
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!
http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/example.html
Vážně chytré! :-)
Vážně chytré! :-)
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)...
novas: to pujde asi jen flashem.. mam dojem, ze ve schopnostech CSS nic takoveho neni
ale tim js by to melo jit, ne?
js? to nevim, ale pochybuju
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.
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.
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...
<HTML>mno jestli se IMHO nepletu tak JS umi menit transparenci.. tudis staci dat dva pod sebe a prvni nechat zanikat,druhy vynikat</HTML>
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>
<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>
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.
Dik!Vsecko to zkusim!
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)">
<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)">
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>
<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>
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/
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/
uzasny scripty, ktery funguji jen v IE, genialni... ;)
2Raven: Ten script, co sem napsal ja, tak funguje jak v Opere, tak i Mozille....
Nové příspěvky
Smazani stranek
index.html )
HTML Tabulky
Zalamování textu pomocí CSS
Přesměrování
Arduino - 400 Bad Request
Nastavení českých písmen
POMOC! po druhé!
Pozicování (obrázek na střed).
Jak vycentrovat obrazek, ktery je v prikazu absolute ?
Použití tvůrce webu
katalog
async functions' is only available in es8 (use 'esversion: 8')
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
Problém s načítáním
Div pro reklamu překrývá prvky webové stránky
Nezobrazuje se mi lišta s reklamou
ako nahrám na môj web favicon?
JavaScript - nečitelný soubor *.js - jak prohlížet/editovat
Problém s textem
videostream
index.html
GB///refresh///JS
Total Commander - server nenalezen
Mobilní verze webu
Další témata
STATUS
FTP
HTTP
SQL
PHP
© 2002 - 2024 Web zdarma s.r.o. — zvládnete to sami