Tuesday 31 October 2017

MOUSE OVER MOUSE OUT IN JAVA SCRIPT

MouseOverMouseOutFunctionInJavaScript

--------------------------------------------------------------------------------------------------------------
MOUSE OVER MOUSE OUT IN JAVA SCRIPT WITH
BUTTON AND DIV IDS
Read More:
https://www.javascripttutorial.net/javascript-if-else-if/
---------------------------------------------------------------------------------------------------------------
<html>
<body>
<button id="ButtonId">BUTTON</button>
<div id="DivId">ARE U READY?</div>
<script>
ButtonId.onmouseover = function(){
DivId.innerHTML = "MOUSE OVER ON BUTTON";
};
ButtonId.onmouseout = function(){
DivId.innerHTML = "MOUSE OUT ON BUTTON";
};
</script>
</body>
</html>
===============================================================
ON DIV MOUSE OVER AND OUT
===============================================================
<html>
<style type='text/css'>
#DivId{
border: 6px double;
border-color:Red;
}
</style>
<body>
<div id="DivId">ARE U READY?</div>
<script>
DivId.onmouseover = function(){
DivId.innerHTML = "MOUSE OVER";
};
DivId.onmouseout = function(){
DivId.innerHTML = "MOUSE OUT";
};
</script>
</body>
</html>
 =============================================================
<body>
<style type='text/css'>
#Same1{
border: 6px double;
border-color:Red;
}
</style>
<Same2 id="Same1"></Same2>
<script>
Same1.onclick = function(){
Same1.innerHTML = "SAY HELLO";
};
</script>
</body>
  ============================================================
IMAGE CHANGE INTO TEXT
  ============================================================
<img onmouseover="toText(this)" onmouseout="toImage(this)" src="smiley.gif" alt="Smiley" /><span style="visibility: hidden; margin-left: -30px;">Show Text</span>
<script>
function toText(img) {
img.style.visibility = 'hidden';
img.nextSibling.style.visibility = 'visible';
}
function toImage(img) {
img.style.visibility = 'visible';
img.nextSibling.style.visibility = 'hidden';
}
</script>
--------------------------------------------------------------------------------------------------------
IMAGE DELETE BY BUTTON
ImageId.style.visibility='hidden';
ImageId.style.opacity="0"; or ImageId.style.opacity='0';
ImageId.style.display="none";
--------------------------------------------------------------------------------------------------------
<img src="smiley.gif" id="ImageId">
<button id="ButtonId">DELETE</button>
<script>
ButtonId.onclick=function(){
ImageId.src="";
};
</script>
  ============================================================
IMAGE MOUSE OVER MOUSE OUT IN HTML
  ============================================================
<img src='https://1.bp.blogspot.com/-yfbgGmpIbQk/WVI_G2VO6hI/AAAAAAABc5I/xl5QOL5ucts_P3nDcQDvmt4OeUlVMXKyACLcBGAs/s1600/image1.gif' width='120' height='70'
onmouseover="this.src='https://4.bp.blogspot.com/-rpobIsOydoo/WVI_G8Bs4fI/AAAAAAABc5Q/AQU0A3HZhFEPkTcw50KT3JstbnyGIkSTwCLcBGAs/s1600/image2.gif';"
onmouseout="this.src='https://1.bp.blogspot.com/-IN2i__8YujY/WVI_ILWbKNI/AAAAAAABc5Y/O-dQwgTii0kvy7Fat_pmpRUy5ZlL7RlJwCLcBGAs/s1600/image5.gif';" />
 ============================================================
IMAGE MOUSE OVER OUT IN JAVA SCRIPT
 ============================================================
<img id="SameWord1">
<script>
SameWord1.src="https://www.w3schools.com/tags/smiley.gif";
SameWord1.onmouseover = function(){
alert("HI");
};
SameWord1.onmouseout = function(){
alert("BY");
};
SameWord1.onclick = function(){
alert("MouseClick");
};
</script>
=====================================================================
IMAGE MOUSE OVER AND MOUSE OUT WITH APPEND CHILD
=====================================================================
<body>
<img id ="AS2" src="smiley.gif"/>
<script>
AS2.onmouseover=function(){
var x = document.createElement("img");
x.setAttribute("src","smiley.gif");
document.body.appendChild(x);
x.textContent = "HI";
x.style.color = "White";
x.style.width = "50px";
x.style.height = "50px";
};
AS2.onmouseout=function(){
var x = document.createElement("img");
x.setAttribute("src","https://www.w3schools.com/tags/logo_w3s.gif");
document.body.appendChild(x);
x.style.background = "Red";
x.style.width = "100px";
x.style.height = "100px";
};
</script>
  ============================================================
IMAGE MOUSE OVER MOUSE OUT IN JAVA SCRIPT
  ============================================================
<img id="SameWord1">
<script>
SameWord1.src="https://1.bp.blogspot.com/-yfbgGmpIbQk/WVI_G2VO6hI/AAAAAAABc5I/xl5QOL5ucts_P3nDcQDvmt4OeUlVMXKyACLcBGAs/s1600/image1.gif";
SameWord1.onmouseover = function(){
SameWord1.src="https://4.bp.blogspot.com/-rpobIsOydoo/WVI_G8Bs4fI/AAAAAAABc5Q/AQU0A3HZhFEPkTcw50KT3JstbnyGIkSTwCLcBGAs/s1600/image2.gif";
};
SameWord1.onmouseout = function(){
SameWord1.src="https://1.bp.blogspot.com/-IN2i__8YujY/WVI_ILWbKNI/AAAAAAABc5Y/O-dQwgTii0kvy7Fat_pmpRUy5ZlL7RlJwCLcBGAs/s1600/image5.gif";
};
SameWord1.onclick = function(){
SameWord1.src="https://1.bp.blogspot.com/-yfbgGmpIbQk/WVI_G2VO6hI/AAAAAAABc5I/xl5QOL5ucts_P3nDcQDvmt4OeUlVMXKyACLcBGAs/s1600/image1.gif";
};
</script>
  ============================================================
