jav-kursor: изменить объект щелчком или наведением курсора



★ Изменить цвет строки курсором.
★  Увеличить изображение курсором.
★ Изменить фон документа курсором.
★  Изменить размер шрифта курсором.
★ Сменить изображение курсором.
★ Изменить сразу несколько свойств объекта курсором.
★ Переместить  изображение курсором.
★ Вызов подсказки курсором.
★ Открыть новое окно курсором.


Изменить цвет строки 
Код HTML
<body>
<a onmouseover="this.style.color='red'"
 onmouseout="this.style.color='cyan'"><span style='font-size:50'>Наведи курсор</span></a>

Наведи курсор

Код CSS
<body>
<style> 
#r {
color:red; font-size:60px;
}
#r:hover{color:blue;}
</style>
<body>
<a id="r"><Наведи курсор/a>


Наведи курсор


Увеличить изображение 
Наведите курсор на картинку, затем отведите его.

Код HTML
<body>
<img  src="18jpg" width=100px onmouseover="this.style.width=600px"
 onmouseout="this.style.width=100">

Код CSS
Наведение курсора


<body>
<style> 
#big { width: 100px;} 
  #big:hover {width: 400px}
</style>
<img id="big" src="531.jpg">


    

Щелчок курсора
Возврат к исходному размеру - щелчок вне поля изображения.

      </head>
      <style>
      #img {width: 100px; cursor:pointer;}
      #img:focus {width: 800;}
      </style>
      <body>
               <img src="37.jpg" id="img" tabindex="1">


Изменить фон
Код HTML
<body>
<table  width=150; height=100; BORDER=5;  borderColor=00ff00 bgColor=9fffff style='margin-left:20' 
onmouseover='this.style.backgroundColor="6445f0"' onMouseout='this.style.backgroundColor="9fffff "'>
<td></td></table>



Код CSS
<style>
.par{
border-color:green ; 
border-style: solid;  
border-width: 6px;
width:150px;
height: 150px; 
margin-left:20;
background-color: #0000ff;}
.par:hover { background-color: red }
</style>
<body>
<div class="par"></div>




Изменить размер шрифта 
Код HTML
<body>
<span  style='color:blue; font-size:45px;' onMouseOver="this.style.fontSize='95px'" 
onMouseOut="this.style.fontSize='55px'">Наведи курсор и измени размер шрифта</span>

Наведи курсор и измени размер шрифта

Код CSS
</head>  
<style>
#pr{font-family: Arial; font-size:50px; color:red;cursor:pointer;}
#pr:focus {font-size:100px;outline: none}
</style>
<body>
<a id="pr" tabindex="10">Измени размер шрифта щелчком</a>
</body>


Измени размер шрифта щелчком 
 
При повторном щелчке (вне поля надписи) размер возвращается.

Сменить изображение

Код HTML
<body>
<img  src="12.jpg"style='width:200px' onmouseover="src='159.jpg'"
 onmouseout="src='12.jpg'">
</body>

Наведите курсор на картинку, затем отведите его.
Код CSS
Наведение курсора
<style> 
#izo{ position:absolute; width: 450px; height:270px; border-color:red ;
border-style: solid; border-width: 3px; }
.verh{ margin-top: 21px; }
.niz {  margin-top: 19px;} 
 .verh:hover{opacity:0}
</style> 
<body>
<img class='niz' id="izo" src="531.jpg">
<img class='verh' id="izo" src="18.jpg"> 
















Щелчок курсора
<style>
.ab {position: absolute;
	width:450px;
height:300px
}
.bb {opacity:0;position: absolute; 
}
</style>
<body>
<a class="ab" onclick="this.className = (this.className == 'ab' ? 'bb' : 'ab' )">
<img   src='14.jpg'></a><img src='150.jpg' style='width:450px; height:300px'>



Первый щелчок меняет картинку, второй щелчок возвращает первую картинку.


Изменить несколько свойств объекта


Первый способ
Код HTML

Наведение курсора
<body>
<table  BORDER=5px;  bgColor=#ccffcc ;  
height = "130px"; width = "200px";  onmouseover = "change(this)" 
onmouseout = "back(this)" ><td><p align=center 
style=' border:  6px solid cyan';>Наведи курсор на рисунок
<table   height = "100px"; width = "150px";  cellpadding="20"
><td><p align=center><img  src='18.jpg' width=130 height = "80px"; 
style=' border:  10px solid f0f; background:98fb98; padding:50px'
onmouseover = "change1(this)"onmouseout = "back1(this)"></td></table></table>
<script>
function change(x) {/* задаём функцию, которая изменяет свойства объекта: рамка с текстом */
x.style.height = "400px";     /* задаём  высоту рамки с текстом */
x.style.width = "600px";      /* задаём  ширину рамки с текстом */
x.style.borderWidth='16px';   /* задаём ширину контура рамки с текстом */
x.style.borderColor='green';  /* задаём цвет контура рамки с текстом */
x.style.background='cyan'     /* задаём фон рамки с текстом */
x.style.color='red';          /* задаём цвет шрифта */
x.style.fontSize='90px';      /* задаём размер шрифта */
x.style.fontFamily='Monotype Corsiva'; /* задаём тип шрифта */
}
function back(x) {/* функция, которая задает свойства объектов после ухода курсора с изображения*/
x.style.height = "130px";
x.style.width = "200px";  
x.style.borderWidth='5px';  
x.style.borderColor='#808080';
x.style.background='#cfc';
x.style.color='red';
x.style.fontSize='14px';
x.style.fontFamily='Arial';
}

function change1(x) {/* задаём функцию, которая изменяет 
свойства объекта: рамка с фото */

x.style.height = "400px";            /* задаём высоту рамки с фото */
x.style.width = "600px";             /* задаём ширину рамки с фото */
x.style.borderWidth='12px';          /* задаём ширину контура рамки с фото */
x.style.borderColor='#9508FF';       /* задаём цвет контура рамки с фото */
x.style.background='#adff2f'         /* задаём фон рамки с фото */
x.style.color='red';                 /* задаём цвет шрифта */
x.style.fontSize='50px';             /* задаём размер шрифта */
x.style.fontFamily='Monotype Corsiva'; /* задаём тип шрифта */
}
function back1(x) {/* функция, которая 
задает свойства объектa после ухода 
курсора с изображения*/
x.style.height = "80px";
x.style.width = "130px";  
x.style.borderWidth='10px';
x.style.borderColor='#f0f';
x.style.background='#98fb98';
x.style.color='red';
x.style.fontSize='14px';
x.style.fontFamily='Arial';
}
</script>



Наведи курсор на рисунок
























Второй способ
Код CSS
Наведение курсора
</head>
<style>

/* задаём стиль внешней рамки*/
.container
{top:350px;
left:600px;
background:cfc;
position: absolute;
border: 5px solid black; 
height: 250px; 
width: 300px; 
}

/* задаём стиль внутренней рамки и изображения*/
.container .izo  
{position: relative;
margin-top:40px;
border: 10px solid f0f; 
padding:50px;
background:98fb98;
height : 70px;
width : 130px; 
}

/* задаём стиль текста: "наведи курсор" */
.container .tex
{
border: 5px solid cyan; 
height: 240px; 
width: 290px; 
text-align: center;
margin-top:-15px;
line-height: 20px;
 font-size:20px;
color:red;
}

/* задаём стиль текста: "стиль CSS" */
.container .tex1
{position: absolute;
margin-top:-55px;
height: 240px; 
width: 290px; 
text-align: center;
line-height: 20px;
 font-size:0px;
color:red;
}

/* меняем свойства объектов после наведения курсора*/
.container:hover {width:700px; height:650px;background:cyan;border: 16px solid green; }

.container:hover .tex{font-size:0px;line-height: 70px; background:cyan; color:red;
height: 340px; width: 590px;}

.container:hover .izo{margin-top:85px;margin-left:35px; width:500px; height: 350px; border: 10px solid 9508FF;
background:adff2f;}

.container:hover .tex1:hover{font-size:70px;font-family:'Monotype Corsiva';}
   </style>
<body>
<div class="container">
    <p align=center><div class="tex">наведи курсор<div class="tex1">стиль CSS<BR><img src="18.jpg" class="izo">
</div></div></div>
Краткое пояснение к CSS
Между тегами <style> и </style> задаются четыре блока (класса): container, izo, tex и tex1 
(о классах и стилях смотри   здесь).При наведении курсора меняются все элементы. 


Краткое пояснение к HTML
С помощью тега <table> задаются два объекта: рамка с текстом и рамка с изображением. При касании курсора 
внешней рамки меняюьтся свойства: ширина, высота, ширина контура рамки, 
цвет рамки, цвет фона, тип, цвет и размер шрифта. При касании курсора 
внутренней рамки в добавок к перечисленным свойствам меняется размер изображения.




    
наведи курсорстиль CSS



Переместить  изображение курсором
Если объект (например, карта) выходит за пределы окна браузера,
возникает необходимость в его перетаскивании по экрану монитора. 
Приведем самый простой скрипт для решения такой задачи. Для 
начала наведите курсор на карту - ее размер увеличится. Если 
предположим, что размер нас не устраивает - кликните по карте - 
она приобретет еще больший размер. Убедитесь, что ее можно 
перемещать (на это указывает изменение вида курсора).
Для возврата к исходному размеру сделайте ДВОЙНОЙ клик по карте.

	
	
	



скрипт 
 
<html>
<head>
<style>
#tab{
margin-top:20px
}
</style>
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script>
$( function() {
$( "#draggable" ).draggable();} );
	</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p align=center><TABLE id='tab' BORDER=5;  borderColor=ff0000><TD><img  src='Karta-5.jpg' width=130 ' 
onmouseover='this.style.width=300; '  
onclick='this.style.width=1600; this.style.cursor="move"' ondblclick='this.style.width=130'></TD></TABLE>
</p></div>
<script>
function WI() {
document.location.reload(true)
}
document.addEventListener("dblclick", WI);
</script>
</body>
</html>

