Autor Zpráva
Kápo
Profil
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
nefunkční odkaz (alespoň u mě).
regy
Profil
Už se načetl chyba na mé straně:-)
regy
Profil
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
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);'>&ndash;</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
Ten odkaz je špatně, samozřejmě bez háčku ;-). http://priklady.kablik.cz/velikost_obrazku/.
Kápo
Profil
: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
aha tak nie...maximalna sirka je prednastavena :(

ako to spravit, aby to zobralo rozmery obrazku a zvacsovalo ho vzhladom na tie rozmery?
regy
Profil
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
Jinak doufám, že ovládáš základy php a že ti to k něčemu bude.
regy
Profil
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.

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:

Prosím používejte diakritiku a interpunkci.

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