Random image load works fine offline, but not on website - javascript

This code works perfectly fine by itself but as soon as I embed it into a website it no longer loads an image on page load. Why? How can it be improved?
My guess is the susceptible windowon.load. Maybe it can be substituted?
//$(document).ready(function(){choosePic;}
//alert(window.onload);
//https://stackoverflow.com/questions/2810825/javascript-event-window-onload-not-triggered;
window.onload = choosePic;
var onloadd = window.onload;
var myPix = new Array(
"https://m.box.com/file/903146245504/https%3A%2F%2Fapp.box.com%2Fs%2Fj7i88s6jb4yyk4wmiti4tol8ejoikdhl/preview/preview.png",
"https://m.box.com/file/1055524661946/https%3A%2F%2Fapp.box.com%2Fs%2Fj7i88s6jb4yyk4wmiti4tol8ejoikdhl/preview/preview.png",
"https://m.box.com/file/896387464705/https%3A%2F%2Fapp.box.com%2Fs%2Fj7i88s6jb4yyk4wmiti4tol8ejoikdhl/preview/preview.png"
);
function choosePic() {
var randomNum = Math.floor(Math.random() * myPix.length);
document.getElementById("myPicture").src = myPix[randomNum];
('#myPicture').html(` ${myPicture} `);
('#today').html(` ${onloadd} `);
}
<button id=onloadd></button>
<button id="myrdpbtn" style="background:transparent; border:transparent;" onclick="choosePic()">RandomPicture</button>
<button id=onloadd></button><br>
<img src="https://ry3yr.github.io/OSTR/release/0mine/documents/art/empty.png" width=1000 id="myPicture"><br><br>

This works.
<!----RandomImage--->
<button id="myrdpbtn" style="background:transparent; border:transparent;" onclick="swap()">RandomPicture</button>
<style type="text/css">
#banner {height:100%;object-fit: contain;
//padding:0;margin:0;text-align:right;
//position:relative;
//position:absolute; top: 0px; left: 1200px;
//background-position: center center;
background-size: contain;
background-repeat: no-repeat;}</style>
<script type="text/javascript">
if (document.getElementById) { window.onload = swap };
function swap() {
var numimages=8;
rndimg = new Array(
"https://m.box.com/file/903146245504/https%3A%2F%2Fapp.box.com%2Fs%2Fj7i88s6jb4yyk4wmiti4tol8ejoikdhl/preview/preview.png",
"https://m.box.com/file/905690094898/https%3A%2F%2Fapp.box.com%2Fs%2Fj7i88s6jb4yyk4wmiti4tol8ejoikdhl/preview/preview.png",
"https://cdnb.artstation.com/p/assets/images/images/055/144/127/large/ryedai1-2022-10-19-aoi-realist-no2.jpg?1666212593",
"https://other00.deviantart.net/c476/o/2021/321/8/f/subaru_and_misora_by_pasc91.png",
"https://m.box.com/file/900365515983/https%3A%2F%2Fapp.box.com%2Fs%2Fj7i88s6jb4yyk4wmiti4tol8ejoikdhl/preview/preview.png",
"https://m.box.com/file/889506897379/https%3A%2F%2Fapp.box.com%2Fs%2Fj7i88s6jb4yyk4wmiti4tol8ejoikdhl/preview/preview.png",
"https://m.box.com/file/903146245504/https%3A%2F%2Fapp.box.com%2Fs%2Fj7i88s6jb4yyk4wmiti4tol8ejoikdhl/preview/preview.png",
"https://m.box.com/file/896387464705/https%3A%2F%2Fapp.box.com%2Fs%2Fj7i88s6jb4yyk4wmiti4tol8ejoikdhl/preview/preview.png"
);
x=(Math.floor(Math.random()*numimages));
randomimage=(rndimg[x]);
document.getElementById("banner").style.backgroundImage = "url("+ randomimage +")";
}</script>
</head>
<div id="banner""></div>

Related

Change image position on button click

