i have used the following code for image slider. and how can i set the link to each images
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
//change the image
if(!imageID){
document.getElementById("myimage").src="1.png";
imageID++;
}
else{if(imageID==1){
document.getElementById("myimage").src="2.png";
imageID++;
}else{if(imageID==2){
document.getElementById("myimage").src="3.png";
imageID=0;
}}}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>
</head>
<body style='background:black;' onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img width='700px' height='100px' id='myimage' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/></div>
</body>
</html>
please tell how to add link to each images
You can do like your image src.
use .setAttribute('href', "yoururl"); for set a html attribute with JS.
Add a link around your images and change the href attribute.
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
var link = document.getElementById("mylink");
//change the image
if(!imageID){
document.getElementById("myimage").src="1.png";
link.setAttribute('href', "url1");
imageID++;
}
else{if(imageID==1){
document.getElementById("myimage").src="2.png";
link.setAttribute('href', "url2");
imageID++;
}else{if(imageID==2){
document.getElementById("myimage").src="3.png";
link.setAttribute('href', "url3");
imageID=0;
}}}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>
</head>
<body style='background:black;' onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'>
<a id="mylink" href="#">
<img width='700px' height='100px' id='myimage' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/>
</a>
</div>
</body>
</html>
You can also use if-else-if instead of nested if-else statements. This works.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
//change the image
if(!imageID){
document.getElementById("myimage").src="https://pixabay.com/static/uploads/photo/2015/08/14/08/29/images-888133_960_720.jpg";
document.getElementById("link").href = "url1";
imageID++;
}
else if(imageID==1){
document.getElementById("myimage").src="http://eyespired.nl/wp-content/uploads/2013/09/bronzen-beelden-matteo-pugliese-607x458.jpg";
document.getElementById("link").href = "url2";
imageID++;
}else if(imageID==2){
document.getElementById("myimage").src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg";
document.getElementById("link").href = "url3";
imageID=0;
}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>
<body style='background:black;' onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'>
<a id="link" href="#">
<img width='700px' height='100px' id='myimage' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/>
</a></div>
</body>
Related
I am trying to save and download div content as an image. I resorted to this solution which suggests using html2canvas.
I have implemented the code below but cannot get the div content to be saved and downloaded as an image. How can I do this in jQuery or JavaScript?
Here is my code so far:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="html2canvas-master/dist/html2canvas.js"></script>
</head>
<body>
<h1> Div Data to be Save and Download</h1>
<div class="div1" id='div1'>
<h2> Iam Div1</h2>
<img src='images/div1_image.jpg' width='100' height='100'>
</div><br/>
<input type='button' id='but_screenshot' value='Download as Image' onclick='download();'><br/><br/>
<!-- Script -->
<script type='text/javascript'>
function download() {
// html2canvas(document.body).then(function(canvas) {
html2canvas(document.getElementById('div1')).then(function(canvas) {
document.body.appendChild(canvas);
});
}
</script>
</body>
</html>
Extend your download() function with the next code:
function download() {
html2canvas(document.getElementById("div1")).then(function(canvas) {
document.body.appendChild(canvas);
const image = canvas.toDataURL("image/png", 1.0);
const link = document.createElement("a");
link.download = "my-image.png";
link.href = image;
link.click();
});
}
You will get that as downloaded file after click
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/canvas2image.js"></script>
<script>
function mypng(){
var c=document.getElementById("picture");
var dataURL = c.toDataURL("image/png");
alert(dataURL);
}
</script>
<a id="jpeg" href="#" onclick="mypng();">
<canvas id="picture"></canvas>
but nothing happens, not run the function.
of course I am generating an image on the canvas. If I right click the image and select view this image I can see correctly and encoded in base64 url
<a id="jpeg" href="#" onclick="mypng();">
It is a link, so return false on click event to prevent going to /#.
<a id="jpeg" href="#" onclick="mypng(); return false;">
EDIT:
Also, you do not close the <a> tag.
Try this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/canvas2image.js"></script>
<script>
function mypng(){
var c=document.getElementById("picture");
var dataURL = c.toDataURL("image/png");
alert(dataURL);
event.preventDefault();
}
</script>
<a id="jpeg" href="#" onclick="mypng();">LINK</a>
<canvas id="picture"></canvas>
FIDDLE
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 am new to jquery and javascript. I want some picture in a div to change on click on another picture. I did look around here and found something similar to what i want but can't seem to make it work.
Here is my code:
<HTML>
<HEAD>
<TITLE></TITLE>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
<script type="text/javascript">
$(document).ready(function(){
$('#changeImage').click(function(){
var rel = $(this).attr('rel');
$("#imageBox img").attr('src', 'image' + rel + '.jpg');
})
});
</script>
</HEAD>
<BODY>
<div id="imageBox"><img src=placeholder.jpg></div>
<BR>
<img class="thumb" src="image1-thumb.jpg" />
<img class="thumb" src="image2-thumb.jpg" />
<img class="thumb" src="image3-thumb.jpg" />
</BODY>
</HTML>
You can see it life here: http://www.thebruises.be/TEST/test.html
But as I said above it doesn't work; tried moving the ... inside the body but doesn't change anything.
Any help would be appreciated ... and as I mentionned above I has zero javascript/jquery skills.
Thx
you're using the same id for all <a> tags. an ID has to be unique within the page your javascript is applying the on click function only to the first image
change id to class and your code should work
your code should look like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.changeImage').click(function(){
var rel = $(this).attr('rel');
$("#imageBox img").attr('src', 'image' + rel + '.jpg');
})
});
</script>
...
<img class="thumb" src="image1-thumb.jpg" />
<img class="thumb" src="image2-thumb.jpg" />
<img class="thumb" src="image3-thumb.jpg" />
Change your id="changeImage" to class="changeImage" since id is unique.
Then you can use each to iterate over all of your anchors with class changeImage:
$('.changeImage').each(function() {
$(this).click(function(){
var rel = $(this).attr('rel');
$("#imageBox img").attr('src', 'image' + rel + '.jpg');
})
});
Copy and paste this to your jQuery code:
$(document).ready(function(){
$('.changeImage').each(function() {
$(this).click(function(){
var rel = $(this).attr('rel');
$("#imageBox img").attr('src', 'image' + rel + '-thumb.jpg');
})
});
});
Demo
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.