Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.06.2012, 00:15
Интересующийся
Отправить личное сообщение для jorik Посмотреть профиль Найти все сообщения от jorik
 
Регистрация: 04.06.2012
Сообщений: 24

Вроде простая проблема
Всем привет! Пишу на php в js полный чайник (постараюсь исправить в скором времени, но проблему нужно решить сейчас). Есть вроде бы простая задача (для знающих).
Существует форма, когда форма активна для ввода текста, справа возле нее должна вывоиться картинка (ввиде карандаша, типа форма редактируется).
На сколько понимаю это как то так делается
<p>Ваш email:</p><div class="input"><input  type="text" name="email"  onclick="КАРТИНКА"></div>

Как сделать так чтобы вместо картинки выводился див с определенным класом (в котром будет картинка) и как сделать так чтобы сократить и максимально вынести код за пределы html?
Так же для картинки нужен прелоад, чтобы процеса загрузки при клике на форму не было, а выводилась сразу иконка.
Извините за ламерские вопросы, описал как смог, надеюсь на Ваши разьяснения и помощь
Ответить с цитированием
  #2 (permalink)  
Старый 05.06.2012, 00:48
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<script type="text/javascript">
window.onload = function() {//после загрузки страницы
 var imgStyle = document.getElementById('img_container').style;//сохраняем стиль контейнера вашего карандаша в переменную
 var email = document.getElementById("email");//сохраняем инпут в переменную
 email.onfocus = function(){//при фокусировке на инпуте
  imgStyle.display = 'block';//показываем див
 };
 email.onblur = function() {//при потере фокуса
  imgStyle.display = 'none';//скрываем див
 }
}
</script>
</head><body>
<p>Ваш email:</p><div class="input"><input  type="text" name="email" id="email"></div><div id="img_container" style="display:none"><img src="http://javascript.ru/themes/defaultangy/images/balance.png"></div>
</body></html>
Ответить с цитированием
  #3 (permalink)  
Старый 05.06.2012, 01:22
Интересующийся
Отправить личное сообщение для jorik Посмотреть профиль Найти все сообщения от jorik
 
Регистрация: 04.06.2012
Сообщений: 24

Раед,
Огромное спасибо! Еще один вопрос, а если на странице несколько форм, возле которых при фокусе нужно выводить эту картинку ?
Ответить с цитированием
  #4 (permalink)  
Старый 05.06.2012, 01:51
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

Сообщение от jorik
а если на странице несколько форм, возле которых при фокусе нужно выводить эту картинку
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<script type="text/javascript">
window.onload = function() {//после загрузки страницы
 var img_container = document.createElement('div'), img;
 img_container.appendChild(img = new Image);
 img_container.style.display = 'none';
 img.src = 'http://javascript.ru/themes/defaultangy/images/balance.png';
 var formInputs = document.getElementsByTagName('input');

 for (var i=0, j=formInputs.length;i<j; i++) {
  +function() {
   var email = formInputs[i], imgCopy = img_container.cloneNode(true);

   if ((' '+email.className+' ').indexOf('showImg')===-1) return;

   email.parentNode.appendChild(imgCopy);

   email.onfocus = function(){//при фокусировке на инпуте
    imgCopy.style.display = 'block';//показываем див
   };

   email.onblur = function() {//при потере фокуса
    imgCopy.style.display = 'none';//скрываем див
   }

  }()
 }

}
</script>
</head><body>
<p>Ваш email:</p><div class="input"><input  type="text" name="email" class="showImg"></div>
<p>Ваш email:</p><div class="input"><input  type="text" name="email" class="showImg"></div>
<p>А тут у инпута нет класса showImg</p><div class="input"><input  type="text" name="email"></div>
<p>Ваш email:</p><div class="input"><input  type="text" name="email" class="showImg"></div>
<p>Ваш email:</p><div class="input"><input  type="text" name="email" class="showImg"></div>
</body></html>

Последний раз редактировалось Раед, 05.06.2012 в 02:22.
Ответить с цитированием
  #5 (permalink)  
Старый 05.06.2012, 01:53
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Раед,
и как вы в этой каше что-то сами находите.
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #6 (permalink)  
Старый 05.06.2012, 01:57
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

Сообщение от devote
и как вы в этой каше что-то сами находите.
Ммм, где именно каша
Отступы подредактировал
Ответить с цитированием
  #7 (permalink)  
Старый 05.06.2012, 02:21
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от Раед
Отступы подредактировал
ну теперь вроде ничего, хотя так более читабельнее:
<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript">

            window.onload = function() {//после загрузки страницы

                var img  = new Image(),
                    formInputs = document.getElementsByTagName('input'),
                    img_container = document.createElement('div');

                img_container.appendChild( img );
                img_container.style.display = 'none';

                img.src = 'http://javascript.ru/themes/defaultangy/images/balance.png';

                for( var i = 0, j = formInputs.length; i < j; i++ ) {

                    (function( email ) {

                        var imgCopy = img_container.cloneNode(true);

                        if ( ( ' '+email.className+' ' ).indexOf( 'showImg' ) === -1 ) {
                            return;
                        }

                        email.parentNode.appendChild( imgCopy );

                        email.onfocus = function() { //при фокусировке на инпуте
                            imgCopy.style.display = 'block';//показываем див
                        };
                        email.onblur = function() { //при потере фокуса
                            imgCopy.style.display = 'none';//скрываем див
                        }
                    })( formInputs[i] );
                }
            }
        </script>
    </head>
    <body>
        <p>Ваш email:</p>
        <div class="input">
            <input  type="text" name="email" class="showImg">
        </div>
        <p>Ваш email:</p>
        <div class="input">
            <input  type="text" name="email" class="showImg">
        </div>
        <p>А тут у инпута нет класса showImg</p>
        <div class="input">
            <input  type="text" name="email">
        </div>
        <p>Ваш email:</p>
        <div class="input">
            <input  type="text" name="email" class="showImg">
        </div>
        <p>Ваш email:</p>
        <div class="input">
            <input  type="text" name="email" class="showImg">
        </div>
    </body>
</html>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine

Последний раз редактировалось devote, 05.06.2012 в 02:29.
Ответить с цитированием
  #8 (permalink)  
Старый 05.06.2012, 13:36
Интересующийся
Отправить личное сообщение для jorik Посмотреть профиль Найти все сообщения от jorik
 
Регистрация: 04.06.2012
Сообщений: 24

спс, еще один момент, данная опция должна работать так же и для textarea и если это возможно выводить небольшое инфо к каждому полю при фокусе, вот в таком плане

Инфо для каждого поля разное

Последний раз редактировалось jorik, 06.06.2012 в 11:35.
Ответить с цитированием
  #9 (permalink)  
Старый 06.06.2012, 11:36
Интересующийся
Отправить личное сообщение для jorik Посмотреть профиль Найти все сообщения от jorik
 
Регистрация: 04.06.2012
Сообщений: 24

никто не подскажет?
Ответить с цитированием
  #10 (permalink)  
Старый 06.06.2012, 15:12
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

jorik, Вам уже подсказали.

Вот здесь можно почитать, как найти формы в документе.
Тут - про события focus/blur.
Здесь
про стили и здесь про правильные показ/скрытие элемента.

Попробуйте сделать хоть что-то сами. Будет не получаться - обращайтесь.
Желаю удачи
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Простая проблема, не знаю как сформулировать iNfantry (X)HTML/CSS 3 23.03.2012 01:08
Проблема с получением атрибутов элементов из набора Nightwalker_nsk jQuery 2 17.05.2011 08:32
Проблема с Popup окном vovuslik jQuery 5 12.06.2010 16:12
Проблема, в менюшке Большой джо Элементы интерфейса 0 12.07.2009 17:12
Проблема спама lliberty AJAX и COMET 1 12.03.2009 16:47