I don't know very much about coding, but I would like to be able to make it so when I click one of the "test" buttons, the image moves. I would like it to be a variable, so that it is constantly checking the variable (I have no idea how to use variables), and at any given moment, when variable = number, it is in a specific position I have designated. And when I click test 1, that variable goes up by one, and when I click test 2, it goes down by one. And at any given variable from 0-10, there is a specific place the image should be for each number. And once the variable reaches 11, the variable will instantly reset to 0 as if in a loop. It can include HTML, CSS and Javascript, sorry if this is confusing I really am a noob at coding :(
This is all the code I have so far, it really isn't helpful but I thought I should add it anyway.
<img id="img01" src="https://cdn.shopify.com/s/files/1/0080/8372/products/tattly_triangle_yoko_sakao_ohama_00_1200x1200.png?v=1575322215" height="300">
<button id="test1" type="button">test 1</button>
<button id="test2" type="button">test 2</button>
Thank you for any help :)
Take a look at the code below. I hope this example will help you to undestand a block move principe.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>moved image</title>
</head>
<body>
<div class="wrapper">
<div>
<img class="image" src="" width="50" style="left: 200px;">
</div>
</div>
<button class="button" type="button" id="left-button" onclick="moveLeft()">Left</button>
<button class="button" type="button" id="right-button" onclick="moveRight()">Right</button>
<style>
.wrapper {
position: relative;
width: 500px;
min-height: 200px;
background-color: yellow;
}
.image {
position: absolute;
top: 40px;
width: 100px;
height: 70px;
background-color: blue;
}
</style>
<script>
'use strict'
const getNumber = function(str) {
return parseInt(str, 10);
}
const transformToString = function(num) {
return num + 'px';
}
const SHIFT = 10;
const MARGIN = 10;
const element = document.querySelector('.image');
const LEFT_MARGIN = getNumber(element.style.left) - SHIFT * MARGIN;
const RIGHT_MARGIN = getNumber(element.style.left) + SHIFT * MARGIN;
const moveLeft = function() {
if (getNumber(element.style.left) > LEFT_MARGIN) {
element.style.left = transformToString(getNumber(element.style.left) - SHIFT);
}
}
const moveRight = function() {
if (getNumber(element.style.left) < RIGHT_MARGIN) {
element.style.left = transformToString(getNumber(element.style.left) + SHIFT);
}
}
</script>
</body>
</html>

Add a fade in on images loaded by JavaScript

I have a simple function to replace one image with others using JavaScript. And I have one line to fade in it when loading. But how can I add a fade in when the new image is displayed?
<script type="text/javascript">
function changeImage(a) {
document.getElementById("Image").src = a;
}
</script>
<div>
<img src="Mini-01.jpg" onclick="changeImage('Photo-01.jpg');">
<img src="Mini-02.jpg" onclick="changeImage('Photo-02.jpg');">
</div>
<div>
<img id="Image" src="Photo-01.jpg" onload="this.style.animation='fadein 2s'">
</div>
I tried using:
onchange="this.style.animation='fadein 2s'"
but it does not work.
I think it is too simple to use Jquery on this case.
Can you please helm me?
You can achieve the desired using css3 like this on changeImage() function.
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.container { top: 20%; left: 20%;}
.fade-in {
animation:fadeIn ease-in 1;
animation-duration:5s;
}
<script type="text/javascript">
function changeImage(a) {
var elm = document.getElementById("Image");
var clonedElm = elm.cloneNode(true);
elm.parentNode.replaceChild(clonedElm, elm);
document.getElementById("Image").src = a;
}
</script>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Perkin_Warbeck.jpg/200px-Perkin_Warbeck.jpg" onclick="changeImage('https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Perkin_Warbeck.jpg/200px-Perkin_Warbeck.jpg');">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Leonard_Cohen_2008.jpg/200px-Leonard_Cohen_2008.jpg" onclick="changeImage('https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Leonard_Cohen_2008.jpg/200px-Leonard_Cohen_2008.jpg');">
</div>
<div class="container">
<img id="Image" src="" class="fade-in">
</div>
You can write custom function for fadeIn like this:
function fadeIn(el) {
el.style.opacity = 0;
var tick = function() {
el.style.opacity = +el.style.opacity + 0.01;
if (+el.style.opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
}
};
tick();
}
//taken from http://stackoverflow.com/questions/23244338/pure-javascript-fade-in-function
function changeImage(a) {
var el = document.getElementById("Image");
el.src = a;
fadeIn(el)
}
where el = document.getElementById() or something.
Here is https://jsfiddle.net/60x3bo8f/2/

Random card/Image using buttonjavascript

