I'm not sure exactly where my issue lies, I'm relatively new to both canvas and JavaScript so I'm sorry if this is very vague but I cannot get my slideshow canvas to function, let alone display an image.
<!DOCTYPE html>
<html>
<head>
<title>PhotoGenesis</title>
<LINK REL=StyleSheet HREF="homecss.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript" src="homescript.js"></script>
</head>
<body onLoad="javascript:preloader()">
<header>
<a href=http://localhost.com/home><img id=logo alt="PhotoGenesis" src="logo.png""/> </a>
<nav id=headernav>
<a href=http://localhost.com/home>home</a>
<a href=http://localhost.com/news>news</a>
<a href=http://localhost.com/photography>photography</a>
<a href=http://localhost.com/video>video</a>
<script type="text/javascript">
var lightbox="lightbox ("+"0"+")";
document.write("<a href=http://localhost.come/lighbox>" + lightbox + "</a>");
</script>
<a href=http://localhost.com/about>about</a>
<a href=http://localhost.com/contact>contact</a>
<a href=http://localhost.com/blog>blog</a>
</nav>
<span id=search></span>
<img id=miscone alt="Full Screen" src="miscone.png"/>
<img id=misctwo alt="Share" src="misctwo.png"/>
</header>
<main onLoad="javascript:canvasslider()">
<canvas id="defaultbackground" width=100%; height=100%;/>
</main>
<footer>
<nav id="footernav">
<a href=http://www.facebook.com><img id="fbnav" alt="Facebook" src="fbooknav.png"/></a>
<a href=http://www.twitter.com><img id="tnav" alt="Twitter" src="twitternav.png"/></a>
<a href=http://www.stumbleupon.com><img id="snav" alt="StumbleUpon" src="stumblenav.png"/></a>
</nav>
</footer>
</body>
</html>
<script language="JavaScript">
function preloader()
{
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0]="background1.png"
images[1]="background2.png"
images[2]="background3.png"
// start preloading
for(i=0; i<=images.length; i++)
{
var backstring ="background"+i+".png";
images[i].id=backstring;
imageObj.src=images[i];
}
}
function canvasslide()
{
function init()
{
defaultbackground = document.getElementById("defaultbackground");
ctx = defaultbackground.getContext("2d");
for(i=0; i<=images.length; i++){
var backstring ="background"+i+".png";
sprite = document.getElementById(backstring);
ctx.drawImage(sprite,0,0);}
}
}
</script>
sprite.onload = function() {
ctx.drawImage(sprite,0,0);
}
I'm pretty sure your image isn't loaded yet when you draw it on canvas. Try something like this, I'm not sure this is the right code because I didn't get every part of your code, but you have to use image.onload function before you draw it onto a canvas.
Related
I need some help preloading images in javascript, here is my code right now. I have to preload the images and then attach a mouseover and mouseout event to them, but preloading is really the only problem I am having right now.
"use strict";
var $ = function(id) { return document.getElementById(id); };
window.onload = function preload() {
var image1 = $("image1");
var image2 = $("image2");
// preload images
var links = $("image_list").getElementsByTagName("a");
var i,link, image;
// attach mouseover and mouseout events for each image
image1.onmouseover = function() {
"images/release.jpg";
};
image1.onmouseout = function() {
};
image2.onmouseover = function() {
};
image2.onmouseout = function() {
};
};
Blockquote
Here is the HTML
<!DOCTYPE html>
<html>
<head>
<title>Image Rollover</title>
<link rel="stylesheet" type="text/css" href="rollover.css">
<script type="text/javascript" src="rollover.js"></script>
</head>
<body>
<main>
<h1>Fishing Images</h1>
<p>Move your mouse over an image to change it and back out of the
image to restore the original image.</p>
<ul id="image_list">
<li><a href="images/release.jpg" id="catch" title="Catch and
Release"></a></li>
<li></li>
<li></li>
<li></li>
</ul>
<p>
<img id="image1" src="images/hero.jpg" alt="">
<img id="image2" src="images/bison.jpg" alt="">
</p>
</main>
</body>
</html>
`
You can do that binding the event onload
image2.onload = function(){
image2.onmouseover = function() {
};
image2.onmouseout = function() {
};
}
If you want to wait for all images to load you can do it with jQuery
$(window).on("load", function() {
//This will be executed when every single DOM element is loaded
}
I'm new to html and javascript. I am trying to add images to a canvas when clicked on by calling the image from the image gallery. I'm using the onclick method to my script and isn't working thus I am struggling. I've added my code below. Thank you for your help! The assignment ask...
Implement the imgOnClick(elmt) function so that it paints (to the canvas' drawImage() method) the image given by elmt. elmt will be an tag object. The canvas has the id imgresult.
In the document ready function, have each of the thumbnail images set their click event to the imgOnClick() function. I recommend you test this for one image before implementing it for the remaining images. Make sure you scale the image to a usable size.
<pre> <code><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel=stylesheet type="text/css" href="memeory.css">
<title>Meme-ory :: Javascript Meme Generator</title>
<script type="application/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$( document ).ready(function() {
$('.thumbnail').click(imgOnClick('img'){
});
});
function imgOnClick('img') {
var canvas = document.getElementById("imgresult");
var ctx = canvas.getContext("2d");
var img = document.getElementById("closeenough");
ctx.drawImage(img, 10, 10);
};
};
function buttonOnClick() {
};
</script>
</head>
<body>
<header>
<h1>Meme-ory: Raging on in the Moonlight!</h1>
</header>
<main>
<div id="controls">
<form>
<label for="toptext">Top Text:</label>
<input id="toptext" type="text">
<label for="bottomtext">Bottom Text:</label>
<input id="bottomtext" type="text">
<input id="createMemeButton" type="button" value="Give me Meme!">
</form>
</div>
<div id="imagegallery">
<img class="thumbnail" id="closeenough" src="closeenough.png" alt="close enough">
<img class="thumbnail" id="cutenessoverload" src="cutenessoverload.png" alt="cuteness overload">
<img class="thumbnail" id="deskflip" src="deskflip.png" alt="deskflip">
<img class="thumbnail" id="lol" src="lol.png" alt="LOL">
<img class="thumbnail" id="trollface" src="trollface.png" alt="troll face">
</div>
<div id="memeresult">
<canvas id="imgresult">
</canvas>
</div>
</main>
</body>
</html>
If you try to select an element in a page, you can only do so when it has been created. You cannot select it BEFORE its existence. In this case you try to select a canvas and an image in the HEAD of you page, but these elements are only defined later on in your body.
There are two simple fixes:
Either you move your script code to the end of the page (just before </body>), or you include the code in the $( document ).ready(function() { block, like this:
$(document).ready(function() {
window.onclick = function imgOnClick(e) {
var canvas = document.getElementById("imgresult");
var ctx = canvas.getContext("2d");
var img = document.getElementById("closeenough");
ctx.drawImage(img, 0, 0);
};
});
Both ways ensure that you try to select the elements when they have been created.
<html>
<head>
<meta charset = "utf-8/">
<title> My Student Life </title>
<link rel="stylesheet" href="Pan.css"/> <!--Links to the CSS -->
<script type = "text/javascript"> // JavaScript code
var slideimages = new Array() //SlideShow process begins
imgAlign = "center"
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "Welcome.jpg" // set image src property to
slideimages[1] = new Image()
slideimages[1].src = "Code.jpg" //Image source
slideimages[2] = new Image()
slideimages[2].src = "books.jpg"
</script>
</head>
<body class ="Container" Background = "Background.jpg"> <!-- Background Images-->
<div class="headerMenu"> <!-- Div class for menus -->
<h1> My Student Life </h1>
<div id="menu"> <!-- created Menus-->
<ul>
<a href="WelcomePage.html"/> Welcome </a>
<a href=""/></a> <!--Menu links-->
<a href="Menu.html"/> Menu </a>
<a href=""/> </a>
</ul>
</div>
<header>
<h2 color = "white"> Welcome to my Student Life </h2>
</header>
<img src = "Welcome.jpg" width = "500" height ="300" id = "slide" > <!--Image -->
<script type="text/javascript">
var step=0 //starts
function slideit(){ //function called slideit
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src //Gets image by ID and follows the sliding process
if (step<2)
step++
else
step=0
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit() //Enable the function to perform
</script>
</body>
</html>
I am creating a project for one of my university course , I have created a slideshow using JS it works perfectly only problem is that the position of image is all the way to the left of screen . I tried padding-left in css but still didnt work I alsi created it in a div class and calld the class in CSS and a still no result. Sorry for my english.
Add following in your Pan.css :
.Container{
text-align: center;
}
For your question 2, just add margin-right to your image, the value is up to you:
img{
margin-right: 50px
}
Try adding the style below to your img tag:
<img src = "Welcome.jpg" width = "500" height ="300" id = "slide" style="margin: auto;" >
I am trying to create a random gif generator. Very simple in design, just have the gif/img load in and once the user clicks/taps it randomizes and pulls another random image from the array.
For now I would just like to have the image randomize when it is clicked.
Currently it only randomizes when the page is refreshed.
HTML
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/rand.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<head>
<title>Gif Generator - Prototype</title>
</head>
<body>
<h1>Gif Generator - Prototype</h1>
<section>
<p>This image is random</p>
<a href="#" class="click">
<script>
getRandomImage()
</script>
</a>
</section>
</body>
JS
var randomImage = new Array();
randomImage[0] = "images/100.jpg";
randomImage[1] = "images/200.jpg";
randomImage[2] = "images/300.jpg";
randomImage[3] = "images/400.jpg";
function getRandomImage() {
var number = Math.floor(Math.random()*randomImage.length);
document.write('<img src="'+randomImage[number]+'" />');
}
As per your jQuery reference at the top, below is the proposed solution:
$(function() {
$('a.click').click(function(e) {
e.preventDefault();
var number = Math.floor(Math.random()*randomImage.length);
$(this).html('<img src="'+randomImage[number]+'" />');
});
});
on click method serves the purpose.
in an <img> tag you can add an onclick method
<img src="" alt="Random image" onclick="getRandomImage()">
I'm trying to create a slide show but I'm having some difficulty. I've googled the problem and read loads of pages but I still can't get it to work. I'm doing this all in my header, then the header.php will be included on whichever page. I've tried setting the source to a string containing the location, creating an image before and then setting it to that image's source, and just trying odd things trying to get it to work.
The strange thing is when I call the updateSlider() function, the source of my image is null even though I can see it on the screen, and afterwards when I set it, it says there is a source but the image is the same.
But at the moment I'm just trying to change the image when I click a button and then I'm going to try and make the slide show. Here is the header.php code, you can see some of the different things I've tried in it:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">#import "./includes/layout.css";</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var slideImages = new Array("includes/images/mmSlideImage1.png",
"includes/images/mmSlideImage2.png", "includes/images/mmSlideImage3.png");
var slideImage = newImage();
slideImage.src = slideImages[0];
pic = document.createElement("img");
pic.setAttribute("src", "includes/images/mmSlideImage2.png");
pic.setAttribute("alt", "No Image");
var url2 = "includes/images/mmSlideImage2.png";
var img2 = new Image();
img2.src = url2;
function updateSlider() {
console.log(document.getElementById("ht").getAttribute("src"));
document.getElementById("ht").setAttribute("src", img2.src);
console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" />
<button type="button" onclick="updateSlider()">Update Slider</button>
<div id="nav">
Home
About
Gallery
Programs
</div>
Thank you in advance for any help!
==================================================================================
UPDATED CODE:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">#import "./includes/layout.css";</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
</script>
<script>
var url2 = "includes/images/mmSlideImage2.png";
function updateSlider() {
console.log(document.getElementById("ht").getAttribute("src"));
$('ht').attr('src', url2);
console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" />
<button type="button" onclick="updateSlider()">Update Slider</button>
Simple. You're trying to give an anchor a image attribute. Give your img an id and fix it in the Javascript. For example, if you give it an "currentSlideImage" id:
$('#currentSlideImage').attr('src', url2);
BTW, I'd suggest you take a read on Unobstrusive Javascript.
i am not sure why are you using new image when you are just changing src of an image tag.
the easiest way is to use jquery code
$('#imgTagID').attr('src', url2);
or in javascript
document.getElementById("imgTagID").src = url2;
Here you go you were just missing id Tag inside jquery i just tried it with online images
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var url2 = "http://www.thinkstockphotos.com.au/CMS/StaticContent/WhyThinkstockImages/Best_Images.jpg";
function updateSlider() {
//console.log(document.getElementById("ht").getAttribute("src"));
$('#ht').attr('src', url2);
//console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<a href="index.html" class="logo" > <img id="ht" src="http://www.nasa.gov/sites/default/files/images/743348main_Timelapse_Sun_4k.jpg" alt="Logo" width="970" height="278" /></a>
<button type="button" onclick="updateSlider()">Update Slider</button>
</body>
</html>