IMAGE WIDTH HEIGHT IN JAVA SCRIPT
=============================================================
<img id="SameWord1">
<script>
SameWord1.src="https://1.bp.blogspot.com/-yfbgGmpIbQk/WVI_G2VO6hI/AAAAAAABc5I/xl5QOL5ucts_P3nDcQDvmt4OeUlVMXKyACLcBGAs/s1600/image1.gif";
//HERE ACTUAL IMAGE WIDTH & HEIGHT 70px
//WE CHANGE IMAGE WIDTH & HEIGHT 50px
SameWord1.width = "50";
SameWord1.height = "50";
</script>
=============================================================
JAVA SCRIPT ID WITH SPACE OR DASH
ADD Document.GetElementById  BELOW GREEN CODE
document.getElementById
=============================================================
<img id="SameWord1 SameWord1">
<script>
document.getElementById("SameWord1 SameWord1").src = "https://1.bp.blogspot.com/-yfbgGmpIbQk/WVI_G2VO6hI/AAAAAAABc5I/xl5QOL5ucts_P3nDcQDvmt4OeUlVMXKyACLcBGAs/s1600/image1.gif";

</script>
<------------------------------------>
<img id="SameWord1-SameWord1">
<script>
document.getElementById("SameWord1-SameWord1").src = "https://1.bp.blogspot.com/-yfbgGmpIbQk/WVI_G2VO6hI/AAAAAAABc5I/xl5QOL5ucts_P3nDcQDvmt4OeUlVMXKyACLcBGAs/s1600/image1.gif";
</script>
=============================================================
<html>
<head>
<script>
function myFunction(){
var x = document.getElementById("demo");
x.style.fontSize = "25px";
x.style.color = "red";
}
myFunction();
</script>
</head>
<body>
<p id="demo">Click the button to change the layout of this paragraph</p>
<button onclick="myFunction()">Click Me!</button>
</body>
</html>
=============================================================
INPUT BOX LISTENER
=============================================================

=============================================================
<html>
<head>
<title>HTMLElement: input event - Examples - code sample</title>
<style>
input{
border:5px solid Red;
}
#values{
border:5px solid Green;
height:18px;
width:172px;
}
</style>
</head>
<body>
<input placeholder="Enter some text" name="name"/>
<p id="values"></p>
<script>
var input = document.querySelector('input');
var log = document.getElementById('values');
input.addEventListener('input', updateValue);
function updateValue(e) {
log.textContent = e.target.value;
}
</script>
</body>
</html>
=============================================================
<html>
<head>
<title>HTMLElement: input event - Examples - code sample</title>
<style>
input{
border:5px solid Red;
}
#values{
border:5px solid Green;
height:18px;
width:172px;
}
</style>
</head>
<body>
<input id="input" height="15px" width="150px"/>
<p id="values" height="15px" width="150px"></p>
<script>
input.addEventListener('input',Fn1);
function Fn1(event) {
values.innerHTML = event.target.value;
}
</script>
</body>
</html>
============================================================
<body>
<!-- https://stackoverflow.com/questions/14544104/checkbox-check-event-listener -->
<style>
Button {
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
</style>
<input id="Input1"  type="input" value="0" />
<label>the box below is red when checked, and blue when unchecked</label>
<br />
<button id="Btn1">Default Button</button>
<script>
Btn1.style.backgroundColor="#44c767";
Input1.addEventListener('input',Fn1);
function Fn1(event) {
if(Input1.value==1){
Btn1.style.backgroundColor="Red";
} 
if(Input1.value==2){
Btn1.style.backgroundColor = "Blue";
}
}
</script>
</body>
=============================================================
INPUT BOX WITH CHANGE LISTENER
Input1.onclick=('change',Fn1);
function Fn1(event){
} 
=============================================================
<body>
<!-- https://stackoverflow.com/questions/14544104/checkbox-check-event-listener -->
<style>
Button {
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
</style>
<input id="Input1"  type="checkbox" name="myCheckbox" />
<label>the box below is red when checked, and blue when unchecked</label>
<br />
<button id="Btn1">Default Button</button>
<script>
Btn1.style.backgroundColor = "#44c767";
Input1.addEventListener('change',Fn1);
function Fn1(event) {
if(Input1.checked==true){
Btn1.style.backgroundColor="Red";
} 
if(Input1.checked==false){
Btn1.style.backgroundColor = "Blue";
}
}
</script>
</body>
==============================================================

How to jump to top of browser page

https://stackoverflow.com/questions/4147112/how-to-jump-to-top-of-browser-page
==============================================================
<!-- https://stackoverflow.com/questions/4147112/how-to-jump-to-top-of-browser-page -->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #555;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>
<script type="text/javascript">
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
function topFunction() {
$('html, body').animate({scrollTop:0}, 'slow');
}
</script>
==============================================================

Posted by on Tuesday 31 October 2017 at 05:18
Labels: , ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets