VPF::корректное растягивание картинки

Anabolic

Дата 12.12.2007, 14:52 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 53
Регистрация: 1.9.2006

Репутация: нет
Всего: нет

как можно реализовать коректное растягивание картинки?
к примеру если тянешь границу браузера в право, картинка увеличивается в ширину, Но и в высоту. и наоборот. если тянешь в низ, то и ширина изменяется.

KOp4iK

Дата 13.12.2007, 18:46 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 118
Регистрация: 26.11.2004
Где: Латвия

Репутация: нет
Всего: 3

можно попробовать Ajax'ом

Castro

Дата 16.12.2007, 23:48 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 353
Регистрация: 31.8.2007
Где: Украина

Репутация: 3
Всего: 5

Anabolic, а геометрические искажения как?

--------------------

bars80080

Дата 17.12.2007, 18:47 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

советов давать не буду,
когда-то я бороздил эту тему, вот что получилось:

Код


<html><head>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script language="JavaScript">
load=new Array(); var n=0;
for(i=0; i < n; i++) {
    load[i]=new Image();
    load[i].src='../img/white.bmp'; }
var ns=(document.layers);
var ns6=(document.getElementById&&!document.all);
var ie=(document.all);
var y=null; var x=null; var z=null; var w=null;
if(ns||ns6) {
    window.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
    document.releaseEvents(Event.MOUSEMOVE); }
if(ns) { window.onmousedown=down; window.onmouseup=up }
if(ie||document.getElementById) { document.onmousedown=down; document.onmouseup=up }
function down(e) {
    if(ns) {
        if(document.layers['bloc'+e.target.name]) {
            window.onmousemove=move;
            z=document.layers['bloc'+e.target.name];
            y=e.layerY;
            x=e.layerX;
            document.layers['bloc'+e.target.name].zIndex=n++; }
        else { return true }
        w=z.name.charAt(z.name.length-1); }
    if(ie && window.event.srcElement.parentElement) {
        if(window.event.srcElement.parentElement.id.indexOf("bloc") != -1) {
            document.onmousemove=move;
            z=window.event.srcElement.parentElement;
            y=window.event.offsetY;
            x=window.event.offsetX;
            w=window.event.srcElement.parentElement.id.charAt(window.event.srcElement.parentElement.id.length-1);
            window.event.srcElement.parentElement.style.zIndex=n++; }}
    if(ns6) {
        if(e.target.parentNode.id.indexOf("bloc") != -1) {
            document.onmousemove=move;
            z=e.target.parentNode.style;
            x=e.clientX - parseInt(z.left);
            y=e.clientY - parseInt(z.top);
            w=e.target.parentNode.id.charAt(e.target.parentNode.id.length-1);
            z.zIndex=n++; }}
    return false; }
function move(e) {
    if(ns && z) {         
        z.left=e.pageX-x; z.top=e.pageY-y;
        document.formic.butgo.value=z.left; }
    if(ns6 && z) { 
        z.top=parseInt(e.clientY)-y; z.left=parseInt(e.clientX)-x;
        document.formic.butgo.value=z.left; }
    if(ie && z) { 
        str = z.id;  //str3 = 'bloc' + str1; 
        ptx = window.event.clientX-x; pty = window.event.clientY-y;
        if(str.search('x') == -1) { 
            str1 = str.slice(4,str.length);
            z.style.posLeft=ptx; z.style.posTop=pty;
            document.formic['ft_xy_' + str1].value='x' + z.style.posLeft + 'x' + z.style.posTop + '-' + str1; }
        else { 
            str1 = str.slice(4,-1); str2 = 'pics' + str1;
            if(str1 == 0) { ptx1 = bloc0.style.posLeft; pty1 = bloc0.style.posTop; }
            else if(str1 == 1) { ptx1 = bloc1.style.posLeft; pty1 = bloc1.style.posTop; }
            else if(str1 == 2) { ptx1 = bloc2.style.posLeft; pty1 = bloc2.style.posTop; }
            else if(str1 == 3) { ptx1 = bloc3.style.posLeft; pty1 = bloc3.style.posTop; }
            else if(str1 == 4) { ptx1 = bloc4.style.posLeft; pty1 = bloc4.style.posTop; }
            else if(str1 == 5) { ptx1 = bloc5.style.posLeft; pty1 = bloc5.style.posTop; }
            else if(str1 == 6) { ptx1 = bloc6.style.posLeft; pty1 = bloc6.style.posTop; }
            else if(str1 == 7) { ptx1 = bloc7.style.posLeft; pty1 = bloc7.style.posTop; }
            else if(str1 == 8) { ptx1 = bloc8.style.posLeft; pty1 = bloc8.style.posTop; }
            else if(str1 == 9) { ptx1 = bloc9.style.posLeft; pty1 = bloc9.style.posTop; }
            else if(str1 == 10) { ptx1 = bloc10.style.posLeft; pty1 = bloc10.style.posTop; }
            else if(str1 == 11) { ptx1 = bloc11.style.posLeft; pty1 = bloc11.style.posTop; }
            else if(str1 == 12) { ptx1 = bloc12.style.posLeft; pty1 = bloc12.style.posTop; }
            else if(str1 == 13) { ptx1 = bloc13.style.posLeft; pty1 = bloc13.style.posTop; }
            else if(str1 == 14) { ptx1 = bloc14.style.posLeft; pty1 = bloc14.style.posTop; }
            else if(str1 == 15) { ptx1 = bloc15.style.posLeft; pty1 = bloc15.style.posTop; }
            else if(str1 == 16) { ptx1 = bloc16.style.posLeft; pty1 = bloc16.style.posTop; }
            else if(str1 == 17) { ptx1 = bloc17.style.posLeft; pty1 = bloc17.style.posTop; }
            else if(str1 == 18) { ptx1 = bloc18.style.posLeft; pty1 = bloc18.style.posTop; }
            else if(str1 == 19) { ptx1 = bloc19.style.posLeft; pty1 = bloc19.style.posTop; }
            else if(str1 == 20) { ptx1 = bloc20.style.posLeft; pty1 = bloc20.style.posTop; }
            z.style.posLeft = (document[str2].width = ptx - ptx1) - 5; 
            z.style.posTop = (document[str2].height = pty - pty1) - 5;
            document.formic['ft_wh_'+str1].value='w' + document[str2].width + 'w' + document[str2].height + '-' + str1; }}
    return false; }
