Javascript-форум - Вроде простая проблема

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Вроде простая проблема (https://javascript.ru/forum/events/28855-vrode-prostaya-problema.html)

Вроде простая проблема

Всем привет! Пишу на php в js полный чайник (постараюсь исправить в скором времени, но проблему нужно решить сейчас). Есть вроде бы простая задача (для знающих).
Существует форма, когда форма активна для ввода текста, справа возле нее должна вывоиться картинка (ввиде карандаша, типа форма редактируется).
На сколько понимаю это как то так делается

<p>Ваш email:</p><div class="input"><input  type="text" name="email"  onclick="КАРТИНКА"></div>

Как сделать так чтобы вместо картинки выводился див с определенным класом (в котром будет картинка) и как сделать так чтобы сократить и максимально вынести код за пределы html?
Так же для картинки нужен прелоад, чтобы процеса загрузки при клике на форму не было, а выводилась сразу иконка.
Извините за ламерские вопросы, описал как смог, надеюсь на Ваши разьяснения и помощь

<!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>

Раед,
Огромное спасибо! Еще один вопрос, а если на странице несколько форм, возле которых при фокусе нужно выводить эту картинку ?

Цитата:

Сообщение от 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>

Раед,
и как вы в этой каше что-то сами находите.

Цитата:

Сообщение от devote

и как вы в этой каше что-то сами находите.

Ммм, где именно каша
Отступы подредактировал

Цитата:

Сообщение от Раед

Отступы подредактировал

ну теперь вроде ничего, хотя так более читабельнее:

<!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>

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

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

никто не подскажет? :help:

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

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

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