I wrote a webpage that displays a slideshow of different images that users can look through. However, I need to write a function so if they click on a URL that says
http://www.slideshow.com/image3
The slideshow will automatically show "Image 3" in the slideshow when the page is loaded. I have researched this for days, trying to use AJAX, ASP, and various jQuery and .js files, but nothing I have researched seems to fit my purpose. Is there a simpler way to do this with just JavaScript?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slideshow</title>
<script type="text/javascript">
//preloading all the images into a cache
//to add more slides, add extra variable declarations
var img1 = new Image()
img1.src = "img/1.jpg"
var img2 = new Image()
img2.src = "img/2.jpg"
var img3 = new Image()
img3.src = "img/3.jpg"
var img4 = new Image()
img4.src = "img/4.jpg"
var img5 = new Image()
img5.src = "img/5.jpg"
var img6 = new Image()
img6.src = "img/6.jpg"
var img7 = new Image()
img7.src = "img/7.jpg"
var img8 = new Image()
img8.src = "img/8.jpg"
var img9 = new Image()
img9.src = "img/9.jpg"
var imgNum = 1
var x = 0
var width
//function that cycles through different images
function slideshow()
{
if (!document.images)
return
if (imgNum < 9) // <-- If you add or subtract images in the slideshow, you need to change this number to the amount of
imgNum++ //images in the slideshow so it will loop correctly.
else
imgNum=1
document.images.slide.src=eval("img" + imgNum + ".src")
}
//function that crops the slideshow image to the screen size and centers it
function crop()
{
if (document.getElementById("slide").width > screen.width)
{
width = document.getElementById("slide").width
width = -1*((width - screen.width)/2)
document.getElementById("slide").style.marginLeft= width +"px"
document.getElementById("slide").style.marginRight= width + "px"
}
}
//function that evaluates a number passed to it and returns the corresponding image in /img
function imgSelect(x)
{
imgNum = x
document.images.slide.src=eval("img" + imgNum + ".src")
}
//function that hides or shows the menu
function hide(object)
{
if (object.style.display=="none")
object.style.display="block"
else
object.style.display="none"
}
//function that changes the menu text from "hide menu" to "show menu" and vice versa
function menuChange(object)
{
if (object.innerHTML=="hide menu")
object.innerHTML="show menu"
else
object.innerHTML="hide menu"
}
//function that allows a link to do both the hide(object) function and the menuChange(object) function with once click
function doBoth(object1, object2)
{
hide(object1)
menuChange(object2)
}
</script>
</head>
<body onload="crop()">
<center>
<div style="background-color:#87D300; padding:5px;">
<a id="button" href="javascript:doBoth(document.getElementById('menu'),document.getElementById('button'))" style="color:#FFFFFF">hide menu</a>
</div>
</center>
<img src="img/logo.png"/>
<div id="title">
<h1 style="position:relative; top:-31px; right:-133px">Slideshow</h1>
</div>
<div id="menu" class="margin">
<h2>Designs</h2>
<ul>
<li>Splash Page:1</li>
<li>Splash Page:2</li>
<li>Splash Page:3</li>
<li>Splash Page:4</li>
<li class="new">Book: 1</li>
<li>Book: 2</li>
<li>Book: Rollover</li>
<li>Book: Clicked</li>
<li>Book: Clicked, no Email</li>
</ul>
</div>
</br>
<center>
<div id="mySlides" style="width:screen.width; overflow:hidden;">
<img src="img/1.jpg" onclick="slideshow()" id="slide"/>
</div>
</center>
</body>
</html>
Use a URL hash instead:
http://www.slideshow.com#image3
The value will be document.location.hash, which you can use for read/write. Any other manipulation of the URL will cause a navigation event.
Related
Using Javascript and HTML I need to create a timer to display the pictures every 3 seconds. I need to use the array to do this and keep the onclick available.
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title> Image Swapping</title>
<div id=getPhoto></div>
<script>
var images = ["image1.jpg", "image2.jpg", "image3.jpg", image4.jpg"];
function changeImage(newImage) {
var image = images[newImage];
newImage = document.getElementById("bigPic");
newImage.src = image;
}
var myTimer = setInterval(chose(), 3000);
var divVariable = document.getElementById("images");
function chose(){
var rand = Math.ceil(Math.random() * images.length);
}
document.getElementById('newImage').src = images[rand];
</script>
</head>
<body>
<div>
<img src="image1.jpg" id="bigPic" style="width:60%" />
</div>
<img src="image1.jpg" id="img1" onclick="changeImage(0)" />
<img src="image2.jpg" id="img2" onclick="changeImage(1)" />
<img src="image3.jpg" id="img3" onclick="changeImage(2)" />
<img src="image4.jpg" id="img4" onclick="changeImage(3)" />
</div>
</body>
</html>
You've got some learning to do... there's a lot of things wrong with your code:
a div in the head?
forgot a " in images array
overwriting param in changeImage is not a good idea
using () in setInterval will call the function immediately, and only once
chose() doesn't do anything
array index is 0-based (0-3 for images array) but you're rounding up your random number (1-4)
Open your browser console and check for errors.
You probably need something like this (not tested):
<script>
var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];
function changeImage( idx ) {
var newImage = document.getElementById("bigPic");
newImage.src = images[idx];
}
function chose(){
var rand = Math.floor(Math.random() * images.length);
changeImage(rand);
}
chose(); // call immediately
var myTimer = setInterval(chose, 3000);
</script>
I am trying to add an image as an element into my webpage. I am unable to do so. There are instructions on how to preview an image, but I was unable to find a solution.
What I want it to do is to add a div with an image into the webpage and keep loading it with different images. So after I add image 1, I would load image 2 under image 1 in the same webpage.
html body code:
<input type='file' id='getval' /><br/><br/>
<span onclick="readURL()" class="addBtn">Add</span>
<div id="myUL"></div>
javascript code:
<script type="text/javascript">
// grabs image
var file = document.createElement('image');
file.src = document.getElementById('getval').files[0];
// creates div & assigns id
var div = document.createElement('div');
div.id = 'item';
// adds file to div
file.type = 'image';
div.appendChild(file);
//adds item
document.getElementById("myUL").appendChild(div);
}
</script>
edit1*
I think adding the output of the code I want to display would be better inside the html document.
javascript generates html code inside document:
<div style="background-image":url("image");"><div>
You can use this script
count = 0;
function viewImage(){
var imagefile = document.querySelector('#image');
if (imagefile.files && imagefile.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var content = '<img id="temp_image_'+count+'" style="border: 1px solid; width: 107px;height:107px;" >';
document.querySelector('#all_images').innerHTML += content;
document.querySelector('#temp_image_'+count).setAttribute('src', e.target.result);
}; reader.readAsDataURL(imagefile.files[0]);
this.imagefile = imagefile.files[0];
count++;
}else{
console.log("Image not selected");
}
}
<div id="all_images">
</div>
<input id="image" name="image" type="file" onChange="viewImage()">
Here you go, although pay attention to the comment at line 3.
<script type="text/javascript">
var file = document.createElement("img");
file.setAttribute("src", document.getElementById('getval').files[0]); //You can use HTML5 File API here
file.setAttribute("height", "250");
file.setAttribute("width", "250");
var divTocreate = document.createElement('div');
divTocreate.id = 'item';
divTocreate.appendChild(file);
document.getElementById("myUL").appendChild(divTocreate);
</script>
I am trying to have the image disappear on mouse out. i have the image appear on mouse over but i want it to be hidden on mouse out. i have my current code below any help?
var fullpic = new Array(4);
for (var i=0;i<fullpic.length;i++)
fullpic[i] = new Image(515,385);
fullpic[0].src = "images/FrenchQuarter.jpg";
fullpic[1].src = "images/GoldenGateBridge.jpg";
fullpic[2].src = "images/NazarethBay.jpg";
fullpic[3].src = "images/TheAlamo.jpg";
function displayFull(i){
document.getElementById("img-cover").src=fullpic[i].src;
}
/*This is the function i have to make the image hidden */
function hideFull(i){
document.getElementById("img-cover").css.visibility=hidden;
}
var fullbanner = new Array(4);
for (var i=0;i<fullbanner.length;i++)
fullbanner[i] = new Image(468,60);
fullbanner[0].src = "images/banner1.gif";
fullbanner[1].src = "images/banner2.gif";
fullbanner[2].src = "images/banner3.gif";
fullbanner[3].src = "images/banner4.gif";
var n = 0;
window.addEventListener("load",showFull,false);
function showFull(){
setInterval("showPic()",3000);
}
function showPic(){
document.getElementById("banner").src=fullbanner[n].src;
n++;
if(n>3)
n=0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<link rel = "stylesheet" type = "text/css" href = "style.css">
<script src = "function.js"></script>
</head>
<body>
<div id = "banner-wrapper">
<img id = "banner" src = "images/banner1.gif">
</div>
<div id = "thumbs">
<img class = "thumb-img" src = "images/FrenchQuarter_small.jpg" onmouseover="displayFull(0)" onmouseout= "hideFull(0)">
<img class = "thumb-img" src = "images/GoldenGateBridge_small.jpg" onmouseover="displayFull(1)" onmouseout= "hideFull(1)">
<img class = "thumb-img" src = "images/NazarethBay_small.jpg" onmouseover="displayFull(2)" onmouseout= "hideFull(2)">
<img class = "thumb-img" src = "images/TheAlamo_small.jpg" onmouseover="displayFull(3)" onmouseout= "hideFull(3)">
</div>
<div id = "main-img">
<img id = "img-cover" src = "">
</div>
</body>
</html>
Check the error console. You'll see:
ERROR: {
"message": "ReferenceError: hidden is not defined",
"filename": "http://stacksnippets.net/js",
"lineno": 61,
"colno": 5
}
hidden is not defined
Because it's supposed to be a string. Put the quotes..
function hideFull(i){
document.getElementById("img-cover").style.visibility='hidden';
}
(Before anything, you should know that my JS skills are very basic)
I'm trying to make my own "rapid sorting" from the game "BrainWars" on smartphones.
Basically what it should do is:
Step 1: randomise one of the 3 pictures available and show the image.
Step 2: if this image is the same as the last one ( do something )
Step 3: If this image is NOT the same as the last one ( do something else )
For now , I have a folder named "images" with 3 png's inside it.
So far I have this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
var random_images_array = ['1.png', '2.png', '3.png'];
var lastImage = "";
function getRandomImage(imgAr, path) {
path = path || 'images/'; // Default path hier opgeven
var num = Math.floor(Math.random() * imgAr.length);
var img = imgAr[num];
var imgStr = '<img src="' + path + img + '" alt = "">';
document.write(imgStr);
document.close();
}
$(function() {
$('#btn').click(function() {
getRandomImage(random_images_array, 'images/');
setTimeout(function() {
getRandomImage(random_images_array, 'images/');
}, 2000);
});
});
</script>
</head>
<body>
<button id="btn">GO</button>
</body>
</html>
How can one achieve this ?
What about creating a lastImage variable...
var random_images_array = ['1.png', '2.png', '3.png'];
var lastImage="";
Then:
var img = imgAr[num];
if (img==lastImage) {do something}
else {lastImage=img; ... document.write(imgStr);}
I'm just learning some java. I am currently learning if, else statements.
In the game I am creating, the user picks a number between 0 and 10 and puts it into an input box. If correct, the image on screen changes to one picture, if incorrect, it switches to a different picture. However, I cannot seem to get the images to change at all. I've tried a few different ways of coding; I'm currently using an img array. However, when I do the code I receive an ObjectHTMLImageElement error.
Here is my current code:
<div id="top">
<h1>Pie in the Face</h1>
<p>Guess how many fingers I'm holding up between 0 and 10.
<br /> If you guess correctly, I get a pie in the face.
<br /> If you guess wrong, you get a pie in the face.</p>
<input id="answer" />
<button id="myButton">Submit</button>
</center>
</div>
<div id="container">
<div id="image"></div>
<div id="manpie"></div>
<div id="girlpie"></div>
</div>
<script type="text/javascript">
var x = Math.random();
x = 11 * x;
x = Math.floor(x);
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = "images/manpie2.jpg";
imgArray[1] = new Image();
imgArray[1].src = "images/girlpie2.jpg";
document.getElementById("myButton").onclick = function() {
if (x == document.getElementById("answer").value) {
document.getElementById("image").innerHTML = imgArray[0];
// what I had document.getElementById("image").innerHTML=imgArray[0];
} else {
document.getElementById("image").innerHTML = imgArray[1];
}
}
</script>
</body>
I have also tried using lines such as: document.getElementById("image").innerHTML=document.getElementById("manpie");
and then nothing works. Here is a link to the "live" site it's on.
http://176.32.230.6/mejorarcr.com/
any help would be appreciated. Thank You!
You have to change the innerHTML value in your code:
if (x==document.getElementById("answer").value) {
document.getElementById("image").innerHTML='<img src="'+imgArray[0].src+'" />';
// what I had document.getElementById("image").innerHTML=imgArray[0].src;
} else {
document.getElementById("image").innerHTML='<img src="'+imgArray[1].src+'" />';
}
DEMO or this
change:
document.getElementById("image").innerHTML=imgArray[0];
to:
document.getElementById("image").setAttribute("src", imgArray[0]);
make sure imgArray[0] is the actual image path:
imgArray[0]="images/manpie2.jpg";
imgArray[1]="images/girlpie2.jpg";