Увеличение картинки при наведении

[Tchorteg]

Делаю чтоб картинка увеличивалась при наведении. Делаю так:

<style type="text/css">

body{padding:10px 100px;}

.zoom{

position:relative;

cursor:pointer;

left:0;

top:0;

}

</style>

<? if (!empty($picture)) {?>

<script type="text/javascript">

$(function(){

$('.zoom').hover(function(){

$(this).stop().animate({width:"250px",left:"-25px",top:"-25px"}, 400);

$(this).attr("src","<?=$picture?>");

},

function(){

$(this).stop().animate({width:"100px",left:"0",top:"0"}, 400);

$(this).attr("src","<?=$picture?>");

});

});

</script>

<a href="#"><img border="0" width="100px" class="zoom" src="<?=$picture?>" alt="" title="" /></a>

<?}?>

Но небольшная проблемка. Т.к это все находиться в таблице, при увеличении картинки, таблица растягивается вместе с ней. Можно ли как-то сделать чтобы картинка не растягивала таблицу при увеличении, а была как-то поверх всего?

Edited July 6, 2011 by Tchorteg

[psywalker]

Может max-width: поможет?

[Tchorteg]

Может max-width: поможет?

max-width и max-height не помогают, таблица тянется будто ничего не ограничивает.

[psywalker]

Может max-width: поможет?

max-width и max-height не помогают, таблица тянется будто ничего не ограничивает.

Нет, я имел ввиду повесить это свойство на картинку.

А вообще вот на это обрати внимание http://htmlbook.ru/css/table-layout

[SelenIT]

Обернуть картинку дивом с фиксированными размерами (тем более, раз всё генерится через PHP, то и померить картинку на сервере элементарно)?

[Tchorteg]

Может max-width: поможет?

max-width и max-height не помогают, таблица тянется будто ничего не ограничивает.

Нет, я имел ввиду повесить это свойство на картинку.

А вообще вот на это обрати внимание http://htmlbook.ru/css/table-layout

Таблица должна тянуться, но в зависимости от остальных свойств присутствующих в ней. А сейчас она тянется когда картинка увеличивается при наведении.

Обернуть картинку дивом с фиксированными размерами (тем более, раз всё генерится через PHP, то и померить картинку на сервере элементарно)?

Зачем картинку делать фиксированную если мне нужно ее увеличивать?

[SelenIT]

Обернуть картинку дивом с фиксированными размерами (тем более, раз всё генерится через PHP, то и померить картинку на сервере элементарно)?

Зачем картинку делать фиксированную если мне нужно ее увеличивать?

Незачем. Поэтому я и не предлагал фиксировать картинку

[Tchorteg]

Обернуть картинку дивом с фиксированными размерами (тем более, раз всё генерится через PHP, то и померить картинку на сервере элементарно)?

Зачем картинку делать фиксированную если мне нужно ее увеличивать?

Незачем. Поэтому я и не предлагал фиксировать картинку

Тогда я не уловил месседж

Не могли бы вы подробней рассказать?

[rash]

А отрицательные маргины при увеличении - не вариант, я упускаю какую-то деталь?

[Tchorteg]

А отрицательные маргины при увеличении - не вариант, я упускаю какую-то деталь?

<script type="text/javascript">

$(function(){

$('.zoom').hover(function(){

$(this).stop().animate({width:"250px",left:"-25px",top:" -25px",margin-top:"-150px",margin-bottom:"-150px"}, 400);

$(this).attr("src","<?=$arElement["DETAIL_PICTURE"]["SRC"]?>");

},

function(){

$(this).stop().animate({width:"100px",left:"0",top:" 0"}, 400);

$(this).attr("src","<?=$arElement["DETAIL_PICTURE"]["SRC"]?>");

});

});

</script>

Не увеличивает в принципе тогда.

[SelenIT]

Сорри, я поторопился. Простое оборачивание картинки в <div style="width:100px;max-height:100px;"> не спасает от расширения ячейки. Железобетонный вариант - обернуть в <div style="position:relative;width:100px;height:100px;">, а картинку сделать position:absolute. Только вот диву оба размера указывать придется...

Для чистоты исходника можно это всё делать динамически, перед началом увеличения.