function up(e) {
    if(ie||ns6) document.onmousemove=null;
    if(ns)window.onmousemove=null;
    z=null; }
</script>
</head>
<body bgcolor="#cccccc" link="#FFFFFF" class="ft">
    <div id="bloc0" style="position: absolute; top: 200px; left: 300px; cursor: hand">
     <img src="../img/white.bmp" name="pics0" width=300 height=300 border=1 galleryimg="no">
     <div id="bloc0x" style="position: absolute; top: 295px; left: 295px; cursor: se-resize">
      <img src="../img/white.bmp" name="pics0x" width=5 height=5 border=1></div>
     <div style="position: absolute; top: 5px; left: 5px">áàçà ýëåìåíòà</div>
    </div>    
<?php $ft_n = 0; 
for($i = 1; isset($topis[$i][2]); $i++) {
    if($topis[$i][2] == 'label' or $topis[$i][2] == 'color' or $topis[$i][2] == 'check') continue;
    $ft_n++; $ft_top = $ft_n*60; $ft_left = 10 + 5*($ft_n%2);
    if($ft_top > 730) { $ft_left = $ft_left + 180; $ft_top = $ft_top - 720; }
    elseif($ft_top > 370) { $ft_left = $ft_left + 90; $ft_top = $ft_top - 360; }
    if(strlen($i) < 2) { $ft_k = '0'.$ft_n; } else { $ft_k = $ft_n; }
    $ft_xy[$ft_n] = '<input type="text" name="ft_xy_'.$ft_n.'">';
    $ft_wh[$ft_n] = '<input type="text" name="ft_wh_'.$ft_n.'">'; ?>
    <div id="bloc<?=$ft_n?>" style="position: absolute; top: <?=$ft_top?>px; left: <?=$ft_left?>px; cursor: hand">
     <img src="../img/white.bmp" name="pics<?=$ft_n?>" width=80 height=80 border=1 galleryimg="no">
     <div id="bloc<?=$ft_n?>x" style="position: absolute; top: 75px; left: 75px; cursor: se-resize">
      <img src="../img/white.bmp" name="pics<?=$ft_n?>x" width=5 height=5 border=1></div>
     <div style="position: absolute; top: 5px; left: 5px"><? echo $topis[$i][0].'<br>('.$topis[$i][3].')'; ?></div>
    </div>    
<?php } ?>                                                     
<form name="formic" action="ft_construct.php" method="post" enctype="multipart/form-data"><tr><td>
<input type="hidden" name="ft_t" value="<?=$ft_t?>">
<input type="text" name="ft_xy_0"><input type="text" name="ft_wh_0">
<?php for($i = 1; $i <= $ft_n; $i++) {
    echo $ft_xy[$i].$ft_wh[$i]; } ?>
</td></tr>
<tr><td><input type="submit" name="step4" value="óòâåðäèòü"></td></tr>
</form>
</body></html>

на php не смотрите, это для передачи параметров созданных областей

SelenIT

Дата 18.12.2007, 17:26 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

bars80080, строчки 61 - 80, конечно, внушают... smile

Не лень было столько копипастить?

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

bars80080

Дата 18.12.2007, 18:12 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

а блин, это же было на заре всех времён
я тогда никак не мог раздраконить имя таким макаром, чтобы функция работала для любого 'block' + i
хз, так и не смог заставить его понимать, что мне нужно

сейчас бы я наверно как-нибудь через getElementByName поступил, впрочем впадлу думать...

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »