DIR : /home/kozerus/public_html/mousepos2.html
/home/kozerus/public_html
<html>
<title>mousepos2.html 20191028_2100</title>
<script id="script_startup">
function startup() { alert( "BUGS_startup" ); }
</script>
<script id="script_scroll">
function f() {
t1.src = "https://igu3ss.files.wordpress.com/2012/09/chess_king_4.jpg"
t1.height = "319"
t1.width = "330"
}
function f2() {
t1.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Chess_piece_-_Black_queen.JPG/130px-Chess_piece_-_Black_queen.JPG"
t1.height = "319"
t1.width = "330"
}
function f3() {
t1.src = "https://asmoodle.asmadrid.org/blog/s16240/wp-content/uploads/sites/56/2014/12/protourney_knight_black_400.jpg"
t1.height = "244"
t1.width = "330"
}
function f4() {
t1.src = "https://thumbs.dreamstime.com/x/chess-knight-white-background-29811348.jpg"
t1.height = "244"
t1.width = "350"
}
function f5() {
t1.src = "http://cdn.craftsy.com/upload/3703789/pattern/115774/full_7439_115774_ChessKnightMachineEmbroideryDesign_1.jpg"
t1.height = "319"
t1.width = "350"
}
</script>
<!--
<script id="script_scroll_img">
var onScrollHandler = function() {
var newImageUrl = yourImageElement.src;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > 100) {
newImageUrl = "/imgs/btn/koeye.png"
}
if (scrollTop > 200) {
newImageUrl = "/imgs/btn/koeyeb.png"
}
if (scrollTop > 300) {
newImageUrl = "/imgs/btn/koeyew.png"
}
yourImageElement.src = newImageUrl;
};
object.addEventListener ("scroll", onScrollHandler);
</script>
-->
</head>
<body bgcolor=linen onstart="startup();false" >
<h1>mousepos2</h1>
<div align="center" style="position: fixed; z-index: 20; left:38.5%; top:200">
<img src="no.png" height="319" width="330" name="t1">
</div>
</div>
<div class="container" onmouseover="f3()" style="padding:0; margin:0; width:100%;">
<img src="https://pixabay.com/static/uploads/photo/2016/01/11/22/05/background-1134468_960_720.jpg" width="100%">
</div>
<br>
<br>
<div class="container" onmouseover="f4()" style="padding:0; margin:0; width:100%;">
<img src="https://image.freepik.com/free-photo/lens-flare-abstract-backgound_21276999.jpg" width="100%">
</div>
<br>
<br>
<div class="container" onmouseover="f5()" style="padding:0; margin:0; width:100%;">
<img src="https://image.freepik.com/free-photo/lens-flare-abstract-backgound_21276999.jpg" width="100%">
</div>
<br>
<br>
<div class="container" onmouseover="f()" style="padding:0; margin:0; width:100%;"></div>
<marquee behavior="scroll" direction="right" scrollamount="10">
<img src="/imgs/gif/cute/bee.gif" width="72" height="79" alt="Flying Bee">
</marquee>
<marquee behavior="scroll" direction="left" scrollamount="1">
<img src="/imgs/gif/cute/fish.gif" width="94" height="88" alt="Fish swimming from right to left">
</marquee>
<marquee behavior="scroll" direction="left" scrollamount="30">
<img src="/imgs/gif/cute/bee.gif" width="125" height="82" alt="Bat flying really fast">
</marquee>
<style style="text/css">
.scroll-left {
height: 100px;
overflow: hidden;
position: relative;
}
.scroll-left .inner {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: scroll-left 15s linear infinite;
-webkit-animation: scroll-left 15s linear infinite;
animation: scroll-left 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
0% {
-moz-transform: translateX(100%); /* Browser bug fix */
-webkit-transform: translateX(100%); /* Browser bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Browser bug fix */
-webkit-transform: translateX(-100%); /* Browser bug fix */
transform: translateX(-100%);
}
}
</style>
<div class="scroll-left">
<div class="inner">
<img src="/imgs/gif/cute/fish-swimming.gif" alt="Swimming fish">
</div>
</div>
<style style="text/css">
.marquee {
height: 50px;
overflow: hidden;
position: relative;
background: yellow;
color: orange;
border: 1px solid orange;
}
.marquee p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: scroll-left 5s linear infinite;
-webkit-animation: scroll-left 5s linear infinite;
animation: scroll-left 5s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
0% {
-moz-transform: translateX(100%); /* Browser bug fix */
-webkit-transform: translateX(100%); /* Browser bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Browser bug fix */
-webkit-transform: translateX(-100%); /* Browser bug fix */
transform: translateX(-100%);
}
}
</style>
<div class="marquee">
<p>Scrolling text... </p>
</div>
<marquee behavior="slide" direction="right">
<img src="/imgs/btn/koeye_handhither.gif" width="50" height="38" alt="Spinning arrow" />
<img src="/imgs/gif/cute/spinning-arrow-right.gif" width="50" height="38" alt="Spinning arrow" />
<img src="/imgs/gif/cute/spinning-arrow-right.gif" width="50" height="38" alt="Spinning arrow" />
<img src="/imgs/gif/cute/spinning-arrow-right.gif" width="50" height="38" alt="Spinning arrow" />
<img src="/imgs/gif/cute/spinning-arrow-right.gif" width="50" height="38" alt="Spinning arrow" />
</marquee>
<style style="text/css">
div.slide-slow { width:100%; overflow:hidden; }
div.slide-slow div.inner { animation: slide-slow 30s; margin-top:0%; }
@keyframes slide-slow {
from { margin-left: 100%; }
to { margin-left: 0%; }
}
</style>
<div class="slide-slow">
<div class="inner">
<img src="/imgs/gif/cute/fish-swimming.gif" alt="Swimming fish">
</div>
</div>
<marquee behavior="scroll" direction="left">donutvanlaw jtfdc takings all took</marquee>
<marquee behavior="scroll" direction="down">timejak: jkwii</marquee>
</body>
</html>
<!--
wnscaleFactor= 0.80;
context.scale( downscaleFactor, downscaleFactor );
var el = document.querySelector('div');
// get scroll position in px
console.log(el.scrollLeft, el.scrollTop);
// set scroll position in px
el.scrollLeft = 500;
el.scrollTop = 1000;
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
document.documentElement.scrollTop = document.body.scrollTop = 1000;
document.documentElement.scrollLeft = document.body.scrollLeft = 500;
// horizontal scrolling amount
window.pageXOffset
// vertical scrolling amount
window.pageYOffset
localStorage.topper = document.body.scrollTop;
if(localStorage.topper > 0){
window.scrollTo(0,localStorage.topper);
}
-->
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer