Making a Function Produce Different Values in HTML - javascript

I am doing a web development course, and I currently need to implement a script into my webpage using JavaScript. I found a script I would like to use here:
http://www.java-scripts.net/javascripts/Automatically-Changing-Slide-Show-Script.phtml
Basically, it changes the images automatically.
<head>
<script>
/*
JavaScript Image slideshow:
By Website Abstraction (www.wsabstract.com)
and Java-scripts.net (www.java-scripts.net)
*/
var slideimages=new Array()
var slidelinks=new Array()
function slideShowImages(){
for (i=0;i<slideShowImages.arguments.length;i++){
slideImages[i]=new Image();
slideImages[i].src=slideShowImages.arguments[i];
}
}
function goToShow(whichLink){
if (!window.winslide||winslide.closed){
winslide=window.open(slideLinks[whichLink])
}else{
winslide.location=slideLinks[whichLink]
winslide.focus()
}
}
</script>
</head>
<body>
<!-- For reference, my actual code is
<a href="stagingandevents.html"/>
<img src="pics/main/stagingandevents.jpg" alt="Staging and Events"
name = "slide" width="300px" height="312"/>
</a>
-->
<!-- Basically, I want two of the following image rotatations, but each
link with different images. -->
<a href="javascript:gotoshow()"><img src="img1.gif" name="slide">
</a>
<script>
//configure the paths of the images, plus corresponding target links
slideshowimages("img1.gif", "img2.gif", "img3.gif")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000
var whichlink=0
var whichimage=0
function slideIt(){
if (!document.images){
return
}
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichImage<slideImages.length-1) {
whichImage++;
} else {
whichImage=0;
} setTimeout("slideIt()",slideShowSpeed);
}
slideIt();
</script>
</body>
The code provided in the link is very old and deprecated, so I updated it a little. The slideShowImages() function is where the desired images are stored, but I don't know how to go about changing those values for each link!
I have tried several different things to get each link to have its own set of rotating images. As I am new to Javascript and HTML also, I really do not know how to go about this.

The code to change the images and links is here
slideshowimages("img1.gif", "img2.gif", "img3.gif")
slideshowlinks("http://wsabstract.com", "http://dynamicdrive.com", "http://java-scripts.net")
You just need to insert your own pictures and links for those pictures.
slideshowimages("images/myFirstImage.gif", "images/mySecondImage.gif", "images/myThirdImage.gif")
slideshowlinks("http://myfirstimagelink.com", "http://mysecondimagelink.com", "http://mythirdimagelink.net")

Related

Multiple javascript on the same page?

