Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Эффект увеличения 
:(
    Опции темы
Gurt87
Дата 23.9.2010, 16:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Ребята, подскажите как реализовать следующее:

Есть таблица, в первой ячейке находиться картинка.
При наведении на неё она должна стать серенькой, а слева от неё должно появится окошко фиксированного размера. Содержание окошка - та же картинка, только увеличена в 5 раз.

Для ясности прикрепляю файл.user posted image
PM MAIL   Вверх
bars80080
Дата 23.9.2010, 19:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



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

Репутация: 44
Всего: 315
скажем где-то у нас есть слой для показа большой картинки:

Код

<div id="big" style="display: none; position: absolute;"><img src="" /></div>


вешаем на картинки обработчики
Код

$('#idtable').find('img').hover(qw, er);


function qw(event) {
    var obj = event.target.offset();
    var pic = event.target.src;
    var w = event.target.width();
    var h = event.target.height();
    $('#big').show();
    $('#big').css('left', obj.left - 100);
    $('#big').css('top', obj.top);
    $('#big').find('img').eq(0).src = pic;
    $('#big').find('img').eq(0).width(w*5);
    $('#big').find('img').eq(0).height(h*5);
}
function er() {
    $('#big').hide();
}


ну, и может быть напутал, не event.target.width(), а $(event.target).width()
PM MAIL WWW   Вверх
Gurt87
Дата 24.9.2010, 14:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Цитата(bars80080 @ 23.9.2010,  19:21)
скажем где-то у нас есть слой для показа большой картинки:

Код

<div id="big" style="display: none; position: absolute;"><img src="" /></div>


вешаем на картинки обработчики
Код

$('#idtable').find('img').hover(qw, er);


function qw(event) {
    var obj = event.target.offset();
    var pic = event.target.src;
    var w = event.target.width();
    var h = event.target.height();
    $('#big').show();
    $('#big').css('left', obj.left - 100);
    $('#big').css('top', obj.top);
    $('#big').find('img').eq(0).src = pic;
    $('#big').find('img').eq(0).width(w*5);
    $('#big').find('img').eq(0).height(h*5);
}
function er() {
    $('#big').hide();
}


ну, и может быть напутал, не event.target.width(), а $(event.target).width()

Заранее извиняюсь..я новичок..может чёт не так делаю..
не получается =((

Вот код:
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <title>Каталог</title>
        <script type='text/javascript'>
            
        function qw(event) {
    var obj = event.target.offset();
    var pic = event.target.src;
    var w = event.target.width();
    var h = event.target.height();
    $('#big').show();
    $('#big').css('left', obj.left - 100);
    $('#big').css('top', obj.top);
    $('#big').find('img').eq(0).src = pic;
    $('#big').find('img').eq(0).width(w*5);
    $('#big').find('img').eq(0).height(h*5);
}
function er() {
    $('#big').hide();
}
        </script>
        
    </head>
<body>

......
......
......
   <div id="catalog_colum">
          <div id="big" style="display:none; position: absolute;"><img src="" /></div>
          
          
            <table id="catalog_table" align="center" cellspacing="0"  bordercolor="#c1bfb0" border="1px">
            <caption class="caption">Альбомы, тетради</caption>
                <tr align="center"> 
                    <td class="cat_pic"><img src="product_img/catalog.jpg" border="0" onMouseOver="$('#catalog_table').find('img').hover(qw, er);"></td>
   
               </tr>
            </table>
          </div>

.....
.....

</body>
</html>




Да и #catalog_table у меня нету в CSS...может надо добавить??
PM MAIL   Вверх
bars80080
Дата 24.9.2010, 14:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



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

Репутация: 44
Всего: 315
Цитата(Gurt87 @  24.9.2010,  14:26 Найти цитируемый пост)
Да и #catalog_table у меня нету в CSS...может надо добавить??

это не важно. а вот подключить библиотеку jquery, чтобы пользоваться функцией $ - необходимо.
скачать можно здесь: http://www.linkexchanger.su/download
к примеру, возьмём версию jquery-1.2.6.pack.js

Цитата

onMouseOver="$('#catalog_table').find('img').hover(qw, er);"
я такого не писал. 

с корректировкой на вас, это будет выглядеть так:
Код

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type='text/javascript'>
$(document).ready(function() { $('#catalog_table').find('img').hover(qw, er); });

function qw(event) {
    var obj = event.target.offset();
    var pic = event.target.src;
    var w = event.target.width();
    var h = event.target.height();
    $('#big').show();
    $('#big').css('left', obj.left - 100);
    $('#big').css('top', obj.top);
    $('#big').find('img').eq(0).src = pic;
    $('#big').find('img').eq(0).width(w*5);
    $('#big').find('img').eq(0).height(h*5);
}
function er() {
    $('#big').hide();
}
</script>
PM MAIL WWW   Вверх
Gurt87
Дата 24.9.2010, 16:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Чуть подредактировал (может чёт и не правильно)
Код


function qw(event) {
    
    var obj = $(event.target).offset();
    var pic = event.target.src;
    var w = $(event.target).width(); 
    var h = $(event.target).height();
    
    $('#big').show();
    
   $('#big').css('left', obj.left - 100);
    $('#big').css('top', obj.top);
    $('#big').find('img').eq(0).src = pic;
    $('#big').find('img').eq(0).width(w*5);
    $('#big').find('img').eq(0).height(h*5);
}



В итоге в IE,Мазила, Сафари при наведении на ячейку таблицы, отображается окно в 5 раз больше картинки, но оно пустое..(вместо картинки крестик)...Предположу что  $('#big').find('img').eq(0).src = pic; не срабатывает...

А в Опере вообще ничего не происходит. 
PM MAIL   Вверх
ksnk
Дата 24.9.2010, 17:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <title>Каталог</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type='text/javascript'>
$(function() { $('#catalog_table').find('img').hover(qw, er); });
function qw(event) {
    var   $target=$(event.target);
    $('#big').show()
        .find('img:first')
            .attr('src',$target.attr('src')) //  event.target.src будет быстрее, но идеологически неверно :) ...
            .css({width:$target.width()*5,height:$target.height()*5});
}
function er() {
    $('#big').hide();
}
</script>

        
    </head>
<body>
......
......
......
   <div id="catalog_colum">
          <div id="big" style="float:left; position: absolute;"><img src="" /></div>
          
          
            <table id="catalog_table" align="center" cellspacing="0"  bordercolor="#c1bfb0" border="1px">
            <caption class="caption">Альбомы, тетради</caption>
                <tr align="center"> 
                    <td class="cat_pic"><img src="product_img/catalog.jpg" border="0"></td>
   
               </tr>
            </table>
          </div>
.....
.....
</body>
</html>



так, вроде, несколько более правильно.

И версию jQuery разумнее брать поновее, особенно учитывая тот факт, что с 3-й в ней пофиксили какие-то очень существенные баги.

Из изменений - onMouseOver элемента выкинут, место него - одна строчка скрипта.


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Gurt87
Дата 24.9.2010, 17:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Цитата(ksnk @ 24.9.2010,  17:05)
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <title>Каталог</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type='text/javascript'>
$(function() { $('#catalog_table').find('img').hover(qw, er); });
function qw(event) {
    var   $target=$(event.target);
    $('#big').show()
        .find('img:first')
            .attr('src',$target.attr('src')) //  event.target.src будет быстрее, но идеологически неверно :) ...
            .css({width:$target.width()*5,height:$target.height()*5});
}
function er() {
    $('#big').hide();
}
</script>

        
    </head>
<body>
......
......
......
   <div id="catalog_colum">
          <div id="big" style="float:left; position: absolute;"><img src="" /></div>
          
          
            <table id="catalog_table" align="center" cellspacing="0"  bordercolor="#c1bfb0" border="1px">
            <caption class="caption">Альбомы, тетради</caption>
                <tr align="center"> 
                    <td class="cat_pic"><img src="product_img/catalog.jpg" border="0"></td>
   
               </tr>
            </table>
          </div>
.....
.....
</body>
</html>



так, вроде, несколько более правильно.

И версию jQuery разумнее брать поновее, особенно учитывая тот факт, что с 3-й в ней пофиксили какие-то очень существенные баги.

Из изменений - onMouseOver элемента выкинут, место него - одна строчка скрипта.

Спасибо, этот вариант работает.
А как теперь позиционировать увеличенный рисунок слева от меньшего рисунка. (Так как показано на рисунке в шапке темы)
PM MAIL   Вверх
bars80080
Дата 24.9.2010, 19:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



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

Репутация: 44
Всего: 315
Цитата(Gurt87 @  24.9.2010,  17:57 Найти цитируемый пост)
А как теперь позиционировать увеличенный рисунок слева от меньшего рисунка.

за это отвечали строчки

Код

    var obj = $(event.target).offset();
   $('#big').css('left', obj.left - 100);
    $('#big').css('top', obj.top);
PM MAIL WWW   Вверх
ksnk
Дата 24.9.2010, 19:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386
Цитата(bars80080 @  24.9.2010,  19:00 Найти цитируемый пост)
за это отвечали строчки

да. Я что-то не обратил внимания, что увеличенная картинка устанавливается рядом с исходным изображением. Думал что она всегда на одном и том-же месте.
Код

   var   $target=$(event.target),
       obj = $target.offset();
    $('#big').show()
        .css({left:obj.left - 100,top:obj.top}) // тут с -100 надо еще подумать...
        .find('img:first')
            .attr('src',$target.attr('src')) //  event.target.src будет быстрее, но идеологически неверно :) ...
            .css({width:$target.width()*5,height:$target.height()*5});
}





--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
bars80080
Дата 24.9.2010, 19:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



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

Репутация: 44
Всего: 315
Цитата(ksnk @  24.9.2010,  19:10 Найти цитируемый пост)
тут с -100 надо еще подумать...

это само собой. и само собой напрашивается не -100, а - $target.width()*5 - 20
PM MAIL WWW   Вверх
Gurt87
Дата 25.9.2010, 11:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Еще вопрос:
Как в это й же функции  function qw(event) сделать так что бы при наведении на картинку цвет шрифта у соседней ячейки таблицы менялся 

Это сообщение отредактировал(а) Gurt87 - 25.9.2010, 14:43
PM MAIL   Вверх
bars80080
Дата 25.9.2010, 22:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



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

Репутация: 44
Всего: 315
экспериментировать не охота. но движение по DOM элементов с позиции jquery осуществляется

.find('нужный нам тэг').eq(порядковый номер элемента)
для движения вниз

.parent()
для движения вверх

шрифт поменять:
.css('color', '#0000ff')
PM MAIL WWW   Вверх
Gurt87
Дата 26.9.2010, 16:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Цитата(bars80080 @ 25.9.2010,  22:32)
экспериментировать не охота. но движение по DOM элементов с позиции jquery осуществляется

.find('нужный нам тэг').eq(порядковый номер элемента)
для движения вниз

.parent()
для движения вверх

шрифт поменять:
.css('color', '#0000ff')

Делаю вот так:

Код

        $(function() { $('#catalog_table').find('img').hover(qw, er); });
         function qw(event) {
         var $target=$(event.target), obj = $target.offset();
         
    
        $('#catalog_table').find('tr').eq(???).find('td').eq(1).css('background-color','#000') 



        $('#big').show()
        .css({top:obj.top - 190}) 
        .find('img:first')
            .attr('src',$target.attr('src')) 
            .css({width:170,height:170})
        }



То есть мне надо найти индекс TR в котором находиться тот самый рисунок на который мы наводим.

Как это сделать???




Это сообщение отредактировал(а) Gurt87 - 26.9.2010, 16:08
PM MAIL   Вверх
ksnk
Дата 26.9.2010, 17:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386
Код

$(function() { $('#catalog_table').find('img').hover(qw, er); });
         function qw(event) {
         var $target=$(event.target), obj = $target.offset();

       $target.parent().parent() // получился TR
          .fing('td').eq(1).css('background-color','#000') 
...


А его бякграунд меняется? Вроде раньше хотелось только текст шрифта поменять?


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Gurt87
Дата 26.9.2010, 19:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Всем спасибо за участие! Все получилось!

Это сообщение отредактировал(а) Gurt87 - 27.9.2010, 00:28
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0955 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.