I want to create a card game using java script. Being a beginner at java script, I am finding great difficulty finding a suitable tutorial for what I am trying to do. When the 'start game' button is selected, I want the computer to produce a random card. I have tried many ways of doing this and have came to no avail. Here is my code.
<html>
<head>
<title> Christmas Assignment </title>
<link rel="stylesheet" type="text/css" href="xmasass_1.css">
<script type = "text/javascript">
function randomImg(){
var myimages= [];
myimages[1] = "cards/1.gif";
myimages[2] = "cards/2.gif";
myimages[3] = "cards/3.gif";
myimages[4] = "cards/4.gif";
myimages[5] = "cards/5.gif";
myimages[6] = "cards/6.gif";
myimages[7] = "cards/7.gif";
myimages[8] = "cards/8.gif";
myimages[9] = "cards/9.gif";
myimages[10] = "cards/10.gif";
myimages[11] = "cards/11.gif";
myimages[12] = "cards/12.gif";
myimages[13] = "cards/13.gif";
function oddTrivia(){
var randomImg = Math.floor(Math.random()*(oddtrivia.length));
document.getElementById('comp').InnerHTML=myimages[randomImg];
}
ar total = 0;
function randomImg(){
var x = Math.floor(Math.random()*13)+1;
document.getElementById('img1').src = 'die'+x+'.gif';
document.getElementById('img2').src = 'die'+y+'.gif';
document.getElementById('score').innerHTML = total;
}
var card1Image;
var card2Image;
var card3Image;
var card4Image;
var card5Image;
var card6Image;
function start(){
var button = document.getElementById("startButton");
button.addEventListener("click", pickCards, false);
card1Image = document.getElementById("1");
card2Image = document.getElementById("2");
card3Image = document.getElementById("3");
card4Image = document.getElementById("4");
card5Image = document.getElementById("5");
card6Image = document.getElementById("6");
}
function pickCards(){
setImage(card1Image);
setImage(card2Image);
setImage(card3Image);
setImage(card4Image);
setImage(card5Image);
setImage(card6Image);
}
function setImage(cardImg){
var cardValue = Math.floor(1 + Math.random() * 13);
cardImg.setAttribute("src", "C:Xmas Assignment/cards/" + cardValue + ".gif");
}
window.addEventListener("load", start, false);
</script>
</head>
<body>
<div id = "settings">
<img src = "settings_img.png" width = "60" height = "60">
</div>
<div id = "bodydiv">
<h1> Card Game</h1>
<div id = "computer">
<img src = " cards/back.gif">
</div>
<div id = "comp" > Computer </div>
<div id ="arrow">
<img src ="arrow2.png" width = "100" height="100">
</div>
<div id = "player">
<img src = " cards/back.gif">
</div>
<div id = "play"> Player </div>
<div id = "kittens">
<button id = "startButton" onclick ="randomImg" > Start Game </button>
<div id = "buttons_1">
<button id ="higher"> Higher
</button>
<button id = "equal"> Equal
</button>
<button id = "lower"> Lower
</button>
</div>
<button id = "draw"> Draw your Card
</button>
<div id = "resetscore"> Reset Score
</div>
</div>
<div id = "score">
</div>
</div>
</body>
</html>
body {
background:#66ccff;
}
h1 {
text-align:center;
}
#settings {
float:right;
margin-top:10px;
}
#bodydiv {
width: 800px;
height:600px;
margin-left:200px;
margin-top:40px;
margin-bottom:60px;
background:#ffccff;
border-radius: 10px;
}
#computer {
border-radius: 10px;
position: absolute;
left:35%;
top:27%;
}
#player {
border-radius: 10px;
position: absolute;
left:55%;
top:27%;
}
#start_game {
width :120px;
height: 55px;
margin-left: 350px;
margin-top:50px;
background:white;
border:1px solid black;
}
#buttons_1 {
text-align: center;
margin-top:20px;
}
#higher {
width:140px;
height:50px;
font-size: 15px;
border-radius:10px;
font-weight:bold;
}
#equal {
width:140px;
height:50px;
font-size: 15px;
border-radius:10px;
font-weight:bold;
}
#lower {
width:140px;
height:50px;
font-size: 15px;
border-radius:10px;
font-weight:bold;
}
#draw {
width:160px;
height:30px;
margin-left:325px;
margin-top: 30px;
border:1px solid black;
background:#FFFFCC;
}
#resetscore {
text-align: center;
margin-top: 40px;
}
#arrow {
margin-left:370px;
margin-top:-130px;
}
#comp {
margin-top:240px;
margin-left:265px;
}
#play{
margin-top:10px;
margin-left:540px;
}
You code is kind of hard to read.
You forgot to close the "{" of your main function.
You are declaring "randomImg" again in the body of the "randomImg" function(use a different name).
You wrote
ar total = 0;
I think you meant to write:
var total = 0;
oddtrivia in the function "OddTrivia" is not defined.
y in the inner randomImg function is not defined.
Having poked a little bit at the code, here is a few things:
Problem no 1: randomImg()
It's hard to know your intentions, but you should likely begin with removing the start of your first function randomImg(){.
Because 1) It does not have an end and 2) If it actually spans everything then this line window.addEventListener("load", start, false); will not load on startup (since it does not get executed until randomImg() gets executed, and by then the page has already loaded.)
Problem no 2: Cannot set property 'src' of null"
Now when the first problem is out of the way, you should see "Uncaught TypeError: Cannot set property 'src' of null" if you look in your console. Yes, USE YOUR CONSOLE. Click on the error to show what causes it. Here it is:
cardImg.setAttribute("src", "C:Xmas Assignment/cards/" + cardValue + ".gif");
This means that cardImg is null. We backtrack the first call of setImage() and find that the variable card1Image is passed in. So that must mean that card1Image also is null. You can check it yourself by adding a console.log('card1Image', card1Image); in your code. Or you add a breakpoint at that point. (Use the sources-tab in chrome dev tools, click at the line-numbering to add a break point. Refresh the page and it will stop at the break point. Now you can mouse-over variables to see their values.)
Let's look at where 'card1Image' is set.
card1Image = document.getElementById("1");
So why is this returning null? Do we even have a id="1" element in the html? That could be the reason. (It is.)
There are more problems, but I'll stop there, but when you have fixed this part AND have no errors please ask again. Always check your errors and if you ask a question here you should provide errors. And when you can also be more specific with your questions.
What might someone else have done differently?
When it comes to playing cards, why not an array of objects?
var cards = [
{ src : 'cards/1.gif', value: 1 },
{ src : 'cards/2.gif', value: 2 },
{ src : 'cards/3.gif', value: 3 },
{ src : 'cards/4.gif', value: 4 }
]; // (You can of course use code to generate it.)
// Then a function to put cards in the player's hand.
var playerHand = _.sample(cards, 2);
console.log(playerHand);
Here I assume lodash, a lightweight library for when you don't want to re-invent the wheel.

Getting mouse click position on image in javascript?

I wrote below code to get co-ordinate of x/y in JAVASCRIPT , it's not working .
I want to create a color picker using this image
when ever some one click on button pick color then it prompts a window with color and button cancel , When user clicked on image than i need to find x/y co-ordinate so that i can specify which color it is .
Problem is that these alerts are not working
alert(e.clientX - offsetl);
alert(e.clientY - offsett);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#dialogoverlay{
display: none;
opacity: .8;
position: fixed;
top: 0px;
left: 0px;
background: #FFF;
width: 100%;
z-index: 10;
}
#dialogbox{
display:none;
position: fixed;
background: #f2f2f2;
border-radius:5px;
z-index: 10;
}
#dialogboxhead{background:white;height:40px;margin:10px;}
#text {float:left; text-align:center;margin:10px; font-size:19px;}
#cancel{float:left;margin:9px;}
#image{
margin-top:0px;
padding:10px;
}
</style>
<script type="text/javascript">
function CustomAlert(){
this.render = function(dialog){
var winW = window.innerWidth;
var winH = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH+"px";
dialogbox.style.left = (winW/2) - (550 * .5)+"px";
dialogbox.style.top = "100px";
dialogbox.style.display = "block";
}
this.cancel = function(){
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
}
var Alert = new CustomAlert();
function position(e){
var offsetl = document.getElementById('image').offsetLeft;
var offsett = document.getElementById('image').offsetTop;
alert(offsetl);
alert(offsett);
alert(e.clientX - offsetl);
alert(e.clientY - offsett);
}
</script>
</head>
<body>
<div id="dialogoverlay"></div>
<div id="dialogbox">
<div id="dialogboxhead">
<p id="text">Select color</p>
<input type="button" onClick="Alert.cancel()" id="cancel" name="Cancel" value="Cancel"/>
</div>
<div>
<img id="image" src="color.png" onClick="position()"/>
</div>
</div>
<button onclick="Alert.render('Hello World');" >pick color </button>
</body>
</html>
I recommend use jQuery and attach click event handler in you image. The event object return in jQuery include two properties, pageX and pageY. This properties contains mouse position relative to the top edge of the document (jQuery Event Object). The code look like this:
$(document).ready(function () {
$('img#image').click(position);
});
function position(e) {
var offsetX = e.pageX,
offsetY = e.page;
}
The sample is in JSFiddle http://jsfiddle.net/zV3dH/.
I hope this help you.
Try this code buddy.. Sure it works
function getClickPos(e) {
return {x:e.clientX,y:e.clientY};
}
Now u can use it like this:
document.querySelector("#img").onclick = function(e) {
var pos= getClickPos(e);
alert(pos.x);
};

Show images one after one after some interval of time

I am new person in Front End Development and i am facing one major problem is that i have 3 images placed on each others and now i want to move one image so the other image comes up and then it goes and third image comes up after some interval of time.
I want three images on same position in my site but only wants to see these three images one after one after some interval of time.
Please help how i can do this??
May i use marquee property or javascript???
Non-jQuery Option
If you don't want to go down the jquery route, you can try http://www.menucool.com/javascript-image-slider. The setup is just as easy, you just have to make sure that your images are in a div with id of slider and that div has the same dimensions as one of your images.
jQuery Option
The jQuery cycle plugin will help you achieve this. It requires jquery to work but it doesn't need much setting up to create a simple sliple slideshow.
Have a look at the 'super basic' demo:
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
It has many options if you want something a bit fancier.
Here you go PURE JavaScript solution:
EDIT I have added image rotation... Check out live example (link below)
<script>
var current = 0;
var rotator_obj = null;
var images_array = new Array();
images_array[0] = "rotator_1";
images_array[1] = "rotator_2";
images_array[2] = "rotator_3";
var rotate_them = setInterval(function(){rotating()},4000);
function rotating(){
rotator_obj = document.getElementById(images_array[current]);
if(current != 0) {
var rotator_obj_pass = document.getElementById(images_array[current-1]);
rotator_obj_pass.style.left = "-320px";
}
else {
rotator_obj.style.left = "-320px";
}
var slideit = setInterval(function(){change_position(rotator_obj)},30);
current++;
if (current == images_array.length+1) {
var rotator_obj_passed = document.getElementById(images_array[current-2]);
rotator_obj_passed.style.left = "-320px";
current = 0;
rotating();
}
}
function change_position(rotator_obj, type) {
var intleft = parseInt(rotator_obj.style.left);
if (intleft != 0) {
rotator_obj.style.left = intleft + 32 + "px";
}
else if (intleft == 0) {
clearInterval(slideit);
}
}
</script>
<style>
#rotate_outer {
position: absolute;
top: 50%;
left: 50%;
width: 320px;
height: 240px;
margin-top: -120px;
margin-left: -160px;
overflow: hidden;
}
#rotate_outer img {
position: absolute;
top: 0px;
left: 0px;
}
</style>
<html>
<head>
</head>
<body onload="rotating();">
<div id="rotate_outer">
<img src="0.jpg" id="rotator_1" style="left: -320px;" />
<img src="1.jpg" id="rotator_2" style="left: -320px;" />
<img src="2.jpg" id="rotator_3" style="left: -320px;" />
</div>
</body>
</html>
And a working example:
http://simplestudio.rs/yard/rotate/rotate.html
If you aim for good transition and effect, I suggest an image slider called "jqFancyTransitions"
<html>
<head>
<script type="text/javascript">
window.onload = function(){
window.displayImgCount = 0;
function cycleImage(){
if (displayImgCount !== 0) {
document.getElementById("img" + displayImgCount).style.display = "none";
}
displayImgCount = displayImgCount === 3 ? 1 : displayImgCount + 1;
document.getElementById("img" + displayImgCount).style.display = "block";
setTimeout(cycleImage, 1000);
}
cycleImage();
}
</script>
</head>
<body>
<img id="img1" src="./img1.png" style="display: none">
<img id="img2" src="./img2.png" style="display: none">
<img id="img3" src="./img3.png" style="display: none">
</body>
</html>​
Fiddle: http://jsfiddle.net/SReject/F7haV/
arrayImageSource= ["Image1","Image2","Image3"];
setInterval(cycle, 2000);
var count = 0;
function cycle()
{
image.src = arrayImageSource[count]
count = (count === 2) ? 0 : count + 1;
}​
Maybe something like this?

Categories

Resources