jQuery « Смена рамки для картины на лету с помощью jquery?

Смотрим пример тут http://grafis.org/picture/2190 Смена рамок для картины.

Прошу совета как такое реализовать?

Вот только, там на сайте рамка загружается как фон для картины, целиком, одним изображением, и тут возникает вопрос, если эту рамку нужно для другого изображения применить, которое по ширине намного меньше, дай и высота другая, как тут обойтись одним изображением?

Можно хранить 8 частей рамки, (4 уголка и 4 стороны(наибольшие кусочки которые потом растянутся на всю ширину или высоту картины )), либо 1 изобр. для уголка и 1 для стороны рамки, потом крутить их как то(пока не понятно как).
В этом случае все просто и понятно. Только вот для добавления рамки, придется ее резать на несколько кусков(хотя если изобр. 2 то не проблема, только крутить их потом как?), или можно сделать это программно как то? (что тоже само по себе не простая задача, учитывая всякие аспекты изображения рамок).

Какие будут мысли )
0
image images jquery php

1 ответов

ДЛя генератора рамочки будем использовать три картинки:
  
Называются слева направо: corners.png, horiz.png, vert.png

Верстается нехитрым образом:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
  <head>
    <title>Corners Check</title>
    <link rel='stylesheet' href='style.css' type='text/css' media='all' />
  </head>
  <body>
    <h1>Corners</h1>
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td class="lt corner"></td>
        <td class="toph horiz"></td>
        <td class="rt corner"></td>
      </tr>
      <tr>
        <td class="lv vert"></td>
        <td class="imagebox"><img src="http://www.gravatar.com/avatar.php?gravatar_id=9d7c5ad7d4bd82b371fdea5e884bfeed&default=identicon&size=80&rating=PG" /></td>
        <td class="rv vert"></td>
      </tr>
      <tr>
        <td class="lb corner"></td>
        <td class="bh horiz"></td>
        <td class="rb corner"></td>
      </tr>
    </table>
  </body>
</html>
 
и style.css:

body  { background-color:#66BB77;}
table {
  background-color:white;
  border: 0px none;
  margin: 0px;
  padding: 0px;
}

img { border: 0px none;}

.corner {
  width: 40px;
  height: 40px;
}

.horiz {  height: 40px; }
.vert { width: 40px; }

.lt, .rt, .lb, .rb {
  background-image: url(corners.png);
  background-repeat: no-repeat;
}

.toph, .bh {
  background-image: url(horiz.png);
  background-repeat: repeat-x;
}

.lv, .rv {
  background-image: url(vert.png);
  background-repeat: repeat-y;
}

.lt {  background-position: 0px 0px;  }
.rt {  background-position: -40px 0px;  }
.lb {  background-position: 0px -40px;  }
.rb {  background-position: -40px -40px;}
.toph {  background-position: 0px 0px;  }
.bh {  background-position: 0px -40px;  }
.lv {  background-position: 0px 40px;  }
.rv{  background-position: -40px 0px;  }
 
Вам остается сохранить все, сложить в одну папку и получить вот это:

Ну как вам? потом просто с помощью JQ менять свойство background-image у нужных элементов.
UPD: чуть причесал CSS.
3

Идея в том, чтобы менять оформление в зависимости от смены класса, дабы не писать кучу скриптов, а на скриптах реализовывать эту самую смену класса.

В любом случае получится громоздкая конструкция в html.

По поводу частей картинки - лучше использовать спрайты. Тогда получиться всего 3 картинки на один вид рамки:

1 картинка - четыре уголка,
2 картинка - горизонтальный бг,
3 картинка - вертикальный бг.



0