Вызвать подсказку курсором

Добавочная информация появляется в виде подсказки при на ведении курсора на выделенное цветом слово. Щелчок 

по картинке позволяет  увеличить ее размер до требуемого.


Последниe паровозы 
Паровозы ушли 
с железной 
дороги в 1962 годув СССР были построены в 1956 году: пассажирский   паровоз Коломенского  
завода серии 'П' и грузовой паровоз Луганского завода
 паровоз серии 'ЛВ'. Несколько паровозов
П36 стали экспонатами железнодорожных музеев, некоторые из них находятся в исправном состоянии. 
Сохранившиеся паровозы  серии 'ЛВ'  до настоящего времени возят  
 ретропоезда 

Код HTML+CSS
Наведение курсора
<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;
}
#bod{font-size:20px; color:grey}
#imga {width: 200px; cursor:pointer;}
#imga:focus {width: 400;}
#imga:focus { outline: none; }
#bod{ font-size:20px; color:grey }
.slovo {
            position: relative;
            display: inline-block;
           }
        .slovo .podskazka {
            display: none;
            position: absolute;
          left:0; 
            z-index: 1;
        }
 
        .slovo:hover .podskazka {
            display: inline;
        }

</style>
</head>
<body>
<a id='bod'>Последниe
<a class="slovo"><span style='font-size:20px; color:red;'> паровозы </span><div class="podskazka" 
style='margin-top:-40px'><BR><h3>Паровозы ушли с железной <BR>дороги в 1962 году</h3></div><a id='bod'>
в СССР были построены в 1956 году: пассажирский  <a class="slovo"><span style='font-size:20px;
color:red; margin-top:0px'> паровоз </span><div class="podskazka"><img id='imga' src="333.jpg"
 style='margin-top:3px; margin-left:-120px;' tabindex="1"></div><a id='bod'>Коломенского завода 
серии 'П' и грузовой паровоз Луганского завода<a class="slovo"><span style='font-size:20px; 
color:red; line-height:0px'> паровоз </span><div class="podskazka"><img id='imga' src="334.jpg" 
style='margin-top:-10px ; margin-left:-17px;' tabindex="1"></div><a id='bod' 
style='line-height: 35px;'>серии 'ЛВ' . Несколько паровозов П36 стали экспонатами железнодорожных музеев, 
некоторые из них находятся в исправном состоянии. Сохранившиеся паровозы  серии 'ЛВ'  до настоящего времени 
возят  <a class="slovo"><span style='font-size:20px; color:red;line-height:0px'> ретропоезда </span><div 
class="podskazka"><img id='imga' src="335.jpg" style='margin-top:-50px ;margin-left:-150px;' tabindex="1">
</div></a></a></a></a></a></a>

Краткое пояснение
Подсказка создается двумя классами. Между <style> и </style> задаются: класс "slovo", который выделяет слово, 
наведение по которому курсора вызывает подсказку,  и класс "podskazka", который задает содержание подсказки.
 
В случае текстовой подсказки используется код (стиль опущен):
Основной текст <a class="slovo"><div class="podskazka"><h3> текст подсказки </h3></div> продолжение 
основного текста.

В случае подсказки картинкой используется код (стиль опущен):
Основной текст <a class="slovo"><div class="podskazka"><img id='imga' src="97.jpg" tabindex="1"></div>
продолжение основного текста.

Открыть новое окно курсором

Код HTML
Наведение курсора

<head>
<body>
<BR><a id="dem"  onmouseover="On(this)"><font size=6 color=red> наведи курсор, чтобы открыть новое окно</a>
<script>                
function On(a) {      
document.getElementById("dem")                   
   var nw = window.open("","","width=500,height=600,left=300, top=150");
  var w1 = "<p align = left> Новое окно с передачей текста, изображения </p>";
nw.document.write(w1.fontsize (5).fontcolor("red"))
nw.document.write("<p align=center><img id='tam' SRC='12.jpg' width=300 height=200>")
nw.document.write("<p align=center><img id='tim' style='display:none' SRC='https://i.gifer.com/fxVw.gif' 

width=300 height=400>")
nw.document.write("<p align=center><img id='tuta' style='display:none; -webkit-transition:5s' 

SRC='https://i.gifer.com/74US.gif' width=300 height=400>")
nw.setTimeout('document.getElementById("tam").style.display="none"',3000)
nw.setTimeout('document.getElementById("tim").style.display="block"',3200)
nw.setTimeout('document.getElementById("tim").style.display="none"',10000)
nw.setTimeout('document.getElementById("tuta").style.display="block"',10100)
nw.setTimeout('document.getElementById("tuta").style.opacity="0"',11600)
var w = "<p align = center>переданные в новое окно текст и изображение </p>";
nw.document.write(w.fontsize (7).fontcolor('blue'))
    }
</script>

 щелкни по фону и наведи курсор, чтобы открыть новое окно





Home (оглавление)


o
Паровозы ушли с железной дороги в 1962 году

Паровозы ушли
с железной
дороги в 1962 году
