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.
Related
I have a webpage with many images, each of which has a title attribute. When I hover over the image, I want the title text to display in a separate legend element I have created (not as a tiny hover tooltip). I have a mouseover function which works fine - i.e. when I hover over the image the legend changes value. But I want that value to be the title text of the individual image - which I don't know how to access. I have tried …innerHTML = this.title which is obviously incorrect.
[The number of images is large and changing (like an album), so I can't add separate code for each <img> tag. I can use alt or any other <img> attribute to make this work. I'm not wedded to the innerHTML method, either, but am hoping for some simple code to do the trick!]
Please help? Thanks! (FYI, I'm a novice coder.)
<!DOCTYPE html>
<html>
<body>
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver()" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver()" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver()" title="Dinner">
</div>
<script>
function mouseOver() {
document.getElementById("legend").innerHTML = this.title;
}
</script>
</body>
</html>
It looks like you are trying to use this.title to represent the different images? If you want their titles to appear in the <h1> tag you need to pass the information to the function shown below.
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver(this)" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver(this)" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver(this)" title="Dinner">
</div>
<script>
function mouseOver(x) {
document.getElementById("legend").innerHTML = x.title;
}
</script>
I guess its helpful .
But i use Jquery
just need call this code in your <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" class="class_of_div" title="Breakfast">
<img src="image2.jpg" class="class_of_div" title="Lunch">
<img src="image3.jpg" class="class_of_div" title="Dinner">
</div>
<script>
$(document).on('mouseover', '.class_of_div', function () {
var thiss=$(this);
$('#legend').text(thiss.attr('title'));
});
</script>
</body>
</html>
When I click on the anchor tag, the image shifts from div#left to div#right. I want the image to be copied. Is this the default behaviour of prepend()? How can I avoid this problem?
The image is just a placeholder for a big div with many children.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="Scripts/JavaScript.js"></script>
</head>
<body>
<div id="left" style="float:left">
<img src="Images/Rooms/K1.jpg" alt="Alternate Text" height="200" width="200"/>
</div>
<div id="right" style="float:right"></div>
<a id="addImageToRight" href="#">Add Image toRight</a>
</body>
</html>
The jQuery is:
$(document).ready(function () {
$("#addImageToRight").click(function () {
var $image = $("#left img");
var imgCopy = $image;
$("div#right").prepend(imgCopy);
});
});
Is this the default behaviour of prepend()?
Yes. Putting a DOM node somewhere in the document requires removing it from wherever in the document it is already. It can't exist in two places at the same time.
var imgCopy = $image;
That copies the value of $image to imgCopy. The value is a reference to the object. (In JavaScript, variables can only every hold references to objects).
How to avoid this problem?
Create a copy of the DOM node. Call .clone() on the jQuery object and prepend the return value.
var imgCopy = $image.clone();
You need to update your code from
var $image = $("#left img");
var imgCopy = $image;
to
var imgCopy = $("#left img").clone();
For reference - http://plnkr.co/edit/R5yjTY06dKkqccwmxS62?p=preview
Perhaps take a look at jQuery's clone() to create a copy of the img element.
In the following code. After save button clicked it is asking for download the output image generated from Html2canvas. How to chage this code so that instaed of asking to download it will generate the image on the fly with 'lightbox' feature.
I tried as :
<html>
<head>
<meta charset="utf-8"/>
<title>test2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src ="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="html2canvas.js?rev032"></script>
<script type="text/javascript">
$(window).load(function() {
$('#load').click(function() {
html2canvas($('#testdiv'), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href = img;
}
});
});
});
</script>
</head>
<body>
<div id="testdiv">
<h1>Testing</h1>
<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<br/>
</div>
<input type="button" value="Save" id="load"/>
</body>
</html>
Instead of redirecting the visitor to the image like you do here:
window.location.href = img;
You can add an invisible (display: none) image to the page:
<img src="" id="image" style="display: none; position: absolute; top: 30%; left: 30%; z-index: 1000;" />
And show it with your canvas image data like so:
$('#image').attr('src', img).fadeIn(200);
Now this won't create a very interesting lightbox without some additional work, but for that I would suggest you use a plugin instead. Something like Slimbox or Fancybox.
You can try
$("#containerID").empty().append(canvas); // containerID is the container element for your rendered image
to append image on your page. And in the same way try giving canvas or img (in your case) as url to your lightbox code.
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 have barely any experience working with DOM and using Javascript, and I have a very specific task that I'm trying to accomplish.
Let's say I have an image in my HTML:
<img src="foo.jpg" />
When the site loads, I want to take that image (all images in the document, actually), and wrap them in a link:
<img src="foo.jpg" />
What could I use to accomplish this? Google hasn't turned up much for me with regards to this specific task. On load, I can access and iterate all the images in the document... but I'm not sure where to go from there in order to wrap the image in a link.
You could try something among the lines:
window.onload = function() {
var images = document.getElementsByTagName('img');
for (var i = 0, image = images[i]; i < images.length; i++) {
var wrapper = document.createElement('a');
wrapper.setAttribute('href', 'http://www.foobar.com');
wrapper.appendChild(image.cloneNode(true));
image.parentNode.replaceChild(wrapper, image);
}
};
I would recommend you using the excellent jQuery library to manipulate the DOM:
$(function() {
$('img').wrap('<a href="http://foo.com">');
});
In the following example, all images become wrapped in a link to their source. So if an image has the src of //example.com, it will be wrapped with an anchor(link) to //example.com.
Of course you don't want some of the images linked so you can add the data attribute nolink, like so:
<img src="//lorempixel.com/400/200 data-nolink />
<!DOCTYPE html>
<html lang="en-GB">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include jQuery 1.11.1 -->
<script>
$(function() { //Run once DOM is ready
$('img:not([data-nolink])').each(function() { //Iterate through each img element
$(this).wrap('<a href="' + $(this).attr('src') + '">'); //Wrap with link to own src
});
});
</script>
<style>
h3 {
text-align: justify;
}
img {
width: 200px;
margin: 24px;
}
</style>
</head>
<body>
<h3>These images are generated randomly by loremPixel; So you will be presented by a different image to what you see here, when you click on any of the links </h3>
<hr />
<br />
<img src="//lorempixel.com/400/200?samp1" />
<img src="//lorempixel.com/400/200?samp2" />
<img src="//lorempixel.com/400/200?samp3" data-nolink/> <!-- Add data-nolink to prevent auto-linking -->
<img src="//lorempixel.com/400/200?samp4" />
<img src="//lorempixel.com/400/200?samp5" />
<img src="//lorempixel.com/400/200?samp6" />
</body>
</html>