DIR : /home/kozerus/public_html/mouse.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">
var giflist = `
/imgs/gif/spacers/tn/tn_giphy_spacer_02.gif
/imgs/gif/tn/tn_spacers/giphy_spacer_03.gif
/imgs/gif/us/tn/tn_giphy_books_shelf.gif
/imgs/gif/us/tn/tn_giphy_flipbook_glow.gif
/imgs/gif/tn/tn_spacers/giphy_spacer_05.gif
/imgs/tn/tn_giphy_spinner_sumi.gif
/imgs/tn/tn_giphy_head_thinker.gif
/imgs/gif/spacers/tn/tn_giphy_spacer_10.gif
/imgs/tn/tn_filmp.gif
/imgs/tn/tn_filmd.gif
/imgs/gif/time/tn/tn_giphy_time_1213.gif
/imgs/gif/time/tn/tn_giphy_time_clocks.gif
/imgs/gif/spacers/tn/tn_giphy_spacer_12.gif
/imgs/gif/us/tn/tn_giphy_us_walkers.gif
/imgs/gif/us/tn/tn_giphy_us_joggers.gif
/imgs/gif/spacers/tn/tn_giphy_spacer_13.gif
/fb/imgs/tn/tn_fb_gifs.png
/i/imgs/tn/tn_giphy_bugs_evil_castle.gif
/i/imgs/tn/tn_tesla.gif
/tl/imgs/tn/tn_construction_lights.gif
/tl/imgs/tn/tn_index_book-ein_hundes_leben.png
/i/imgs/tn/tn_giphy_spinner_disk.gif
/i/imgs/tn/tn_orb3.gif
`;
alert( "BUGS_35 giflist="+giflist );
var gifs = new Array();
var i = 0;
gifs = giflist.split("\n");
var gifs_len = gifs.length;
// alert( "BUGS_40 gifs_len="+gifs_len+" gifs="+gifs );
// alert( "BUGS_41 gifs1="+gifs[1] );
// alert( "BUGS_42 gifs2="+gifs[2] );
function f() {
// t1.src = "https://igu3ss.files.wordpress.com/2012/09/chess_king_4.jpg"
t1.src = gifs[1]
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.src = gifs[2]
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.src = gifs[3]
t1.height = "244"
t1.width = "330"
}
function f4() {
// t1.src = "https://thumbs.dreamstime.com/x/chess-knight-white-background-29811348.jpg"
t1.src = gifs[4]
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.src = gifs[5]
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>mouse</h1>
<h2>20191030_0505</h2>
<hr color=red>
<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%"> -->
<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="f()" style="padding:0; margin:0; width:100%;"></div>
<hr color=black>
<hr color=white>
<marquee behavior="scroll" direction="right" scrollamount="10">
<img src="/imgs/gif/cute/bee.gif" width="72" height="79" alt="Flying Bee">
<img src="/tl/imgs/tn/tn_construction_lights.gif" width="72" height="79" alt="Flying Bee">
<img src="/tl/imgs/tn/tn_index_book-ein_hundes_leben.png" width="72" height="100" alt="ein_hundes_leben">
</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">
<img src="/tl/imgs/tn/tn_construction_lights.gif" width="72" height="79" alt="Flying Bee">
<img src="/i/imgs/tn/tn_giphy_spinner_disk.gif" width="72" height="79" alt="giphy_spinner_disk">
</marquee>
<marquee behavior="scroll" direction="left" scrollamount="30">
<img src="/imgs/gif/cute/bee.gif" width="125" height="82" alt="Bat flying really fast">
<img src="/tl/imgs/tn/tn_construction_lights.gif" width="72" height="79" alt="Flying Bee">
</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>
<input type="button" value="konet" onclick="newDoc('konet')">
<input type="button" value="iperms" onclick="newDoc('iperms')">
<input type="button" value="jtfdc" onclick="newDoc('jtfdc')">
<input type="button" value="jtfdcr" onclick="newDoc('jtfdcr')">
<input type="button" value="kitiworks" onclick="newDoc('kitiworks')">
<input type="button" value="pastryroad" onclick="newDoc('pastryroad')">
<input type="button" value="konabus" onclick="newDoc('konabus')">
<input type="button" value="kou" onclick="newDoc('kou')">
<input type="button" value="kt" onclick="newDoc('kt')">
<script>
function newDoc('code') {
if( code == "konet" ) { window.location.assign("/fb/konet'"); return false; }
if( code == "iperms" ) { window.location.assign("/fb/iperms'"); return false; }
if( code == "jtfdc" ) { window.location.assign("/fb/jtfdc'"); return false; }
if( code == "jtfdcr" ) { window.location.assign("/fb/jtfdcr'"); return false; }
if( code == "kitiworks" ) { window.location.assign("/fb/kitiworks'"); return false; }
if( code == "pastryroad" ) { window.location.assign("/fb/pastryroad'"); return false; }
if( code == "konabus" ) { window.location.assign("/fb/konabus'"); return false; }
if( code == "kou" ) { window.location.assign("/fb/kou'"); return false; }
if( code == "kt" ) { window.location.assign("/fb/kt'"); return false; }
}
</script>
</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