| Autor | Zpráva | ||
|---|---|---|---|
| Kápo Profil |
#1 · Zasláno: 26. 12. 2008, 14:32:31
Mam na obrazovke jeden obrazok, ktory je normalne definovany (<img src="...>) a ma id="obrazok"
Na obrazovke mam dalej taky obdlznik, ktory ma width 100 px a height 10 px... Chcem, aby kazdy pixel obdlznika po sirke reagoval na velkost obrazku...teda ked budem mysou tahat zlava doprava, bude sa obrazok zvacsovat, ked opacne, bude sa zmensovat....rozmyslal som, ze to tak spravim a vyplnim obdlznik 100 stvorcekmi s velkostou 1 X 10px, ktore budu mat atribut "onmouse over" meniace rozlisenie obrazka...lenze tych stvorcekov je 100 (!) a v nich sa v podstate meniu len to rozlisenie obrazka (prvy zlava ma onmouse over blablabla width='5px'" a height='5px', druhy ma 10px a takto az po 500px), cize mat pod sebou v kode definovanych 100 rovnakych objektov sa mi zda byt blbost, ako mozem zarucit v javascripte, ze to bude fungovat rovnako, ale aby bol ten kod mensi? Prikladam priklad, aby ste videli, ako to ma vyzerat... http://blender.yw.sk/obrazok/obrazok.html za pripadnu pomoc dopredu dakujem |
||
| regy Profil |
#2 · Zasláno: 28. 12. 2008, 23:35:15
nefunkční odkaz (alespoň u mě).
|
||
| regy Profil |
#3 · Zasláno: 28. 12. 2008, 23:35:49
Už se načetl chyba na mé straně:-)
|
||
| regy Profil |
#4 · Zasláno: 28. 12. 2008, 23:40:10
Jinak co se týče tvého dotazu, napadá mě, že by se dala to dalo vypsat pomocí php a máš to. Nebo to i vypsat pomocí javascriptu, možností je spousta. Zítra to klidně skusím, ale dnes už du spát.
|
||
| regy Profil |
#5 · Zasláno: 29. 12. 2008, 10:23:03 · Upravil/a: regy
Tak už to mám. Příklad na http://přiklady.kablik.cz/velikost_obrazku/ Trochu jsem ti to vytunil, takže se zdroják trochu protáh. Pokud to tam ale nechceš, tak si tam můžeš nechan jen to vypisování.
Zdroják zde:
<?php
$maxwidth = 902; //maximální šířka
$minwidth = 0; //minimální šířka
$size = 5; //velikost rozdílu mezi 1. a 2. políčkem
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Velikost obrázků</title>
<script type="text/javascript">
function resize(x, y) {
document.getElementById(y).style.width = x;
document.getElementById('size').innerHTML = x + "px";
}
function zoomin(x) {
if(document.getElementById('image').offsetWidth < <?php echo $maxwidth;?>) {
document.getElementById('image').style.width = document.getElementById('image').offsetWidth + x;
document.getElementById('image2').style.width = document.getElementById('image2').offsetWidth + x;
document.getElementById("size").innerHTML = document.getElementById('image').offsetWidth + "px";
}
}
function zoomout(x) {
document.getElementById('image').style.width = document.getElementById('image').offsetWidth - x;
document.getElementById('image2').style.width = document.getElementById('image2').offsetWidth - x;
document.getElementById("size").innerHTML = document.getElementById('image').offsetWidth + "px";
}
function noshade() {
document.getElementById('image').style.width = document.getElementById('image2').offsetWidth;
}
</script>
<style type="text/css">
.vote {width: 1px; height: 19px; float: left; background-image: url("posuvnik.PNG"); pointer: hand; cursor: pointer;}
.end {width: 1px; height: 19px; float: left; background-color: black;}
#image {position: absolute; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;}
#size {float: left; font: 10pt Arial; margin-left: 2px; border: 1px black solid; height: 17px; width: 40px; text-align: center;}
#plus {float: left; font: 10pt Arial; margin-left: 2px; border: 1px black solid; height: 17px; width: 17px; text-align: center; pointer: hand; cursor: pointer;}
#minus {float: left; font: 10pt Arial; margin-left: 2px; border: 1px black solid; height: 17px; width: 17px; text-align: center; pointer: hand; cursor: pointer;}
</style>
</head>
<body>
<div class='posuvnik'>
<div class='end'></div>
<?php
while($minwidth <= $maxwidth) { //cyklus pro výpis jendotlivých divů
echo "<div class='vote' id='vote$minwidth' onMouseOver=\"resize('$minwidth', 'image');\" onclick=\"resize('$minwidth', 'image2');\" onMouseOut=\"noshade();\"></div>";
$minwidth = $size + $minwidth ;
}
if($maxwidth % $size != 0)
echo "<div class='vote' id='vote$maxwidth' onMouseOver=\"resize('$maxwidth', 'image');\" onclick=\"resize('$maxwidth', 'image2');\" onMouseOut=\"noshade();\"></div>";
?>
<div class='end'></div>
<div id='minus' onclick='zoomout(1);'>–</div>
<div id='size'><?php echo $maxwidth; ?>px</div>
<div id='plus' onclick='zoomin(1);'>+</div>
</div>
<br>
<img src='http://www.kablik.cz/beta/img/head.PNG' id='image'>
<img src='http://www.kablik.cz/beta/img/head.PNG' id='image2'>
</body>
</html>
Ups. Fakt se to docela protáhlo. Doufám, že to pochopíš. Nahoře do těch proměnných napíše maximální velikost těch obázků a jaký rozestupy mají mít jednotliví pdíky na tý resize oblasti. Na doladění je to +/-. Poku má obrázek velikost třeba 902 a je to rozdělený po pěti (viz příklad), skript to pozna a nakonec resize oblasti přidá ještě div, který je na 902, ikdyž to není násobek pěti. Jinak to si snad pochopil, ale když najedeš na přímku, tak se ti zobrazí jen náhled, jak by to vypadalo, kdyby byl tak velký a když ho takle velký mí chceš, tak klikneš. Kdybys něčemu ještě nerozuměl, tak napiš. |
||
| regy Profil |
#6 · Zasláno: 29. 12. 2008, 10:24:55
Ten odkaz je špatně, samozřejmě bez háčku ;-). http://priklady.kablik.cz/velikost_obrazku/.
|
||
| Kápo Profil |
#7 · Zasláno: 29. 12. 2008, 14:04:44
:O LOL? tak tomu nechapem :D ok nevadi, len mi povedz: maximalna velkost je vzdy pocitana na vacsi rozmer a tie mensie velkosti po 1 pixeli? teda ked si tam anhrajem obrazok o velkost 1500 PX krat 500 PX tak bude najvacsi rozmer 1500 PX? a nizsie budu pocitane po jednom pixeli?
ale aj tak diki za pomoc, dlho nikto neodpovedal...fakt dik, si moooc ochotny, toto som necakal, wow dik... |
||
| Kápo Profil |
#8 · Zasláno: 29. 12. 2008, 14:06:43
aha tak nie...maximalna sirka je prednastavena :(
ako to spravit, aby to zobralo rozmery obrazku a zvacsovalo ho vzhladom na tie rozmery? |
||
| regy Profil |
#9 · Zasláno: 29. 12. 2008, 15:01:14
To je jednoduché. Stačí změnit proměnné nahoře takto:
<?php
$filename = "http://www.kablik.cZ/beta/img/head.PNG"; //cesta k obrázku
$minwidth = 0; //minimální šířka
$size = 5; //velikost rozdílu mezi 1. a 2. políčkem
list($maxwidth, $maxheight) = getimagesize($filename); //Zjištění šířky
?>
V příkladu to už je také. |
||
| regy Profil |
#10 · Zasláno: 29. 12. 2008, 15:04:26
Jinak doufám, že ovládáš základy php a že ti to k něčemu bude.
|
||
| regy Profil |
#11 · Zasláno: 29. 12. 2008, 15:06:38
Jo a ještě něco (omlouvám se, že takto spamuji diskusi).
Zdroják i s phpkem máš, když deš na homepage www.priklady.kablik.cz . Omlouvám se za formu, dělal jsem to dnes a si 20 minut, ale myslím ,že jde hlavně o ten skript. |
||
|
Časová prodleva: 15 let
|
|||
0