Pozvolné zvětšování objektu
Nazdar lidi.
Chystám se na něco velkého a zatím si chci udělat maketu v html, css, js a php. Potřeboval bych tak trošku poradit s pozvolným zvětšováním objektu. Má to být obrázek o rozměrech 16x16px, na který když se najede myší, pozvolna se zvětší v obrázek velký 23x23px. Zkoušel jsem už css vlastvost zoom, ale ta zvětší obrázek okamžitě. Pak jsem na netu našel nějaký kousek JavaScriptu, jenomže když jsem si ho upravil tak, aby vepisoval zvětšený obrázek, při najetí ho nezvětší, nýbrž při odjetí myší ( onmouseout ) obrázek zmenší z 23x23 na 16x16. Nechápu proč ta první fce nejde a prosím Vás tedy o radu. Všechny JS fce jsou tu:
bname=navigator.appName;
bversion=parseInt(navigator.appVersion)
if ((bname=="Netscape" && bversion>=4) || (bname=="Microsoft Internet Explorer" && bversion>=4)){
if (bname=="Netscape"){
brows=true
del=1
}
else{
brows=false
del=1
}
var msg=0;
var z=0;
var timer1;
var message= new Array();
var color= new Array();
var values= new Array('16','17','18','19','20','21','22','23')
var values1= new Array('23','22','21','20','19','18','17','16')
function start(){
if ((bname=="Netscape" && bversion>=4) || (bname=="Microsoft Internet Explorer" && bversion>=4)){
if(z<values.length){
if (brows){
document.layers['text'].document.writeln('<img src="Icons/win.png" width="'+values[z]+'" height="'+values[z]+'" onmouseover="start(z=0)" onmouseout="stop(z=0)">')
document.layers['text'].document.close();
}
else{
text.innerHTML='<img src="Icons/win.png" width="'+values[z]+'" height="'+values[z]+'" onmouseover="start(z=0)" onmouseout="stop(z=0)">'
}
if(values[z]!='23') {z++;
timer1=window.setTimeout('start()',del)}
}
else
chg();
}
}
function stop(){
if ((bname=="Netscape" && bversion>=4) || (bname=="Microsoft Internet Explorer" && bversion>=4)){
if(z<values1.length){
if (brows){
document.layers['text'].document.writeln('<img src="Icons/win.png" width="'+values1[z]+'" height="'+values1[z]+'" onmouseover="start(z=0)" onmouseout="stop(z=0)">')
document.layers['text'].document.close();
}
else{
text.innerHTML='<img src="Icons/win.png" width="'+values1[z]+'" height="'+values1[z]+'" onmouseover="start(z=0)" onmouseout="stop(z=0)">'
}
if(values1[z]!='16') {z++;
timer1=window.setTimeout('stop()',del)}
}
else
chg();
}
}
function chg(){
text.innerHTML='';
}
}
No a obrázek + další prvky:
<Div id="text">
<img src="Icons/win.png" onmouseover="start(z=0)" onmouseout="stop(z=0)">
</Div>
<Layer name="text" left=4 top=80>
</Layer>
Tohle je vše.
Jak jsem říkal, jde pouze druhá funkce, tedy stop(), start() nikoliv.
Pokud mi řeknete jak na to, budu moc rád.
Případně se spokojím i s jinými postupy.
Předem moc děkuji všem, co mi odepíší.
Chystám se na něco velkého a zatím si chci udělat maketu v html, css, js a php. Potřeboval bych tak trošku poradit s pozvolným zvětšováním objektu. Má to být obrázek o rozměrech 16x16px, na který když se najede myší, pozvolna se zvětší v obrázek velký 23x23px. Zkoušel jsem už css vlastvost zoom, ale ta zvětší obrázek okamžitě. Pak jsem na netu našel nějaký kousek JavaScriptu, jenomže když jsem si ho upravil tak, aby vepisoval zvětšený obrázek, při najetí ho nezvětší, nýbrž při odjetí myší ( onmouseout ) obrázek zmenší z 23x23 na 16x16. Nechápu proč ta první fce nejde a prosím Vás tedy o radu. Všechny JS fce jsou tu:
bname=navigator.appName;
bversion=parseInt(navigator.appVersion)
if ((bname=="Netscape" && bversion>=4) || (bname=="Microsoft Internet Explorer" && bversion>=4)){
if (bname=="Netscape"){
brows=true
del=1
}
else{
brows=false
del=1
}
var msg=0;
var z=0;
var timer1;
var message= new Array();
var color= new Array();
var values= new Array('16','17','18','19','20','21','22','23')
var values1= new Array('23','22','21','20','19','18','17','16')
function start(){
if ((bname=="Netscape" && bversion>=4) || (bname=="Microsoft Internet Explorer" && bversion>=4)){
if(z<values.length){
if (brows){
document.layers['text'].document.writeln('<img src="Icons/win.png" width="'+values[z]+'" height="'+values[z]+'" onmouseover="start(z=0)" onmouseout="stop(z=0)">')
document.layers['text'].document.close();
}
else{
text.innerHTML='<img src="Icons/win.png" width="'+values[z]+'" height="'+values[z]+'" onmouseover="start(z=0)" onmouseout="stop(z=0)">'
}
if(values[z]!='23') {z++;
timer1=window.setTimeout('start()',del)}
}
else
chg();
}
}
function stop(){
if ((bname=="Netscape" && bversion>=4) || (bname=="Microsoft Internet Explorer" && bversion>=4)){
if(z<values1.length){
if (brows){
document.layers['text'].document.writeln('<img src="Icons/win.png" width="'+values1[z]+'" height="'+values1[z]+'" onmouseover="start(z=0)" onmouseout="stop(z=0)">')
document.layers['text'].document.close();
}
else{
text.innerHTML='<img src="Icons/win.png" width="'+values1[z]+'" height="'+values1[z]+'" onmouseover="start(z=0)" onmouseout="stop(z=0)">'
}
if(values1[z]!='16') {z++;
timer1=window.setTimeout('stop()',del)}
}
else
chg();
}
}
function chg(){
text.innerHTML='';
}
}
No a obrázek + další prvky:
<Div id="text">
<img src="Icons/win.png" onmouseover="start(z=0)" onmouseout="stop(z=0)">
</Div>
<Layer name="text" left=4 top=80>
</Layer>
Tohle je vše.
Jak jsem říkal, jde pouze druhá funkce, tedy stop(), start() nikoliv.
Pokud mi řeknete jak na to, budu moc rád.
Případně se spokojím i s jinými postupy.
Předem moc děkuji všem, co mi odepíší.
Zkus to takto:
<head>
<script type="text/javascript">
function zvetsi() {
tmp = parseInt(document.getElementById("obrz").style.width, 10)
if (tmp < 24) {
tmp = parseInt(document.getElementById("obrz").style.width, 10)
tmp += 1;
document.getElementById("obrz").style.width = tmp + "px";
tmp = parseInt(document.getElementById("obrz").style.height, 10)
tmp += 1;
document.getElementById("obrz").style.height = tmp + "px";
window.setTimeout("zvetsi();", 1);
}
}
function zmensi() {
tmp = parseInt(document.getElementById("obrz").style.width, 10)
if (tmp > 15) {
tmp = parseInt(document.getElementById("obrz").style.width, 10)
tmp -= 1;
document.getElementById("obrz").style.width = tmp + "px";
tmp = parseInt(document.getElementById("obrz").style.height, 10)
tmp -= 1;
document.getElementById("obrz").style.height = tmp + "px";
window.setTimeout("zmensi();", 1);
}
}
</script>
</head>
<body>
<IMG alt="style" ID="obrz" style="width:13px; height:16px;" src="obrazek.gif" border="0" onMouseOver="zvetsi()" onMouseOut="zmensi()">
</body>
<head>
<script type="text/javascript">
function zvetsi() {
tmp = parseInt(document.getElementById("obrz").style.width, 10)
if (tmp < 24) {
tmp = parseInt(document.getElementById("obrz").style.width, 10)
tmp += 1;
document.getElementById("obrz").style.width = tmp + "px";
tmp = parseInt(document.getElementById("obrz").style.height, 10)
tmp += 1;
document.getElementById("obrz").style.height = tmp + "px";
window.setTimeout("zvetsi();", 1);
}
}
function zmensi() {
tmp = parseInt(document.getElementById("obrz").style.width, 10)
if (tmp > 15) {
tmp = parseInt(document.getElementById("obrz").style.width, 10)
tmp -= 1;
document.getElementById("obrz").style.width = tmp + "px";
tmp = parseInt(document.getElementById("obrz").style.height, 10)
tmp -= 1;
document.getElementById("obrz").style.height = tmp + "px";
window.setTimeout("zmensi();", 1);
}
}
</script>
</head>
<body>
<IMG alt="style" ID="obrz" style="width:13px; height:16px;" src="obrazek.gif" border="0" onMouseOver="zvetsi()" onMouseOut="zmensi()">
</body>
Dodatek. Zkoušel jsem to na obrázku 13x16 pixelu. Pro 16x16 si změň width v tagu IMG.
Pro obrázky, které mají stejnou výšku a šířku, to ještě jde zoptimalizovat:
<head>
<script type="text/javascript">
function zvetsi() {
tmp = parseInt(document.getElementById("obrz").style.width, 10)
if (tmp < 23) {
tmp = parseInt(document.getElementById("obrz").style.width, 10)
tmp += 1;
document.getElementById("obrz").style.width = tmp + "px";
document.getElementById("obrz").style.height = tmp + "px";
window.setTimeout("zvetsi();", 1);
}
}
function zmensi() {
tmp = parseInt(document.getElementById("obrz").style.width, 10)
if (tmp > 16) {
tmp = parseInt(document.getElementById("obrz").style.width, 10)
tmp -= 1;
document.getElementById("obrz").style.width = tmp + "px";
document.getElementById("obrz").style.height = tmp + "px";
window.setTimeout("zmensi();", 1);
}
}
</script>
</head>
<body>
<IMG alt="style" ID="obrz" style="width:16px; height:16px;" src="obrazek.gif" border="0" onMouseOver="zvetsi()" onMouseOut="zmensi()">
</body>
<head>
<script type="text/javascript">
function zvetsi() {
tmp = parseInt(document.getElementById("obrz").style.width, 10)
if (tmp < 23) {
tmp = parseInt(document.getElementById("obrz").style.width, 10)
tmp += 1;
document.getElementById("obrz").style.width = tmp + "px";
document.getElementById("obrz").style.height = tmp + "px";
window.setTimeout("zvetsi();", 1);
}
}
function zmensi() {
tmp = parseInt(document.getElementById("obrz").style.width, 10)
if (tmp > 16) {
tmp = parseInt(document.getElementById("obrz").style.width, 10)
tmp -= 1;
document.getElementById("obrz").style.width = tmp + "px";
document.getElementById("obrz").style.height = tmp + "px";
window.setTimeout("zmensi();", 1);
}
}
</script>
</head>
<body>
<IMG alt="style" ID="obrz" style="width:16px; height:16px;" src="obrazek.gif" border="0" onMouseOver="zvetsi()" onMouseOut="zmensi()">
</body>
Páni!
Tohle snad ani není možné! :D
Děkuju Vám mockrát.
Snad Vám to někdy budu moci oplatit =).
Tohle snad ani není možné! :D
Děkuju Vám mockrát.
Snad Vám to někdy budu moci oplatit =).
Dovolil bych si ale ještě jednu hloupou otázku.
S JS jsem pracoval naposled nevím kdy a tak už jsem vyšel ze cviku.
Chtěl jsem, aby tyto funkce zvětšovaly jakýkoliv obrázek.
Nadefinoval jsem tedy proměnnou obrz a vše jsem podle toho pozměnil.
Vše jde. Obrázek se zvětšuje, ale pouze o pixel.
obsah proměnné obrz se totiž nepředá.
window.setTimeout("zvetsi("+obrz+");", 1);
Tady mám chybu a já nevím, jak by to mělo vypadat správně.
Můžete mi prosím ještě naposled poradit?
Moc děkuji.
S JS jsem pracoval naposled nevím kdy a tak už jsem vyšel ze cviku.
Chtěl jsem, aby tyto funkce zvětšovaly jakýkoliv obrázek.
Nadefinoval jsem tedy proměnnou obrz a vše jsem podle toho pozměnil.
Vše jde. Obrázek se zvětšuje, ale pouze o pixel.
obsah proměnné obrz se totiž nepředá.
window.setTimeout("zvetsi("+obrz+");", 1);
Tady mám chybu a já nevím, jak by to mělo vypadat správně.
Můžete mi prosím ještě naposled poradit?
Moc děkuji.
Stačí drobná úprava:
<head>
<script type="text/javascript">
var obr
function zvetsi(obr) {
pom = obr
tmp = parseInt(document.getElementById(obr).style.width, 10)
if (tmp < 23) {
tmp = parseInt(document.getElementById(obr).style.width, 10)
tmp += 1;
document. getElementById(obr).style.width = tmp + "px";
document.getElementById(obr).style.height = tmp + "px";
window.setTimeout("zvetsi(pom);", 1);
}
}
function zmensi(obr) {
pom = obr
tmp = parseInt(document.getElementById(obr).style.width, 10)
if (tmp > 16) {
tmp = parseInt(document.getElementById(obr).style.width, 10)
tmp -= 1;
document.getElementById(obr).style.width = tmp + "px";
document.getElementById(obr).style.height = tmp + "px";
window.setTimeout("zmensi(pom);", 1);
}
}
</script>
</head>
<body>
<IMG alt="style" ID="obrz1" style="width:16px; height:16px;" src="obrazek.gif" border="0"
onMouseOver="zvetsi('obrz1')" onMouseOut="zmensi('obrz1')">
<IMG alt="style" ID="obrz2" style="width:16px; height:16px;" src="obrazek2.gif" border="0"
onMouseOver="zvetsi('obrz2')" onMouseOut="zmensi('obrz2')">
</body>
<head>
<script type="text/javascript">
var obr
function zvetsi(obr) {
pom = obr
tmp = parseInt(document.getElementById(obr).style.width, 10)
if (tmp < 23) {
tmp = parseInt(document.getElementById(obr).style.width, 10)
tmp += 1;
document. getElementById(obr).style.width = tmp + "px";
document.getElementById(obr).style.height = tmp + "px";
window.setTimeout("zvetsi(pom);", 1);
}
}
function zmensi(obr) {
pom = obr
tmp = parseInt(document.getElementById(obr).style.width, 10)
if (tmp > 16) {
tmp = parseInt(document.getElementById(obr).style.width, 10)
tmp -= 1;
document.getElementById(obr).style.width = tmp + "px";
document.getElementById(obr).style.height = tmp + "px";
window.setTimeout("zmensi(pom);", 1);
}
}
</script>
</head>
<body>
<IMG alt="style" ID="obrz1" style="width:16px; height:16px;" src="obrazek.gif" border="0"
onMouseOver="zvetsi('obrz1')" onMouseOut="zmensi('obrz1')">
<IMG alt="style" ID="obrz2" style="width:16px; height:16px;" src="obrazek2.gif" border="0"
onMouseOver="zvetsi('obrz2')" onMouseOut="zmensi('obrz2')">
</body>
Aha...
Vážně to jde =)¨.
Děkuji mockrát
Vážně to jde =)¨.
Děkuji mockrát
Mno a mám ještě poslední otázku.
Dřív mne bohužel nenapadla :D
dá se nějak roztáhnozt obrýzek na celé pozadí objektu? ( aby se neopakoval - jako např. na desktopu windows )
Dřív mne bohužel nenapadla :D
dá se nějak roztáhnozt obrýzek na celé pozadí objektu? ( aby se neopakoval - jako např. na desktopu windows )
Njn.. nikdo neodpovídá, jak vidím...
Ale ještě bych potřeboval poradit, jak mám překrýt jeden obrázek druhým.
Samozřejmě že ten překrytý by šel z části vydět, jelikož ten překrývající by byl na některých místech průhledný...
Jenže problém je v tom, že ten překrývaný obrázek je pohybující se gif.
Zkoušel jsem dát ten gif jako pozadí divu, do kterého bych pak vložil překrývající obrázek. Jenže gif se přestal hýbat :'(
Mou asi poslední možností je absolutní pozice. Jenže do toho se mi nechce, protože to dělá zmatky. Neznáte prosím jiné východisko?
Ale ještě bych potřeboval poradit, jak mám překrýt jeden obrázek druhým.
Samozřejmě že ten překrytý by šel z části vydět, jelikož ten překrývající by byl na některých místech průhledný...
Jenže problém je v tom, že ten překrývaný obrázek je pohybující se gif.
Zkoušel jsem dát ten gif jako pozadí divu, do kterého bych pak vložil překrývající obrázek. Jenže gif se přestal hýbat :'(
Mou asi poslední možností je absolutní pozice. Jenže do toho se mi nechce, protože to dělá zmatky. Neznáte prosím jiné východisko?
<HTML>flash</HTML>
Nové příspěvky
Kolik Vám je ???
Odkaz na zvýraznění
WordPress
SEO - sneakerland.sk
Seifertova báseň Chlapec a hvězdy
konec stránek
Vše dobře, ale nefunguje web...
Různé verze vlastních stránek
Platby
CloudFare
Pozastavení webu
Java Web Start
Kolik webů si smím vytvořit zdarma?
Linkbuilding
Převod webu z jiného webhostingu
Podpůrné prostředky při práci
Vyhledávání stránek na WordPressu
galerie pro webdesignery
Co komu chybí?
Notebook, TFT displej
Noty ke stažení
OU JEEE, FCK IE!
Problém s instalací WordPress ( z nabídky )
Jíný web v tom mém
Jak se do .... zbavim tech windows2000?
Další témata
STATUS
FTP
HTTP
SQL
PHP
© 2002 - 2024 Web zdarma s.r.o. — zvládnete to sami