Вопрос по jQuery

img style="width:1281px;height:701px"

?

Это делается стандартными средствами HTML, при чём тут JS?

Я просто недопонял, картинка потом должна увеличиться... т.е. должен получиться эффект zoom-а.

вам нужен плагин типа lightbox

Для динамической генерации подключите timthumb.php - ПРАВИЛЬНО пережмет вашу картинку еще и закеширует. И не надо вам извращаться.

Ну а для вывода полной - просто ссылку на полную (не жатую). А красиво вывести можно тем же lightbox-ом

Вы не поняли.... я Lightbox знаю очень хорошо. Но он выводит картинку так, как её бы надо выводить в фотогалерее. Т.е. есть превью, щелкаешь на него, тебе красиво по центру вываливается большая картинка.

Это всё понятно. Но здесь нужно именно, чтобы она динамически приблизилась к пользователю. Не знаю, можете это зумом обозвать, я не знаю, как правильно. Т.е. пользователь кликает на ссылку "Главная", ему появляется текст на внутреннем слое, а бэкграунд автоматически приближается к нему. Причём, не выходя за границы коричневой рамки.

Т.е. надо учитывать, что реальный размер фона 1940 пикселей по ширине, реальная ширина коричневой рамки - 1280 пикселей. Как бы требуется на этот коричневый рисунок наложить overflow-x: hidden, но это НЕ срабатывает, я пробовал.

Простые выкрутасы, типа lightbox, lytebox и прочие "красивости" jQuery здесь неуместны.

Картинка может приблизиться только в одном случае - увеличившись в размерах. Увеличить её в размерах нетрудно (mootools - addClass, removeClass, jquery - animate). Остаётся только добиться того, чтобы каким бы ни был размер увеличенной картинки, (хоть 3000 px по ширине) она бы не выходила за область коричневой рамки. В этом весь вопрос.

менять размеры фона вряд ли получиться.

Пардон, сначала писал про уменьшение, потом про увеличение... взбаламутил народ, наверное... внесу ясность:

Картинка загружена уже уменьшенной, сделал это через CSS. Сейчас вопрос стоит о приближении картинки к пользователю. И уже начинаю думать - это практически возможно, или нет? Я ж приближаю не реальную картинку, а фон, т.е. то, что у меня прописано приблизительно вот так:

#bg
{
       background-url: url('../images/bg.jpg');
       width: ширина картинки
       height: высота картинки
}

Т.е. я пытаюсь выполнить операцию zoom над картинкой images/bg.jpg.

4arger

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

ко всем

Это принципиальный вопрос, поэтому если это неосуществимо, очень хотелось бы услышать, почему конкретно.

Если только как-то так извратиться:

<div style="position: absolute; left: 200px; top: 200px; width: 200px; height: 100px;  z-index: 50;">
<img src="pic.png" alt="" width="100%" height="100%" />
</div>
<div style="position: absolute; left: 100px; top: 100px; width: 400px; height: 100px; background-color: silver; z-index: 20;">
T
</div>
<div style="position: absolute; left: 100px; top: 200px; width: 100px; height: 100px; background-color: silver; z-index: 21;">
R
</div>
<div style="position: absolute; left: 400px; top: 200px; width: 100px; height: 100px; background-color: silver; z-index: 22;">
L
</div>
<div style="position: absolute; left: 100px; top: 300px; width: 400px; height: 100px; background-color: silver; z-index: 23;">
B
</div>

И менять размеры изображения или дива, в котором оно находится...

в CSS нет возможности менять размер background, нельзя растянуть фон на весь блок - нет такого свойства.

Если хотите растягивать - как вариант делайте "бекграунд" через <img>

Chukcha добавил 27.01.2011 в 18:22

чтобы попытаться закрыть вопрос

http://cssadvice.blogspot.com/2010/11/background-img.html - пробуйте