<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;" >
Related
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.
I have tried making a slideshow in js and its not working, all I get is the images displayed on the screen in order and the next and previous links just send me to the top of the page. I can't work out why, i know solutions that do work but I don't understand why this solution is not working. There are many solutions I have found online that are very similar to this one and they work, yet this one doesn't, I have only recently started js so I imagine its something silly I have missed. Here is the HTML: (edit: moved the to the bottom of the html body)
<html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="CSS/mainPageStyle.css">
</head>
<body style="background-color:white">
<div id="titleLogo"><h1>Custom Motorbikes</h1></div>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Full ride list</li>
<li>Custom ride</li>
<li>Contact Us</li>
<li>Login</li>
<li>Register</li>
</ul>
</nav>
<!-- front page slideshow: -->
<img src="images/bikePerson.jpg" class="slides" style="width:100%" />
<img src="images/bikePersonCountry.jpg" class="slides" style="width:100%" />
<img src="images/bikeRoad.jpg" class="slides" style="width:100%" />
Next Slide <br/>
Previous Slide
<!-- front page slideshow -->
<script type="text/javascript" src='JS/slideshow.js'></script>
</body>
</html>
here is the js:
var imgPos = 0;
var changeImage(0); //called so that images(except first one) are hidden intially
var imgs = document.getElementsByClassName("slides"); //creates an array, and fills it with all images with 'slides' class
var arrayLength = imgs.length;
function changeImage(x) {
var i = 0; //used for counting through 'for' loop
imgPos += x; //x will be either -1 or +1
if (imgPos > arrayLength){ //if user goes beyond last img
imgPos = 0; //go to first img
}
if (imgPos < 0){ //if user goes before first img
imgPos = arrayLength; //go to furthest img
}
for (i = 0; i < arrayLength; i++){
imgs[i].style.display = "none"; //this hides all the images
}
imgs[imgPos].style.display = "block"; //this then displays the image we want to see
return false;
}
Here are the errors:
Uncaught TypeError: Cannot read property '0' of undefined(…) slideshow.js:22
Uncaught TypeError: Cannot read property '1' of undefined(…)
Method 1 (Move the js to the bottom)
This will run after all of you dom has loaded.
<html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="CSS/mainPageStyle.css">
</head>
<body style="background-color:white">
<div id="titleLogo"><h1>Custom Motorbikes</h1></div>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Full ride list</li>
<li>Custom ride</li>
<li>Contact Us</li>
<li>Login</li>
<li>Register</li>
</ul>
</nav>
<!-- front page slideshow: -->
<img src="images/bikePerson.jpg" class="slides" style="width:100%" />
<img src="images/bikePersonCountry.jpg" class="slides" style="width:100%" />
<img src="images/bikeRoad.jpg" class="slides" style="width:100%" />
Next Slide <br/>
Previous Slide
<!-- front page slideshow -->
<script type="text/javascript" src='JS/slideshow.js'></script>
</body>
</html>
Method 2 (add document ready)
This will trigger the dom loaded event after your dom is loaded.
Note: You can not assign a function to a var var changeImage(0); You can assign the result of a function to a variable though: var myVar = changeImage(0);
var imgPos = 0;
var imgs = [];
function changeImage(x) {
var i = 0; //used for counting through 'for' loop
imgPos += x; //x will be either -1 or +1
imgPos = imgPos + 1 > imgs.length ? 0 : imgPos;
imgPos = imgPos < 0 ? imgs.length - 1 : imgPos;
for (let i = 0; i < imgs.length; i++) {
imgs[i].style.display = "none"; //this hides all the images
}
imgs[imgPos].style.display = "block"; //this then displays the image we want to see
console.log(imgs[imgPos])
return false;
}
document.addEventListener('DOMContentLoaded', event => {
imgs = document.querySelectorAll("img.slides"); //creates an array, and fills it with all images with 'slides' class
changeImage(0); //called so that images(except first one) are hidden intially
});
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>
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.