HTML+CSS+JavaScript

Заказчик предложил чтоб при наведение мышки на маленькую картинку сразу бы показывало большую как бы превью, подскажите как сделать (сам я в Jscript полный профан)

<img onmouseover="ДЕЙСТВИЕ (this)" onmouseout="ОТМЕНА ДЕЙСТВИЯ (this)">

А вот какое именно "действие" - решать вам, ибо показывать картинку РЕАЛЬНОГО размера на той же странице, где и имеется маленькая - полнейший кретинизм (ничего личного): вся страница будет "прыгать", предоставляя место под новый графический образ.

Открывать картинку РЕАЛЬНОГО размера следует в каком-то специально отведенном для этого месте на странице (или в новом окне).
В зависимости от выбранного способа будет меняться код "действия".
Когда выберете - сообщите. Дам код.

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

Можно по событию наведения мыши добавлять div с z-index=+1 к body методом appendChild, потом методом removeChild убирать.

если можно напишите поконкретнее...

Смотрите, например, здесь

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

есть thickbox

понимаете мне не нужны все эти навароты затемнение и тд... всего лишь показ картинки полного размер в новом окне без всяких отрибутов.

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

Простейший, ИМХО, способ - вешать саму новую картинку в виде слоя с "верхним" z-index.
А для лучшего позиционирования необходимо задать известные вам (это же - ВАШИ картинки, их размеры вы должны знать) линейные размеры реальных картинок:

<script> function AddPic (PicURL, PicWidth, PicHeight) { var t = document.createElement ('img'); with (t) {id = 'RealPic'; src = PicURL} with (t.style)    {    width =  PicWidth + 'px';    height = PicHeight + 'px';    zIndex = 999;    position = 'absolute';    left = Math.max (50, (document.body.offsetWidth - PicWidth) / 2);    top = Math.max (50, (document.body.offsetHeight - PicHeight) / 2);    border = '15px solid red';    } objPic = document.body.appendChild (t); } function RemovePic () { if (document.getElementById ('RealPic'))    document.body.removeChild (document.getElementById ('RealPic')); } </script> <img src="http://www.google.com/images/nav_logo3.png"    onmouseover="AddPic ('http://www.google.com/intl/en_ALL/images/logo.gif', 276, 110)"    onmouseout="RemovePic ()">

большое спасибо работает

но возникает в связи с этим еще дополнение можно ли определить реальный размер картинки и местоположение. То есть чтобы не передавать урл и размер. На странице будет выводиться картинка в маштабе а при наведение будет показываться реальный размер этой же картинки...

вообще возможно обратиться к элементу не зная его id или имени или номера в массиве эелементов, то есть конкретно к тому элементу действия с которым запускают javascript...

<script> function AddPic (x) { var t = document.createElement ('img'); with (t) {id = 'RealPic'; src = x.src} with (t.style) {zIndex = 999; position = 'absolute'; border = '15px solid red'} var s = document.body.appendChild (t); with (s)    {    style.left = Math.max (50, (document.body.offsetWidth - offsetWidth) / 2);    style.top = Math.max (50, (document.body.offsetHeight - offsetHeight) / 2);    } } function RemovePic () { if (document.getElementById ('RealPic'))    document.body.removeChild (document.getElementById ('RealPic')); } </script> <img src="http://www.google.com/intl/en_ALL/images/logo.gif"    width="10%"    onmouseover="AddPic (this)"    onmouseout="RemovePic ()">

PS. Указывать %% и для ширины, и для длины одновременно не надо: браузеру достаточно %% для одного измерения, второе он "подгонит" самостоятельно.

спасибо!!! большое но я от вас сегодня не отстану :) помогите мне еще чуток :)

можно сделать так например есть какойто заданный размер если размер картинки больше заданого то выводить ее заданным размером а если меньше то реальным размером :), а то я как то не очень доверяю администраторам сайта напихают картинок огромных а мне потом развлекайся...

Если прямо в коде (и максимально-допустимая ширина принята за 200px), то так:

<img src="..." onload="with (this) if (offsetWidth > 200) style.width = '200px';">

Разумеется, это не лучший вариант, ибо дергаться страница будет (в случае большого размера картинки, который потом уменьшится).
В идеале все картинки следует предзагрузить, а уж только потом формировать страницу, зная, какие из картинок будут равны именно 200px, а какие - впишутся в это ограничение сами.
Но это - если надо - в следующий раз.
Ибо надоело на сегодня благотворительностью заниматься :-)

нет вы немного не поняли.... не на странице, а в том скрипте который вы мне написали, чтоб большая копия показывалась не больше заданного размера а если картинка меньше то 100% размера...

Перепишите функцию так:

function AddPic (x) { var t = document.createElement ('img'); with (t) {id = 'RealPic'; src = x.src} with (t.style) {zIndex = 999; position = 'absolute'; border = '15px solid red'} var s = document.body.appendChild (t); var limitWidth = 100; //предел картинки по ширине в пикселях with (s)    {    if (offsetWidth > limitWidth)       {       var k = limitWidth / offsetWidth;       style.height = offsetHeight * k + 'px';       style.width = limitWidth + 'px';       }    style.left = Math.max (50, (document.body.offsetWidth - offsetWidth) / 2);    style.top = Math.max (50, (document.body.offsetHeight - offsetHeight) / 2);    } }

спасибо большое, будете мимо Омска проезжать заглядывайте в гости :) отблагодарю :)

еще такой вопрос можно ли средствами jscript узнать реальные размеры картинки а не те что заданы в теге img

<script> var ims = new Image(); ims.src = 'filename.ext'; alert(ims.width+'x'+ims.height) </script>

вот смотрите

<script>  function AddPic (RealID)  {  var t = document.createElement ('img'); var im=document.getElementById(RealID);  with (t) {id = 'RealPic'; src = im.src}  with (t.style)     {     width =  im.width + 'px';     height = im.height + 'px';     zIndex = 999;     position = 'absolute';     left = Math.max (50, (document.body.offsetWidth - im.width) / 2);     top = Math.max (50, (document.body.offsetHeight - im.width) / 2);     border = '1px solid red';     } objPic = document.body.appendChild (t);  }  function RemovePic ()  {  if (document.getElementById ('RealPic'))     document.body.removeChild (document.getElementById ('RealPic'));  }  </script>  <img src="1.jpg" id='q' width='10%' height='10%'    onmouseover="AddPic ('q')"     onmouseout="RemovePic ()">

мне нужно чтоб изображение выводилось при наведении в реальном размере а оно выводиться по прежнему в 10%

Добавить:
var ob = new Image();
ob.src = im.src;
И укажите размеры картинке этого объекта:
with (t.style)
{
width = ob.width;
height = ob.height;
Добавлять рх не надо. И не мешало бы позиционирование создаваемого изображения привязать к курсору, а то бяка получается. )

Как раз пишу макет для проекта.
http://alheniul.ru
Реализована именно ваша идея, но все открывается на той же странице. Задавайте вопросы по скрипту и верстке - отвечу