First of all I'm using wordpress with elementor plugin and the accordion feature.
I've got a code of video player:
<div id="player_div"></div><script src="https://lnaff.pl//API_VIDEO/LOCKER/js.js"></script><script> var ustawienia = {element_id:"player_div",
wysokosc:"455",
szerokosc:"800",
skin:"1",
czas_blokady:"19",
dlugosc_filmu:"2589",
video_url:"http://androidapkmodpro.com/wp-content/uploads/2020/01/Intro.mp4",
video_img:"https://i.imgur.com/YvKvkYL.png",
stream:"0",
programy_url:["https://leadnet.pl/p_uri/q6pYwlgb27QyvVjdPke1/x1vo6wa/?parametr=",],
player_button:["https://i.imgur.com/ACzzOnz.png",],
}; LEADNETWORK_generuj_player(ustawienia);</script>
I need to put in on several places on the same page. When I tried just multiple copy->paste, only in one place is showing. Is it possible? Any advices?
Please take a look at first line:
<div id="player_div"></div><script src="https://lnaff.pl//API_VIDEO/LOCKER/js.js"></script><script> var ustawienia = {element_id:"player_div",
It says basically that the video is put into a div with id=player_div due to element_id:"player_div". If you change the first line to something like:
<div id="my_second_video_placeholder"></div><script src="https://lnaff.pl//API_VIDEO/LOCKER/js.js"></script><script> var ustawienia = {element_id:"my_second_video_placeholder",
it's highly probable that it would work.
If you copy and paste this code in multiple locations you will load the code and declare the same variables twice, which for Javascript won't work. The "ustawienia" variable is also pointing to the player_div, and with HTML id's this will only find the first one.
<script src="https://lnaff.pl//API_VIDEO/LOCKER/js.js"></script><!-- only include once -->
<div id="player_div1"></div> <!-- div for first video -->
<div id="player_div2"></div> <!-- div for second video -->
<script>
var video1 = {element_id:"player_div1",
wysokosc:"455",
szerokosc:"800",
skin:"1",
czas_blokady:"19",
dlugosc_filmu:"2589",
video_url:"http://androidapkmodpro.com/wp-content/uploads/2020/01/Intro.mp4",
video_img:"https://i.imgur.com/YvKvkYL.png",
stream:"0",
programy_url:["https://leadnet.pl/p_uri/q6pYwlgb27QyvVjdPke1/x1vo6wa/?parametr=",],
player_button:["https://i.imgur.com/ACzzOnz.png",],
};
var video2 = {element_id:"player_div2",
wysokosc:"455",
szerokosc:"800",
skin:"1",
czas_blokady:"19",
dlugosc_filmu:"2589",
video_url:"http://androidapkmodpro.com/wp-content/uploads/2020/01/Intro.mp4",
video_img:"https://i.imgur.com/YvKvkYL.png",
stream:"0",
programy_url:["https://leadnet.pl/p_uri/q6pYwlgb27QyvVjdPke1/x1vo6wa/?parametr=",],
player_button:["https://i.imgur.com/ACzzOnz.png",],
};
LEADNETWORK_generuj_player(video1);
LEADNETWORK_generuj_player(video2);
</script>
Now I've not used the lead network video player, but this should work without issue. For each new video, you would need to create a new target DIV tag and a new video variable in the script section.
Hope this helps.

Convert a line of text generated in a javascript file into a clickable link in HTML

Sorry for the incredibly lame question, but as a brand new programmer all the answers I've found while searching all day are for other problems not specific to me so I decided I'd post about it.
I have taken it upon myself to convert a sample "Random Quote Generator" program I found into a small web based app that can produce random links at the touch of a button, but as I soon found out just replacing the example quotes with the links of my choice only produced normal un-clickable text.
I have tried many things relating to messing with the div's and the id tags but nothing works for me.
My code for the html is as follows:
<html>
<head>
<title>Simpsons Episode Generator</title>
</head>
<body>
<h1>Simpsons Episode Generator</h1><br>
<img src="https://vignette2.wikia.nocookie.net/simpsons/images/9/97/Mr_Burns_-_the_box.jpg/revision/latest?cb=20121215235014" alt="Mr Burns box">
<div id="linkDisplay">
<!-- Link will pop up here -->
</div>
<!-- Button to call the javascript and prduce a link -->
<button onclick="newLink()">New Episode</button>
<!-- javascript declared -->
<script src="javascript.js"></script>
</body>
</html>
So as you can see, it just calls the javascript to run the randomiser then prints the result.
The javascript is as follows:
//Links To Episodes
var links = [
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-1/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-2/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-3/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-4/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-5/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-6/'
];
//Select 1 Link at random and push it to the HTML
function newLink() {
var randomLink = Math.floor(Math.random() * (links.length));
document.getElementById('linkDisplay').innerHTML = links[randomLink];
}
All i want is to just make the click the HTML is receiving after the button is pressed to be clickable.
Thanks for reading and sorry for asking such a simple sounding question but i really have been looking all day how to do it by myself...
If you want to navigate to that URL, you don't need to "click the link", you can just change the location of the window:
window.location.href = links[randomLink];
If you want to make a link to that location, so people can click it, make that <div> an <a>
<a id="linkDisplay" href='#' />
(the # means it will just go to the top of the page) and then update the href as needed:
document.getElementById('linkDisplay').href = links[randomLink];
You need to inject an anchor tag into the HTML to allow users to be able to click on a random link
//Links To Episodes
var links = ['http://kisscartoon.so/episodes/the-simpsons-season-1-episode-1/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-2/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-3/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-4/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-5/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-6/',]
//Select 1 Link at random and push it to the HTML
function newLink() {
var randomLink = links[Math.floor(Math.random() * (links.length))];
document.getElementById('linkDisplay').innerHTML = ''+randomLink+'';
}
<div id="linkDisplay">
<!-- Link will pop up here -->
</div>
<!-- Button to call the javascript and prduce a link -->
<button onclick="newLink()">New Episode</button>

How to replace multiple images with Javascript and change back

I've been working on trying to get these buttons to change when clicked - which now works, but now I need them to toggle between the on and off states when the user clicks (so they can turn the buttons on and off). I'm sure this is an easy fix, but I'm new to Javascript and I don't have anyone to bounce ideas off of.
<html>
<head>
<script type="text/javascript">
function changeimage(img, new_src)
{
var cur_src = img.src.substring(img.src.lastIndexOf("/")+1);
if (cur_src == new_src)
{
img.src = img.old_src;
}
else
{
img.old_src = cur_src;
img.src = new_src;
}
}
</script>
</head>
<body>
<img onclick="changeimage(this, 'images/buttonA_on.png')" src="images/buttonA_off.png" />
<img onclick="changeimage(this, 'images/buttonB_on.png')" src="images/buttonB_off.png" />
<img onclick="changeimage(this, 'images/buttonC_on.png')" src="images/buttonC_off.png" />
<img onclick="changeimage(this, 'images/buttonD_on.png')" src="images/buttonD_off.png" />
<img onclick="changeimage(this, 'images/buttonE_on.png')" src="images/buttonE_off.png" />
<img onclick="changeimage(this, 'images/buttonF_on.png')" src="images/buttonF_off.png" />
</body>
</html>
Much thanks!
When I started using JavaScript I wasted a bunch of time trying to do things that other libraries could easily take care of for me. A few months after that I discovered jQuery which has drastically reduced the amount of time I spend on front-end projects. All you have to do is include the jQuery file in an html project and you're good to go.
In jQuery, you can toggle a class on and off with one line. it looks something like this:
$('.toggleimage').toggleClass('on');
In the above example, '.toggleimage' is just a class I gave to a div, toggleClass is the jQuery command, and 'on' is the name of the class I want to toggle. This probably seems like greek right now, but I recommend going through codeschool's jQuery tutorials to get caught up. If you're thinking of doing serious web development... it's a crucial tool. Here is the full code:
link to full code on my Gist
In order to make it work, make sure you have the right file structure. Create a folder, then create the html file there. In addition, create three subfolders (one for css, one for images, one for scripts). The css folder holds your style.css, the images folder holds mario.jpg, and the scripts folder contains your jQuery file. You can substitute in any image you want, just make sure the changes are applied to style.css.
function changeImg(img) {
if ( img.src.indexOf("_off") > 0 ) {
img.src = img.src.replace("_off","_on");
}
else {
img.src = img.src.replace("_on","_off");
}
}
it will work if you have 50x2 different images, named "imgName1_uw.jpg", "img1_moored.jpg", "img2_uw.jpg", "img2_moored.jpg", etc.
may be its helps you

Swap images with single button JavaScript function using %

Fellow Programmers! A wonderful afternoon (or whatever the case) to you!
With some assistance of fellow users I was able to manage getting an image to change back and forth between a second image every couple seconds. It's awesome! So I counted out some of the math with the % operator, and sure enough when the image first displays, I get the default broken link image of the browser, but after the 2 seconds everything goes as planned.
So begins this investigative experiment.
I decided instead of swapping automatically, lets make the swap with a button as to be able to investigate the page as long as I would like. But who want's to do the exact same thing again, why not learn another cool trick along the way. That trick is to display both of the images at the same time, such that when the button is clicked they swap places. Same math, different effect for the user. Isn't that awesome!
The goal:
display two images and below them one button. When the button is clicked the images are to swap places. The images that was on the left should be on the right, the one on the right ought now be on the left. Use no jQuery, this is after all a JavaScript experiment (and I have yet to learn much jQuery but I can't wait to get there!)
Browser error console messages:
Interestingly enough firefox give me nothing. I open the browser, load the page in it from VS 2012 clear the error conslole, refresh the page. And nothing.
In chrome (my default browser) however, I get a localhost pic src 404 not found.
I find this strange because this code is on a page that happens to have other code which references those same pictures and works fine. The 2 second auto img flip thing being some of that other code.
debugging:I'm to much of a noob to know what's going on with that. I get the basic Idea and looked into it some. On the VS site there's all this info about setting breaking points and running multiple instance of VS to do something with another engine. I will soon be on youtube to hammer that out. I apologize however, if there is some simple debug fix to this and I should have witnessed it. Hammering through my 2nd web class and that topic has not been covered :(
Here are articles that I found similar to my question.
This was helpful to see how they had set up the if else:
https://stackoverflow.com/questions/15671442/swap-image-with-onclick-not-responding
all in all that turned out to be more that I could read, clearly the writer is more advanced than I.
a second: javascript swap text block onclick anchor link a bit of an information overload I think. There was a lot going on with that, but I never managed to change any of my code after reading through it.
If your curious here is the VS article I briefly mentioned:
http://blogs.msdn.com/b/visualstudioalm/archive/2013/06/28/javascript-native-interop-debugging-in-visual-studio-2013.aspx
And here is my code:
<script type="text/javascript">
function swap_pics() {
var c = 1
//I had:
//var andy_arr = ["andy_white.jpg","andy_black.jpg"];
var andy_src1 = "andy_left.jpg";
var andy_src2 = "andy_right.jpg";
c = ((c + 1) % 2);
if (c == 0) {
//I was using an array which looked like:
// document.getElementById('andy_left').src = "andy_arr[0]";
// document.get ... _right').src = andy_arr[Math.abs(c-1)];
//0-1 abs = 1
//1-1 = 0, so It looks like it should now toggle.
document.getElementById('andy_left').src = andy_src1;
document.getElementById('andy_right').src = andy_src2;
}
else {
document.getElementById('andy_left').src = andy_src2;
document.getElementById('andy_right').src = andy_src1;
}
}
</script>
<div id="mini_lab_5">
<img src=""
id="andy_left"
height="100"
width="100"
/>
<img src=""
id="andy_right"
height="100"
width="100"
/>
<br />
<input type="button" value="Swap"
onclick="swap_pics();
"/>
</div>
Thanks for being a part of the community and making it great!
You could add the images directly to your img tags like this :
<img src="andy_left.jpg"
id="andy_left"
height="100"
width="100"
/>
<img src="andy_right.jpg"
id="andy_right"
height="100"
width="100"
/>
Then your images should appear by default in your page, if not your links to the images are not good.
Then you could replace your current swap_pics function with the following :
function swap_pics() {
var andy_left = document.getElementById('andy_left'),
andy_right = document.getElementById('andy_right'),
andy_left_src = andy_left.src,
andy_right_src = andy_right.src;
andy_left.src = andy_right_src;
andy_right.src = andy_left_src;
}
Here is a simple jsfiddle doing this: http://jsfiddle.net/X9YTP/
Here you go good luck.
<html>
<head>
<script type="text/javascript">
function switchImage () {
var imgleft = document.getElementById('image1'),
imgright = document.getElementById('image2'),
img_left_src = imgleft.src,
img_right_src = imgright.src;
imgleft.src = img_right_src;
imgright.src = img_left_src;
}
</script>
</head>
<body>
<div>
<img id="image1" src="./home-cat.jpg" />
<button id="butnum" onclick="switchImage();">Switch</button>
<img id="image2" src="./images.jpeg" />
</div>
</body>
</html>

JavaScript HTML: Image with hover function disappears

I am experiencing some problems with my javaScript hover function on two images. When the user hovers over the arrow image it should change into a hover-version of that image, and if the user clicks on it it should start another javascript function to expand/collapse the below tabs. Here is the live site. The problem is with the arrows on the right side below the navigation.
At first I tried doing this with only HTML code (onMouseOver and onMouseOut, and just load different image), but got a nasty bug where if the user hovered over the first arrow, then the second, and back to the first, then the second would completely disappear.
Now I tried with JavaScript instead, but now you can only see the first arrow, and that disappears if you hover to the right of it.
The annoying part is that it works perfectly fine from the local server, but not on the web server. I've not used much HTML/Javascript before, and never used JQuery. If this can be solved easily with something like that, I would be really grateful for some help on how to do so. I've read some solutions with CSS background, but don't think that would work because the image must work as a button as well?
Here is the JS code for changing the images
var images= new Array();
images[0] = "img/ArrowDown.png";
images[1] = "img/ArrowDownHover.png";
images[2] = "img/ArrowUp.png";
images[3] = "img/ArrowUpHover.png";
function DownChange()
{
document.getElementById("expandAll").src = images[1];
}
function DownGoBack()
{
document.getElementById("expandAll").src = images[0];
}
function UpChange()
{
document.getElementById("collapseAll").src = images[3];
}
function UpGoBack()
{
document.getElementById("collapseAll").src = images[2];
}
Here is the HTML code
<div id="collapse">
<img src="img/arrowDown.png" id="expandAll" onMouseOver="DownChange()" onMouseOut="DownGoBack()" onClick="openAll()"></img>
<img src="img/arrowUp.png" id="collapseAll" onMouseOver="UpChange()" onMouseOut="UpGoBack()" onClick="closeAll()"></img>
</div>
If it is working on your local machine, the problem isn't coming from your JS.
The problem I would guess is that your images are not correctly referenced on your web server. Try using explicit paths from the server root on both your local and remote machine, and try to have both machines mirror each other's folder structure.
img tag doesn't have any closing pair like < / img>. try this code
<div id="collapse">
<img src="img/arrowDown.png" id="expandAll" onMouseOver="DownChange();" onMouseOut="DownGoBack();" onClick="openAll();" />
<img src="img/arrowUp.png" id="collapseAll" onMouseOver="UpChange();" onMouseOut="UpGoBack();" onClick="closeAll();" />
</div>
if that doesn't work then try to find if the images are in the correct folder or the names of the images are correct.
Edit:
I used this code and working fine on mozilla firefox and IE 6 -
<script type="text/javascript">
<!--
var images= new Array();
images[0] = "img/ArrowDown.png";
images[1] = "img/ArrowDownHover.png";
images[2] = "img/ArrowUp.png";
images[3] = "img/ArrowUpHover.png";
function DownChange()
{
document.getElementById("expandAll").src = images[1];
}
function DownGoBack()
{
document.getElementById("expandAll").src = images[0];
}
function UpChange()
{
document.getElementById("collapseAll").src = images[3];
}
function UpGoBack()
{
document.getElementById("collapseAll").src = images[2];
}
-->
</script>
<div id="collapse">
<img src="img/arrowDown.png" id="expandAll" onMouseOver="DownChange();" onMouseOut="DownGoBack();" onClick="openAll();" />
<img src="img/arrowUp.png" id="collapseAll" onMouseOver="UpChange();" onMouseOut="UpGoBack();" onClick="closeAll();" />
</div>

Categories