★ Вывод изображения JavaScript
метод window.open
свойство innerHTML
метод document.write
метод id.src
метод document.getElementById
C S S
псевдокласс hover
псевдокласс focus
тернарный оператор ★ Вывод текстаперейти↓
вывод текста в рамку
Вывод текста поверх картинки ★ Вывод в новом окне JavaScriptперейти↓
как вывести изображение и текст в новом окне
как изменить стиль в новом окне ★ Способы запуска скрипта перейти↓
★ клик мыши
ообработчик onclick
ообработчик onfocus
гиперссылка
★ нажатие клавиши
клавиша "escape", клавиша"enter"
★ наведение курсора
обработчик onmouseover
★ функция addEventListener
★ Вывод информации в форме подсказкиперейти↓
Вывод изображения
Метод window.open
Следующий скрипт содержит коды вывода изображения по методу window.open()
<script>
function ZW(){
c=window.open("608.jpg","","width=600,height=400,left=600,top=300");
setTimeout("c.close();",2000);
}
</script>
<body>
<input type="button" value="window" onclick="ZW()">
Нажмите кнопку "window". Открывшееся окно c изображением закрывается автоматически
по коду
setTimeout("c.close();",2000).
Метод documtent.write()Очередной скрипт содержит коды вывода изображения с помощью метода document.write
<script>
function WR(){
w="<img SRC='619.jpg' width=600 height=400>"
document.write(w)
setTimeout('location="jav.html"',3000)
</script>
<body>
<input type="button" value="write" onClick="WR()">
Нажмите кнопку. Открывшееся окно закрывается автоматически по коду
setTimeout('location="jav.html"',3000).
Метод document.write выводит изображение в новое окно с неизвестным адресом. Зак-
рыть его с помощью window.close() нельзя, поэтому для возвращения к исходному окну
используется метод location. Для того, чтобы исходное окно оставалось открытым,
последний скрипт надо дополнить одной строчкой. Она открывает новое окно и с
помощью метода document.write в него вписывается изображение.
<script>
function WP()
{
c = window.open("","","width=600,height=400,left=300, top=150");
c.document.write("<p align=center><img SRC='18.jpg'>")
setTimeout('c.window.close()',3000)
}
</script>
<input type="button" value="write1" onClick="WP()">
Нажмите кнопку. Открывшееся окно закрывается автоматически по коду
setTimeout('c.window.close()',3000).
Свойство innerHTML
Следующий скрипт содержит коды вывода изображения с помощью свойства innerHTML
<p id="tam"></p>
<script>
function WN(){
img="<img SRC='21.jpg' style='width:300; height:200'>"
tam.innerHTML=img
setTimeout("location.reload()",2000)
}
</script>
<body>
<input type="button" value="inner" onclick="WN()">
Нажмите кнопку. Открывшееся окно закрывается автоматически по коду
setTimeout("location.reload()",2000).
Любопытно, что вывод с помощью свойства innerHTML можно осуществить и
без идентификатора по коду
document.body.innerHTML = img
При этом скрипт должен располагаться в body.
Свойство id.style.display
Этот метод целесообразно использовать при выводе и удалении картинки с задержкой.
В коде картинки (в стиле) нужно указать идентификатор (id="brum"), а также задать
размеры картинки и сделать ее невидимой (display: none). Вывод осуществляется
по коду
Метод document.getElementById
Следующий скрипт содержит вывод изображения с помощью метода
document.getElementById
<p id="tik"></p>
<script>
function WGG(){
qq="<img src='2.jpg' style='width:300; height:200'> "
document.getElementById("tik").innerHTML=qq
}
</script>
<body>
<input type="button" value="get" style='width:50; height:35; border:2px solid red'
onclick="WGG()">
Нажмите кнопку. Открывшееся окно закрывается автоматически по коду
setTimeout("location.reload()",2000).
Еще один способ вывести картинку с помощью getElementById.
В коде вывода вместо innerHTML можно использовать src. В этом случае картинка
с помощью getElementById выводится по коду:
document.getElementById('tak').src="18.jpg"
В целом скрипт выглядит так
<p img id="tak" style="display: none; width:300; height:200"></p>
<script>
function WGS(){
tak.style.display ='block'
document.getElementById("tak").src="18.jpg"
setTimeout('location.reload()',2000) //убираем рисунок через 2 секунды
}
</script>
<body>
<input type="button" value="щелкни" onclick="WGS()">
Как в код document.getElementById("id") ввести сразу несколько
идентификаторов.
Если по коду document.getElementById("id") нужно вывести сразу несколько
идентификаторов, то вместо записи нескольких однотипных строчек с разными
идентификаторами в круглых скобках можно ограничиться всего одной. Ниже представлен
скрипт по выводу на экран и скрытию двух групп картинок,
причем вывод и скрытие происходят в разное время.
<head>
<style>
img{
margin-left:30px;
float:left;
display: none;
width:300; height:200;
}
</style>
<script>
x=['im1','im2', 'im3' ]
z=['im4','im5', 'im6' ]
t=500
function WW(x){
for (i = 0; i <= 4; i++)
document.getElementById(x[i]).style.display ='block'}
setTimeout("WW(x)",t)
t=3500
function WD(x){
for (i = 0; i <= 4; i++)
document.getElementById(x[i]).style.display = 'none'}
setTimeout("WD(x)",t)
t=1500; setTimeout("WW(z)",t)
t=4500; setTimeout("WD(z)",t)
</script>
<body>
<img id="im1" src="3.jpg" style='border: 6px solid red'>
<img id="im2" src="17.jpg" style='border: 6px solid red'>
<img id="im3" src="19.jpg" style='border: 6px solid red'><BR>
<img id="im4" SRC="18.jpg" style='border: 6px solid yellow; margin-top:35px'>
<img id="im5" SRC="15.jpg" style='border: 6px solid yellow; margin-top:35px'>
<img id="im6" SRC="14.jpg" style='border: 6px solid yellow; margin-top:35px'>
Пояснения к скрипту
Группы идентификаторов задаются как массивы
x=['im1','im2', 'im3' ]первые три картинки
z=['im4','im5', 'im6' ]вторые три картинки
Чтобы в коде каждого изображения не перечислять его атрибуты (размеры,
его исходное, скрытие) используется внутренний стиль
<style>
img{
margin-left:30px;
float:left;
display: none;
width:150; hight:100;
}
</style>
Функция WW() отображает изображения, а функция WD()
скрывает их.
Для второй (и последующих групп, если они будут) идентификаторов коды отображения
и скрытия предельно короткие
t=1500; setTimeout("WW(z)",t)
t=5500; setTimeout("WD(z)",t)
Задержка позволяет выводить рисунки группами в разное время и совершать
над ними действия (например, убирать через какое-то время с экрана)
Как сократить запись кода document.getElementById
Если по коду document.getElementById("id") требуется выполнить несколько действий,
то вместо того, чтобы каждый раз писать document.getElementById можно ограничиться
одной записью
elem=document.getElementById
и затем в коде определенной операции писать только символ переменной elem
Например, вместо
document.getElementById('id').style.borderColor = "blue"
писать
elem.style.borderColor = "blue"
C S S
Псевдокласс focus
Псевдокласс focus относится к инструментам CSS и является аналогом
обработчика onfocus в JavaScript. О событии фокус, его обработке и особенностях
работы смотри раздел "Обработчик onfocus" в низу страницы (там же объясняются
ниже представленные коды). В рассматриваемом примере курсор наводится на псевдокнопку
"щелкни". После клика появляется рисунок. Рисунок исчезает после клика рядом с фото.
</head>
<style>
:focus{outline:none} /*убирает рамку при клике*/
#cimg{opacity:0;position: absolute; width:300px; height:200px;} /*стиль фото, поначалу скрытого (opacity:0)*/
#cb /*стиль надписи 'щелкни'*/
{cursor:pointer;position: absolute;margin-top:120;margin-left:250;font-size:30px; color:red;
border-color:blue; border-style: solid; border-width: 6px;width: 100px; border-radius: 12px; text-align:center;}
#cb:focus #cimg{opacity:1;position: absolute;margin-top:-80;margin-left:250;} /*клик на focus и возвращение фото его видимости (opacity:1)*/
</style>
<body>
<div id="cb" tabindex="1">Щелкни<img id="cimg" src="18.jpg"></div>
щелкни
Псевдокласс hover
Псевдокласс hover подробно рассмотрен на странице "Что такое стиль и CSS".
</head>
<style>
.ium{display:none; width: 300px; height: 200px;margin-top:20px; margin-left:60px;} /*стиль фото, поначалу невидимого (display:none)*/
#askat {cursor:pointer; font-size:36px; color:green;margin-top:20px;} /*стиль надписи 'наведи'*/
#askat:hover .ium{display:block} /*наведение курсора на надпись и возвращение видимости фото (display:block)*/
</style>
<body>
<div id="askat">Наведи<img class="ium" src="18.jpg"></div>
наведи курсор
Тернарный оператор
Еще один способ вывод картинки с помощью CSS заключается в использовании
тернарного оператора . Двумя классами (f) и (n) задаются свойства картинки. Классом n задается невидимость картинки в исходном состоянии (opacity:0).
С помощью тернарного оператора по первому клику выводится картинка, по второму
клику (на фото) она исчезает. Стиль надписи задается в body после кода тернарного оператора.
<body>
<style>
.f img{position: absolute; margin-top:20;margin-left:153;width:300px;height:200px;} /*стиль фото*/
.n img{opacity:0;} /*стиль надписи*/
</style>
<div class="n" onclick="this.className = (this.className == 'n' ? 'f': 'n' )"> /*тернарный оператор*/
<span style='position: absolute; margin-top:70;margin-left:45;font-size:30px; color:blue; border-color:red; border-style: solid; border-width: 6px; width: 100px;
height: 30px;border-radius: 12px; text-align:center;'>кликни</span><img
src='3.jpg'></div>
Следующий скрипт содержит коды вывода текста тремя способами: innerHTM,
getElementById и document.write
<p id="tom"></p><p id="trm"></p>
function TR(){
a="<span style='font-size:40;color:blue'>><p align=center>текст выведен c помощью innerHTML</span>"
tom.innerHTML=a
b="<span style='font-size:40;color:red'>><p align=center>текст выведен c помощью getElementById</span>"
setTimeout("document.getElementById('trm').innerHTML=b",2000)
wr="<span style='font-size:50;color:green'>текст выведен c помощью document.write</span>"
setTimeout('document.write(wr)',4000)
</script>
<body>
<input type="button" value=text onClick="TR()">
Нажмите кнопку. Открывшееся окно закрывается автоматически.
Вывод изображения и текста в рамку
Самый простой способ создать рамку - это задать ее с помощью стиля в коде
изображения или текста.
<script>
function ZZ(){
wc = window.open("","","width=600,height=450,left=400, top=150");
wc.document.write("<p align=center><img SRC='531.jpg' width=450 height=300
style='border: 10px solid violet'>") //пишем в одну строку
wd="<p align=center><span style='font-size:40; color:red; border:7px solid green'>
Достаточно короткий текст (примерно в одну строку). </span>" //пишем в одну строку
wc.document.write(wd)
setTimeout("wc.window.close()",4000)
}
</script>
<body>
<input type="button" value=рамка onClick="ZZ()">
Нажмите кнопку. Открывшееся окно закрывается автоматически по коду
setTimeout('wc.window.close()',4000)
Необходимо учесть, что когда текст состоит из нескольких строк вокруг каждой появляется
рамочное обрамление. В данном случае правильней применить тег div и установить для него
стиль, а текст вставлять уже внутрь данной «конструкции».
Вывод текста поверх картинки
Простой способ позволяет создать надпись поверх фото, используя только стиль,
т.е. с помощью CSS.
Скрипт выглядит так.
<style>
.aauw:after{position: absolute; white-space: pre;
content:
"Текст поверх фото" ;
font-family: Arial;
font-size:40px; font-weight: bold;
color: red; line-height: 2.0;
margin-left:650px;
margin-top:-500px;
z-index:10;
}
<style>
<body>
<div class='aauw'></div><img src="18.jpg"
style='width:400px; position: absolute; margin-left:640px;
margin-top:-500px;'></div>
Пояснения к скрипту
Текст надписи (ее дизайн, позиционирование и пр.) создается псевдоклассом
after (.aauw:after) непосредственно в стиле. Размер рисунка и его позиционирование
(цифры margin - условны и должны подгоняться к конкретной странице) задаются
стилем в коде изображения.
Если текст надписи большой
Предыдущий скрипт неудобен для большого текста, т.к. нужно делать перенос строки,
используя специальный код. Чтобы не заморачиваться с переносом строки, можно
предложить такой скрипт.
<style>
.cont {position: relative;}
.cont img {
position: absolute; margin-top:32px;
margin-left:490px; width:700px;
}
.cont p{
position: absolute; color: cyan;
font-size: 25px; margin-top:378px;
margin-left:530px;
}
</style>
<body>
<div class="cont">
<img class="img" src="18.jpg">
<p Паровозы ушли с железной дороги в 1962 году.<BR>Последний паровоз в СССР
был построен в 1956 году - <BR> это был товарный паровоз Луганского завода серии
'ЛВ'.<BR> Сохранившиеся паровозы серии 'ЛВ' до настоящего <BR> времени возят ретропоезда. </p>
</div>
Последниe паровозы ушли с железной дороги в 1962 году. Последний паровоз в СССР был
построен в 1956 году - это был товарный паровоз Луганского завода. Сохранившиеся паровозы серии 'ЛВ'
до настоящего времени возят ретропоезда
Вывод в новом окне JavaScript
Новое окно можно создать средствами JavaScript и с помощью CSS. Здесь рассмотрено
создание и вывод информации применительно к окну, созданному с помощью JavaScript.
Новое окно CSS подробно
рассмотрено на этой странице
Для создания нового окна JavaScript используется код
var xow = window.open("","","width=400px,height=550,left=320, top=150,")
Обратим внимание, что для вывода информации в новом окне оно должно быть задано
как переменная (xow). Ее имя следует записывать перед кодом, задающим определенное
событие в новом окне.
В новом окне все выводы следует делать методом document.write. Для смены
страницы (чтобы окно не опускалось вниз, а сохраняло свой размер) используем
вывод по document.body.innerHTML. Вывод с помощью id.innerHTML (id-идентификатор)
в новом окне не работает.Более подробно новое окно JavaScript с наполнением контента
методом document.write рассмотрено здесь Как вывести изображение и текст в новом окне
Следующий скрипт иллюстрирует вывод изображения и текста в новом окне
Там, где код выводится на экран браузера в две или более строк,
при записи скрипта строку не разрывать. Эти строки помечены в конце
точкой с запятой (;).
</head>
<body>
<script>
function TST()
{
var xow = window.open("","","width=400px,height=550,left=320, top=150,")
xow.ss0="<p align=center><span style='font-size:30;color:red'><BR>страница 1
</span><BR>"xow.setTimeout('document.body.innerHTML=ss0',30) ;
s1="<span style='font-size:30;color:green'>меняем фон по document.write<BR></span>" ;
xow.document.write(s1)
xow.setTimeout('document.write("<body bgColor=cyan>")',40)
xow.s2="<span style='font-size:30;color:f0f'><BR>выводим картинку по document.write</span>
<BR>";
xow.setTimeout('document.write(s2)',1000)
xow.im11="<img id='my' SRC='18.jpg' style=' width:300; height:200;
margin-left:40px;'<BR><BR>" ;
xow.setTimeout('document.write(im11)',3000)
xow.s12a="<span style='font-size:30;color:blue'><BR>сейчас перевернем страницу с помощью вывода текста по body.INNER</span><BR><BR>" ;
xow.setTimeout('document.write(s12a)',5000)
xow.ss1="<p align=center><span style='font-size:30;color:red'><BR>страница 2
</span><BR><BR>" ;
xow.setTimeout('document.body.innerHTML=ss1',8000)
xow.bq2="<span style='font-size:30px;color:blue'>перевернули страницу ТЕКСТОМ по body.INNER <BR><BR>и выводим картинку по WRITE </span><BR>" ;
xow.setTimeout('document.write(bq2)',9000)
xow.im33="<img id='my' SRC='12.jpg' style=' width:300; height:200;
margin-left:40px;'><BR>" ;
xow.setTimeout('document.write(im33)',11000)
xow.bq2f="<span style='font-size:23px;color:red'>уменьшаем размеры окна</span>"
xow.setTimeout('document.write(bq2f)',12000)
xow.setTimeout('resizeBy(-10,-125)',13000)
xow.ss2="<p align=center><span style='font-size:30;color:red'><BR>страница 3
</span><BR><BR>" ;
xow.setTimeout('document.body.innerHTML=ss2',14000)
xow.bq4="<span style='font-size:30px;color:f0f'>этот текст выведен по
body.innerHTML (он перевернул страницу)<BR></span><BR>" ;
xow.setTimeout('document.write(bq4)',14200)
xow.s2c="<span style='font-size:30;color:blue'><BR>этот текст выведен
по document.WRITE (страницу НЕ переворачивает)</span><BR><BR>" ;
xow.setTimeout('document.write(s2c)',16500)
xow.bqr="<span align=center><table width=200; height=100 style='text-align:center
margin-left:100px; font-size:30px;color:blue; border-width:10px; border-style: solid; border-color:cyan; background-color:yellow;'><td>К о н е ц Окно закрывается<BR><img SRC='kotik.gif' width=100 height=100><BR></td> </table>
</span>" ;
xow.setTimeout('document.body.innerHTML=bqr',20000)
xow.setTimeout("window.close()",26000)
}
</script>
<input type="button" value=посмотрите OnClick='TST()'>
Как изменить стиль в новом окне
Следующий скрипт иллюстрирует изменение стиля в новом окне.
</head>
<body>
<script>
function STS()
{
var xow = window.open("","","width=600,height=420,left=320, top=150,");
tex='Т е к с т'
xow.a1="<span id='ab' style='font-size:35;color:000'>меняем цвет
бордюра</span><BR>" /*строку не разрывать*/
xow.setTimeout('document.write(a1)',1000) /*строку не разрывать*/
xow.b="<table align=center id='my' width=400;
height=400; style='border-width:14px; border-style: solid;
border-color:violet; background-color:green;'><td id='tdn'
style='font-size:30px;color:yellow;text-align:center;display:none'
>"+tex+"</td></table></span>" /*строку не разрывать*/
xow.setTimeout('document.write(b)',500)
qw='document.getElementById("my").style.borderColor = "red"'
xow.setTimeout(qw,2000)
xow.setTimeout("ab.style.fontSize='0px'",3000)
xow.a2="<span id='ac' style='font-size:35;color:000'>меняем
цвет фона</span><BR>" /*строку не разрывать*/
xow.setTimeout('document.write(a2)',4000)
x='document.getElementById("my")'
y='.style.backgroundColor = "blue"'
z=x+y
xow.setTimeout(z,5000)
xow.setTimeout("ac.style.fontSize='0px'",6000)
xow.a3="<span id='ad' style='font-size:30;color:35;color:000'>меняем
ширину бордюра</span><BR>" /*строку не разрывать*/
xow.setTimeout('document.write(a3)',7000)
q1='document.getElementById("my").style.borderWidth = "35px"'
xow.setTimeout(q1,8000)
xow.setTimeout("ad.style.fontSize='0px'",9000)
qt1='document.getElementById("tdn").style.display = "block"'
xow.setTimeout(qt1,9500)
xow.a5="<span id='ae' style='font-size:35;color:000'>меняем
размер шрифта</span><BR>" /*строку не разрывать*/
xow.setTimeout('document.write(a5)',10000)
qt='document.getElementById("tdn").style.fontSize = "85px"'
xow.setTimeout(qt,11000)
xow.bq="<span table width=200; height=100 style='text-align:center;
margin-left:150px; font-size:30px;color:blue; border-width:10px;
border-style: solid; border-color:cyan; background-color:yellow;
'><td>К о н е ц Окно закрывается</td></table>
</span><BR>" /*строку не разрывать*/
xow.setTimeout('document.body.innerHTML=bq',12000)
xow.setTimeout("window.close()",14000)
}
</script>
<input type="button" value=кликни OnClick='STS()'>
Способы запуска скриптаКлик мышиОбработчик "onclick"
Мало иметь скрипт, в котором закодирована программа тех изменений, которые мы
хотим увидеть в окне браузера. Надо еще произвести запуск скрипта. Это можно сделать
различными способами, используя так называемые обработчики событий. Среди них одним
из популярных является обработчик с кодом "onclick". Он реализуется с помощью кнопки
и имеет код который содержит тэг:
<button onclick="Function()">имя кнопки</button>
Для уяснения этого кода, а также того, что такое обработчик и что он делает,
необходимы пояснения, которые продвинутый пользователь может не читать.
Для того,чтобы запустить скрипт и наблюдать его работу в окне браузера, должно произойти
определенное событие, а именно, воздействие пользователя на компьютер, например,
щелчок мыши (клик). Но это событие должно произойти не только в определенном
месте окна, но и быть обработано компьютером в соответствие с программой, закодированной
в скрипте.
С этой целью в скрипте должен быть прописан код обработчика события. В этом коде
долны быть указаны два свойства, два атрибута обработчика. Первый
атрибут несет информацию об объекте на экране, на который следует оказать воздействие
и к которому нужно подвести курсор. Второй атрибут определяет тип воздействия (клик
мышью или наведение курсора) и результат воздействия, который мы хотим получить.
Если говорить конкретно о клике мышью, то он должен
1-ое: создать объект, на который нужно оказать воздействие (в нашем случае-кнопка).
2-ое: он должен обработать событие "click (клик)", т.е. установить на том ли объекте
сделан клик и нужно ли компьютеру на него реагировать.
3-ье: он должен обработать те коды скрипта, которые определяются запросом в его коде
между кавычками " " и которые определяют требуемый результат. Этот результат есть новое
событие, заключающееся в изменениях в окне браузеры (вывод текста, картинки, вывод
объекта с определенными свойствами и изменение этих свойств, открытие и закрытие
модального окна, переход от одного файла к другому и др).
Получая команду, запрограммированную между " ", производится обработка либо
одного кода в скрипте, либо совокупности кодов, объединенных в функцию. По результатам
этой обработки ПК и выводит на экран браузера ту информацию, которую пользователь
закодировал в скрипте. Как видно из сказанного, ключевым словом при описании кода,
реализующего воздействие пользователя на ПК, является "обработка" Отсюда и
название - "обработчик".
В коде нашего обработчика button определяет объект, на который нужно произвести
воздействие. Далее следует термин onclick (по-русски "по клику") который устанаваливает
тип воздействия "click (клик)". То есть вначале идёт приставка "on", а дальше название
события. Знак = указывает на то, что должно произойти по клику, слово Function()
указывает компьютеру какие именно коды скрипта ему нужно выполнить.
Таким образом, не стоит путать название события "click" и обработчик для этого события
"onсlick". Обычно обработчик запускает выполнение функции.
<script>
function Foc4() {
myWin=window.open("","","width=580,height=550,left=320, top=150");
sr="<p align=center><span style='font-size:33;color:red;'>Вы запустили скрипт открытия нового<BR> окна
с помощью события click</span></p><BR>"
myWin.document.write(sr)
...........
другие тэги в новом окне
......................
}
</script>
<body>
<button OnClick="Foc4()">посмотреть</button>
Кроме того, без скрипта с помощью кнопки можно произвести следующие действия
<button OnClick="alert('текст')">вызвать alert</button>
<button OnClick='window.open("loc-click.html","","width=800,height=420,left=320, top=150")'>перейти к другому файлу</button>
<button OnClick='alert("перейти к другому файлу");window.open("loc-click.html","","width=600,height=420,left=320,
top=150")'>вызвать alert и
перейти к другому файлу</button>
<button OnClick="WOW();setTimeout('WAW()',1000)">запуск двух функций</button>
Обработчик "onfocus"
Запустить функцию можно кликом не только по кнопке, но и по любому элементу с помощью
события focus. Это событие заключается в наведении курсора на сфокусированный элемент
с последующим кликом по нему. Элемент считается сфокусированным, если он обладает
способностью оказаться в фокусе курсора. Ели элемент не сфокусирован, то он является
невидимым для курсора мыши, когда последний перемещается по окну браузера.
Некоторые элементы Javascript (их немного, например, INPUT) являются
сфокусированными по умолчанию. Другие нуждаются в фокусировке. Для этого в коде
элемента надо прописать tabindex="1". Если в стиле обработчика указать атрибут
"cursor:pointer", он будет сигнализировать о том, что при движении по окну браузера
курсор наткнулся на сфокусированный элемент: вид курсора изменится со стрелки на
лапку. Это означает, что элемент попал в фокус курсора и он способен реагировать
на клик.
В объекте div, описывающем обработчик и сфокусированный элемент, надо также
указать его имя с помощью идентификатора. Код самого обработчика можно указать как
в объекте div (onfocus="Foc5()"где Foc5() - выполняемая по коду функция), так и в
скрипте, написав имя идентификатора и через точку onfocus=Foc5 (без круглых скобок).
Сама функция Foc5() {.....} будет написана после этого.
Ниже приводится скрипт с обработчиком onfocus.
</head>
<style>
:focus{outline:none} /*убирает рамку при клике*/
</style>
<body>
<div id='zmz' tabindex="1"
style="cursor:pointer;font-size:28;color:red;font-weight:bold; border-color:cyan; border-style: solid;
border-width: 6px; width: 200px; border-radius: 12px; text-align:center;" >посмотреть
</div>
<script>
zmz.onfocus=Foc5
function Foc5() {
myWin=window.open("","","width=580,height=550,left=320, top=150"); // open - метод создания и открытия нового окна
sr="<p align=center><span style='font-size:33;color:red;'>Вы запустили скрипт открытия нового<BR> окна с помощью
события focus</span></p><BR>"
myWin.document.write(sr)
sr1="<p align=center><span style='font-size:33;color:blue'>Выведем рисунок</span><BR>"
myWin.document.write(sr1)
myWin.setTimeout('document.write("<BODY BGCOLOR=cyan>")',1000)
i4="<p align=center><img src='3.jpg' width=205px><BR>"
setTimeout("myWin.document.write(i4)",1500)
f="<p align=center><span style='font-size:30;color:f00'>закрыть окно, кликнув вне его или по кнопке закрытия нового окна
(крестик в верхнем правом углу)</span></p><BR>"
setTimeout("myWin.document.write(f)",2500)
zmz.style.display='none'
zmz.onfocus = "myWin.document.close()"
}
</script>
В диве элемент с id='zmz' делаем фокусируемым с помощью tabindex="1". Кодом
zmz.onfocus=Foc5 после клика курсора на элементе с id='zmz' (псевдокнопка)
запускаем функцию. С помощью функции открываем новое окно и производим в нем
ряд изменений. Кодом zmz.onfocus = "myWin.window.close()" закрываем новое окно.
посмотреть
Гиперссылка
Еще один способ запуска скрипта - клик мыши по гиперссылке. Ниже представлен скрипт
с кодом гиперссылки
<a href="javascript: FFF()"></a>
где FFF() - вызываемая функция. С помощью стиля гиперссылка оформлена как псевдокнопка.
<script>
function FFF(){
myWin=window.open("","","width=500,height=450,left=320, top=150")
sr="<span style='font-size:33;color:red'>Вы запустили скрипт<BR>с помощью гиперссылки</span><BR>"
myWin.document.write(sr)
myWin.document.write("<img src='3.jpg' width=300px><BR>")
myWin.document.close() // закрываем окно
}
</script>
<body>
<a href="javascript: FFF()" style='text-decoration: none;font-size:28;color:red;'>
<div style="cursor:pointer;font-size:28;color:red; border-color:cyan; border-style: solid; border-width: 6px;
width: 185px; border-radius: 12px; text-align:center;">гиперссылка</div>
</a>
Кликнуть по гиперссылке, оформленной как псевдокнопка.
Нажатие клавиши
При запуске скрипта пользователь может оказывать воздействие не только на
элемент окна браузера, но и на интерфейс компьютера, в частности, на клавиатуру.
Запустить скрипт можно нажатием клавиши. Каждая клавиша на клавиатуре имеет свой код.
Скрипт запускается функцией document.addEventListener("keydown", WWA), о которой речь
пойдет ниже.
Клавиша Escape
<script>
function WWA(a) {
a = event;
if (a.keyCode == 27)
{
var xow = window.open("","","width=500,height=500,left=320, top=150,");
s1="<span style='font-size:35;color:green'>Вы запустили КЛАВИШЕЙ Escape скрипт</span>"
xow.document.write(s1)
xow.setTimeout('document.write("<BODY BGCOLOR=cyan>")',1000)
/*другие коды*/
xow.setTimeout("window.close()",4000)
}
}
document.addEventListener("keydown", WWA);
</script>
Нажмите клавишу Escape (Если файл не запускается, кликните по экрану и
повторите попытку).
Клавиша Enter
При запуске скрипта клавишей Enter нужно учитывать одно обстоятельство. Клавиша Enter
способна запускать гиперссылку. Поэтому результатом нажатия на нее будет и запуск
требуемого скрипта, и срабатывание гиперссылки. Это проявляется, когда клавишу Enter
нажимают после клика по гиперссылке.
<script>
function WWB(a) {
a = event;
if (a.keyCode == 13)
{
var xow = window.open("","","width=500,height=500,left=320, top=150,");
s1="<span style='font-size:35;color:green'>Вы запустили КЛАВИШЕЙ Enter скрипт</span>"
xow.document.write(s1)
xow.setTimeout('document.write("<BODY BGCOLOR=cyan>")',1000)
/*другие коды*/
xow.setTimeout("window.close()",6900)
}
}
document.addEventListener("keydown", WWB);
</script>
Нажмите клавишу EnterЛюбая клавиша
Кодировка запуска скрипта любой клавишей - самая простая. Однако,
этот скрипт следует избегать, т.к. при случайном или намеренном
нажатии на любую клавишу, он будет срабатывать.
<script>
document.onkeydown=WWC
function WWC() {
var xow = window.open("","","width=500,height=500,left=320, top=150,");
s1="<span style='font-size:35;color:green'>Вы запустили КЛАВИШЕЙ Enter скрипт</span>"
xow.document.write(s1)
xow.setTimeout('document.write("<BODY BGCOLOR=cyan>")',1000)
/*другие коды*/
xow.setTimeout("window.close()",6900)
}
}
</script>
Наведение курсора - обработчик "onmouseover"Наведение на строку
Запустить скрипт можно наведением курсора, используя событие "mouseover" и
соответствующий обработчик "onmouseover". При этом элемент, на который наводится курсор,
может быть различным. В качестве примера приводится скрипт, использующий наведение на
строку. Элемент (строка), реагирующая на курсор, привязывается к обработчику с помощью
блока <div>, имеющем идентификатор "#mydiv". Код самого обработчика задается в
скрипте:
document.getElementById("mydiv").onmouseover = function(){
<body>
<style>
#mydiv
{position: absolute;margin-top:-10px;margin-left:16px;
font-size:30px; color:red;}
</style>
<div id="mydiv" style="cursor:pointer;font-size:28;color:red;font-weight:bold; border-color:cyan;
border-style: solid; border-width: 6px; width: 240px; border-radius: 12px; text-align:center;"
<style>наведи курсор</div>
<script>
document.getElementById("mydiv").onmouseover = function()
{
var xow = window.open("","","width=680,height=500,left=320, top=150,");
s1="<span style='font-size:35;color:green'>Вы запустили скрипт с помощью обработчика onmouseover</span>"
xow.document.write(s1)
/*другие коды*/
xow.setTimeout("window.close()",3500)
}
</script>
наведи курсор
Наведение на картинку
Элементом, реагирующим на курсор, может быть картинка. Ниже представлен
соответствующий скрипт. Код обработчика "onmouseover" записывается вне скрипта
(в body).
<p id="merk" style='font-size:30;color:f0f;font-weight:bold;position:absolute;margin-top:125px;
margin-left:70px;z-index:100'<>/p>
<script>
f1=" наведи курсор"
merk.innerHTML=f1
function WW()
{
var xow = window.open("","","width=550,height=500,left=320, top=150,");
s1="<span style='font-size:35;color:green'>Вы запустили скрипт наведением по рисунку с помощью onmouseover (код в body)"
xow.document.write(s1)
.................
коды вывода в новое окно
......................
xow.setTimeout("window.close()",9500)
}
</script>
<body>
<img src="3.jpg" style='width:150; height:100; position:absolute; margin-top:-150px;margin-left:50px'
onmouseover="WW()">
Запуск функцией addEventListener
Основная проблема вышеописанных обработчиков состоит в том, что одному
событию нельзя назначить несколько обработчиков (вызываемых в скрипте функций).
Проблема решается с помощью метода addEventListener(). Этот метод регистрирует
обработчик события для целевого объекта (eventTarget), для которого он будет
вызываться при возникновении события. Целевым объектом может быть объект Window,
Document, Element (любой элемент окна).
Синтаксис
eventTarget.addEventListener(тип события, обработчик события);
Аргументы
Первый параметр – тип события, на который должен среагировать обработчик.
Поскольку событий может быть несколько (click, focus, mouseover и др.) , то функция
addEventListener, во-первых, добавляет новый обработчик (не переписывая уже
существующие)-отсюда add-добавить, во-вторых она должна как бы откликнуться на
определенное событие (отсюда Event-событие). Чтобы откликнуться, надо прислушываться-
отсюда Listener - слушатель. При записи кода функции addEventListener тип события
указывается без приставки (префикса) "on".
Второй параметр обрабатывает событие, т.е. является собственно обработчиком
события. Это, как правило, имя функции, которая должна вызываться при возникновении
события, указанного типа. Причем имя функции записывается без круглых скобок. Метод
addEventListener() можно вызвать более одного раза и зарегистрировать с его помощью
несколько разных обработчиков событий (вызываемых функций) для одного и того же типа
события.
Рассмотрим вышесказанное на конкретном примере. Пусть имеется скрипт с 4-мя
функциями. Каждая из них открывает новое окно и выводит в него определенную
информацию. Задача: каждую функцию запускать нажатием отдельной клавиши
(событие - keydown, обработчик - onkeydown). Код обработчика:
document.onkeydown= FuncN [Здесь N=1, 2, 3, 4]
<script>
function FuncN(b) {
b = event;
if (b.keyCode == 20)
{коды функции}}
</script>
<body>
document.onkeydown= FuncN [Здесь N=1, 2, 3, 4]
Таким образом, для одного и того же типа события (keydown) нужно создать 4-е
обработчика для вызова функций Func1, Func2, Func3, Func4. Если в скрипте
записать 4-e кода типа document.onkeydown= FuncN (в каждом коде свое имя функции), то
сработает только последний код. Ибо, как говорят, каждый последующий код переписывает
предыдущий. Если же вместо document.onkeydown= записать 4-е кода
document.addEventListener("keydown",FuncN) , все работает как надо. В этом
можно удостовериться, нажав клавиши:
Caps lock; f1; 5; Insert (открываемые новые окна закрываются автоматически)
</head>
<script>
function Func1(b) {
b = event;
if (b.keyCode == 20) //код клавиши Caps lock//
{
var xow = window.open("","","width=500,height=300,left=320, top=150,");
s1="<p align=center><span style='font-size:37;color:green'>Вы запустили скрипт клавишей <BR>Caps lock<BR></p><BR<BR>"
xow.document.write(s1)
xow.im24="<p align=center><img SRC='73.jpg' style='width:300; height:200'>"
xow.setTimeout('document.write(im24)',1000)
xow.setTimeout("window.close()",4000)
}
}
function Func2(c) {
c = event;
if (c.keyCode == 112) //код клавиши f1//
{var xow = window.open("","","width=500,height=300,left=320, top=150,");
другие коды функции Func2 }}
function Func3(a) {
a = event;
if (a.keyCode == 53) //код клавиши 5//
{ var xow = window.open("","","width=500,height=300,left=320, top=150,");
другие коды функции Func3 }}
function Func4(d) {
d = event;
if (d.keyCode == 45) //код клавиши Insert//
{
var xow = window.open("","","width=500,height=300,left=320, top=150,");
другие коды функции Func2 }}
document.addEventListener("keydown", Func1)
document.addEventListener("keydown", Func2)
document.addEventListener("keydown", Func3)
document.addEventListener("keydown", Func4)
</script>
<body>
Вывод информации в форме подсказки
Добавочную информацию можно вывести в виде подсказки при на ведении курсора на выделенное
цветом слово. Щелчок по картинке позволяет увеличить ее размер до желаемого.
<style>
h3{text-align: center; font-size:18px; color:blue;
border-color:red ; border-style: solid; border-width: 6px;
background: #cfc; line-height: 30px; height: 100px; width: 200px;
}
img {width: 200px; cursor:pointer;}
img:focus {width: 400;}
img:focus { outline: none; }
#bod{font-size:25px; color:grey}
.slovo {font-size:25px; color:red;
position: relative;
display: inline-block;
}
.slovo .podskazka {
display: none;
position: absolute;
z-index: 1;
}
.slovo:hover .podskazka {
display: inline;
}
</style>
</head>
<body>
<a id='bod'>Последниe
<a class="slovo"> паровозы <div class="podskazka"
style='margin-top:-40px'><BR><h3>Паровозы ушли с железной <BR>дороги в 1962 году</h3></div><a id='bod'>
в СССР были построены в 1956 году: пассажирский <a class="slovo"> паровоз <div class="podskazka"><img src="97.jpg"
style='margin-top:3px; margin-left:-120px;' tabindex="1"></div><a id='bod'>Коломенского завода серии 'П' и грузовой
паровоз Луганского завода<a class="slovo"> паровоз <div class="podskazka"><img src="98.jpg"
style='margin-top:-10px ; margin-left:-17px;' tabindex="1"></div><a id='bod'
>серии 'ЛВ' . Несколько паровозов П36 стали экспонатами железнодорожных музеев,
некоторые из них находятся в исправном состоянии. Сохранившиеся паровозы серии 'ЛВ' до настоящего времени
возят <a class="slovo"> ретропоезда <div
class="podskazka"><img src="99.jpg" style='margin-top:-50px ;margin-left:-150px;' tabindex="1"></div></a></a></a></a>
Краткое пояснение
Подсказка создается двумя классами. Между <style> и </style> задаются: класс "slovo", который выделяет слово, наведение по которому курсора вызывает подсказку, и класс "podskazka", который задает содержание подсказки. В случае подсказки текстом используется код (стиль опущен):
Основной текст <a class="slovo">паровозы<div class="podskazka"
style='margin-top:-40px'<h3>Текст подсказки</h3>>продолжение основного текста В случае подсказки картинкой используется код (стиль опущен):
Основной текст <a class="slovo">паровоз<div class="podskazka"><img src="97.jpg">
</div>продолжение основного текста. Увеличение появляющейся картинки кликом достигается за счет кодов в стиле:
img {width: 200px; cursor:pointer;}
img:focus {width: 400;}
img:focus { outline: none; } Последний код предотвращает появление контура при клике в некоторых браузерах.
Чтобы срабатывало увеличение картинки при щелчке она должна вплотную
примыкать к выделенному слову (с любой стороны). Помнить, что при использовании свойства
focus, в код картинки надо добавлять tabindex="1".
Наведи курсор на выделенные слова. Для увеличения фото кликни по фото.
Если текст надписи большой
Предыдущий скрипт неудобен для большого текста, т.к. нужно делать перенос строки,
используя специальный код. Чтобы не заморачиваться с переносом строки, можно
предложить такой скрипт.
<style>
.cont {position: relative;}
.cont img {
position: absolute; margin-top:32px;
margin-left:490px; width:700px;
}
.cont p{
position: absolute; color: cyan;
font-size: 25px; margin-top:378px;
margin-left:530px;
}
</style>
<body>
<div class="cont">
<img class="img" src="18.jpg">
<p Паровозы ушли с железной дороги в 1962 году.<BR>Последний паровоз в СССР
был построен в 1956 году - <BR> это был товарный паровоз Луганского завода серии
'ЛВ'.<BR> Сохранившиеся паровозы серии 'ЛВ' до настоящего <BR> времени возят ретропоезда. </p>
</div>
