How can I add a link for an image created using the following Javascript code. I tried some changes, but nothing worked.
Please change the following code to the code with a link. I want to link all images at http://idealbodyweights.com/.
<script type="text/javascript">
var image1 = new Image()
image1.src =="http://idealbodyweights.com/wp-content/uploads/2013/05/1.png"
var image2 = new Image()
image2.src = "http://idealbodyweights.com/wp-content/uploads/2013/05/2.png"
var image3 = new Image()
image3.src = "http://idealbodyweights.com/wp-content/uploads/2013/05/3.png"
var image4 = new Image()
image4.src = "http://idealbodyweights.com/wp-content/uploads/2013/05/4.png"
</script>
</head>
<body>
<p><img src="images/pentagg.jpg" width="720" height="90" name="slide" /></p>
<script type="text/javascript">
var step=4;
function slideit()
{
document.images.slide.src = eval("image"+step+".src");
if(step<4)
step++;
else
step=1;
setTimeout("slideit()",2500);
}
slideit();
</script>
I rewrote a little of your code so it doesn't use eval and so the <img> is fetched using document.getElementById.
...
<script type="text/javascript">
var imgsrc = [
'http://idealbodyweights.com/wp-content/uploads/2013/05/1.png', // 0
'http://idealbodyweights.com/wp-content/uploads/2013/05/2.png', // 1
'http://idealbodyweights.com/wp-content/uploads/2013/05/3.png', // 2
'http://idealbodyweights.com/wp-content/uploads/2013/05/4.png' // 3
],
imgcache = [], i;
for (i = 0; i < imgsrc.length; ++i) { // cache images
imgcache[i] = new Image();
imgcache[i].src = imgsrc[i];
}
</script>
</head>
<body>
<p><img src="images/pentagg.jpg"
width="720" height="90"
name="slide" id="slide" /></p>
<script type="text/javascript">
var step = -1, // set so first will be 0
img = document.getElementById('slide'); // get the <img>
function slideit() {
step = (step + 1) % imgsrc.length; // loop over 0, 1, 2, 3 (or more)
img.src = imgsrc[step]; // set src by array index
setTimeout(slideit, 2500); // repeat in 2500 ms
}
slideit();// start
</script>
...
Is it what you want? :D
<p>
<a href="http://idealbodyweights.com/">
<img src="images/pentagg.jpg" width="720" height="90" name="slide" />
</a>
</p>
Related
Here is what I have as an image slider:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
<!-->
var image1 = new Image()
image1.src = "/image0.jpeg"
var image2 = new Image()
image2.src = "/image1.jpeg"
var image3 = new Image()
image3.src = "/image2.jpeg"
//-->
</script>
</head>
<body>
<img src="/research/logos/.jpeg" name="slide" width="400" height="400">
<script type="text/javascript">
<!--
var step = 1
function slideit() {
document.images.slide.src = eval("image" + step + ".src")
if (step < 3)
step++
else
step = 1
setTimeout("slideit()", 2500)
}
slideit()
//-->
</script>
</body>
</html>
I know how to put a form on top of an image from here:
https://www.w3schools.com/howto/howto_css_form_on_image.asp. A simple form where there is one button through which the viewer could send responses to would suffice.
Could anyone kindly shed light on how to combine the two? Thanks!
I intend to include a button in my traffic light code so that the user can click on it to activate the traffic light however, i am unsure of where to place it in my code.
This is my code:
<head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "traffic light_1.png"
var image2 = new Image()
image2.src = "traffic light_2.png"
var image3 = new Image()
image3.src = "traffic light_3.png"
var image4 = new Image()
image4.src = "traffic light_2.png"
</script>
</head>
<body>
<p><img src="traffic light_1.png" width="500" height="300" name="slide" /></p>
<script type="text/javascript">
var step=1;
function slideit()
{
document.images.slide.src = eval("image"+step+".src");
if(step<4)
step++;
else
step=1;
setTimeout("slideit()",3000);
}
slideit();
</script>
</body>
Place the button wherever you like inside the body tag.
<input type="button" name="start" value="Start/stop Traffic light" onclick="startStop()">
Remove the setTimeout and the slideit() initial call.
var step=1;
function slideit()
{
document.images.slide.src = eval("image"+step+".src");
if(step<4)
step++;
else
step=1;
}
And add the startStop function below and the working variable declaration.
var working;
function startStop() {
if (typeof working != 'undefined') working = clearInterval(working);
else working=setInterval("slideit()", 3000);
}
I have made a slideshow and I would like to know how to add a third image. Here is my code: (by the way image 3 stated below is the image I would like to insert in too the slideshow.
<script type="text/javascript">
var image1 = new Image()
image1.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/9889814_orig.jpg"
var image2 = new Image()
image2.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/1421690233.png"
var image3 = new Image()
image3.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/3920613_orig.jpg"
</script>
</head>
<body>
<img src="" name="slide" id="slide"/>
<script type="text/javascript">
var step=1;
function slideit()
{
document.images.slide.src = eval("image"+step+".src");
if(step<2)
step++;
else
step=1;
setTimeout("slideit()",2500);
}
slideit();
</script>
You need to add a new var and add a +1 to your counter
<script type="text/javascript">
var image1 = new Image()
image1.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/9889814_orig.jpg"
var image2 = new Image()
image2.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/1421690233.png"
var image3 = new Image()
image3.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/3920613_orig.jpg"
var image4 = new Image()
image4.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/3920613_orig.jpg"
</script>
</head>
<body>
<img src="" name="slide" id="slide"/>
<script type="text/javascript">
var step=1;
function slideit()
{
document.images.slide.src = eval("image"+step+".src");
if(step<3)
step++;
else
step=1;
setTimeout("slideit()",2500);
}
slideit();
</script>
Also i do recommend using an array, will make your code much cleaner and understandable
To the script scope add this same all others:
var image4 = new Image()
image4.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/3920613_orig.jpg"
The code: document.images.slide.src = eval("image"+step+".src");
will take it automaticly, because it's taking all your Image() objects in this HTML
<!-- with thanks to http://stackoverflow.com/questions/25407926/spawn-random-images-
in-canvas-in-javascript-->
<!--http://www.freesfx.co.uk/download/?type=mp3&id=11028
--audio loader--
http://stackoverflow.com/questions/18826147/javascript-audio-play-on-
click-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Street</title>
<script type="text/javascript">
var can, ctx;
var sprite = new Array();
var counter = 0;
var rot = 0;
var centerX = -320;
var centerY = -170;
var sprite = new Array(id); // Array to hold the filenames
function init() {
can = document.getElementById("can");
ctx = can.getContext("2d");
// get images into array
sprite[0] = document.getElementById("b1");
sprite[1] = document.getElementById("b2");
sprite[2] = document.getElementById("b3");
sprite[3] = document.getElementById("b4");
// draw lights out
draw();
// wait 3 sec, then begin animation
var t = setTimeout(light, 30);
}
function light() {
var wait = 600;
counter++;
if (counter == 4) {
counter = 0;
wait += (Math.random() * 1500);
rot += .01;
}
draw();
setTimeout(light, wait);
}
function draw() {
ctx.clearRect(0, 0, can.width, can.height);
ctx.save();
ctx.translate(can.width / 2, can.height / 2);
ctx.drawImage(sprite[counter], centerX, centerY);
ctx.restore();
}
function choseRandom(range) {
if (Math.random)
return Math.round(Math.random() * (range-1));
else {
var now = new Date();
return (now.getTime() / 1000) % range;
}
}
var choice = choseRandom(id);
</script>
</head>
<body onload="init()">
<audio id="Mp3Me" autoplay autobuffer controls>
<source src="au1.mp3">
<source src="au1.ogg">
</audio>
<img id="b1" style="display:none" src="1.png" >
<img id="b2" style="display:none" src="2.png" >
<img id="b3" style="display:none" src="3.png" >
<img id="b4" style="display:none" src="4.png" >
<canvas class="canvas" id="can" width="640" height="350" style=" border:1px solid #6F2E0D; ">
</canvas>
<script>
function play(){
var audio = document.getElementById("audio");
audio.play();
}
</script>
<input type="button" value="PLAY" onclick="play()">
<audio id="audio" src="door.mp3" ></audio>
<div id="container"></div>
<script language="JavaScript">
document.writeln('<td' + '><img src="'
+ ranimage[choice] + '" height="180" width="160" border="0" ><' +
'/td>');
</script>
<div id='container'>
<img id = "image2" src='door.png' />
</body>
</html>
The above code works with thanks to stack overflow.
Basically at the moment this code displays images in sequence non randomly, it uses the array to fetch them, and show them. The code then regulates the speed of the image display. There is also a sound player, and a button with a sound.
I managed after some considerable searching to animate a simple sequence of png files. However I have been trying to ad start stop button and a math random function (preferably the music on-click would start everything going).
I want to add a random function to the array,so that it displays images randomly. however the best I could do was, not to brake the code, or to get is to speed up the animation. Can some one please modify my code to add these functions or please point me to some place that would help.
The randomized array would be really useful.
Demo: http://jsfiddle.net/techsin/dtz0yj4y/
Code
function shuffle (arr) {
arr.forEach(function(e,i){
var rand = ~~(Math.random()*(arr.length-1));
arr[i] = arr[rand];
arr[rand] = e;
});
}
var myArr = [1,2,3,4,5];
shuffle(myArr); //myArr is now shuffled!
Example...
(there was a mistake, updated)
For example,
var array = [1,2,3,4,5]
for(i=0; i<array.length;i++){
var dist = Math.floor( Math.random() * array.length )
var swp = array[i]
array[i] = array[dist]
array[dist] = swp
}
console.log(array) //=> shuffled
This code is a automatic slideshow and i want to make it so when you click next it goes to the next image and back to go to the previous image
My current code:
<head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "http://www.adactushousing.co.uk/images/upload/coverImage/Local%20Offer%20CCH.jpg"
var image2 = new Image()
image2.src = "http://www.northantspfg.co.uk/resources/uploads/news/wordal13-021142.JPG"
var image3 = new Image()
image3.src = "http://hmstack.files.wordpress.com/2011/07/swimming-for-the-disabled.jpg"
var image4 = new Image()
image4.src = "http://www.northantspfg.co.uk/resources/uploads/news/HiResLocalOffer13-041205.jpg"
</script>
</head>
<img src=\"images/pentagg.jpg\" width=\"500\" height=\"300\" name=\"slide\" /></p>
<script type=\"text/javascript\">
var step=1;
function slideit()
{
document.images.slide.src = eval(\"image\"+step+\".src\");
if(step<4)
step++;
else
step=1;
setTimeout(\"slideit()\",2500);
}
slideit();
</script>
You call the function slideit() on page load, this is the reason that this work automaticly, do that, it's should work:
<button onclick="slideit()">Next image</button>
<script type=\"text/javascript\">
var step=1;
function slideit()
{
document.images.slide.src = eval(\"image\"+step+\".src\");
if(step<4)
step++;
else
step=1;
}
</script>