How to replace multiple images with Javascript and change back - javascript

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

Related

How to get all the subfolders name within a ROOT Folder and create HTML Content?

I am working on a school project and I have to do a static digital menu website for a bar. Because it's static, I used JavaScript where necessary. Anyways, I divided everything into groups, each group is represented by a card with an image and a button. Here is an example:
This is the source code for a card:
<body>
<div id="cards">
<div class="card">
<img src="/Resources/Food.png" class="card_image">
<a href="javascript:showMenu()" class="button">
<p>FOOD</p>
</a>
</div>
</div>
</body>
As you can see, in order to add a single card, I had to manually write the whole structure of a card in the second div, with the class="card".
BUT, I must create it dynamically based on the structure of the subfolders inside the Root folder witch is called Resources, here's a scheme:
In order to achieve this I started using JavaScript since it's the only possible way I think:
<script type="text/javascript">
function showMenu()
{
var content = `
<div class="card">
<img src="/Resources/Food.png" class="card_image">
<a href="javascript:showMenu()" class="button">
<p>FOOD</p>
</a>
</div>`;
document.querySelector("#cards").innerHTML = content;
}
</script>
So, now that I've expressed what I need to do is this: in the JavaScript code you can see that the card was generated manually anyways but I need the content to generate based on the folder structure I have stored locally. In other words, the whole script should take in input the name/path of the ROOT folder which is called "Resources" and from there it should generate the groups based on it's content. For example, if I click the button on the FOOD Card, then it should delete the FOOD and DRINKS Cards and only add the Vegetables Card in this case...I know it sounds complicated but at the end of the day the problem lies in getting the subfolder names, and since the image has the same name of the subfolder, apply it on the <img> tag and also on the button. All this, using JavaScript. If you know that some other language would work much better I'm open to suggestions, but I built the entire website until now only using JavaScript.
Anyways, I tried to express the problem the best I could so if something is unclear, I can easily modify the post if needed. Thanks in advance!
You could put the image data into a JSON object, then bind related processing functions according to the requirement.

Making a Function Produce Different Values in HTML

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")

javascript change Image by clicking thumbnail

I am a newbie in javascript and tried a lot of things for hours, but nothing worked.
I will change a big imgage by clicking on a thumbnail.
Untill now I got following script. Not much really... :-(
<script type="text/javascript">
function changeImage() {
document.getElementById("img").src="img/upload/test1.jpg";
}
</script>
<img id="img" name="change" src="img/upload/test.jpg">
<img src="img/thumbnail/test.jpg" alt="" id="imgClickAndChange" onclick="changeImage()">
<img src="img/thumbnail/test1.jpg" alt="" id="imgClickAndChange" onclick="changeImage()">
All big picture are under src"img/upload/xxx.jpg" and all thumbnails under src="img/thumbnail/xxx.jpg". When I click the thumbnail, it have to change the big picture and it have to give the parameter in the javascript. Like onclick="changeImage(xxx.jpg).
The problem is every page have other pictures. I get them from a database. So the name of the picture is like a variable. I hope you understand. It is hard for me to explain. :-(
Thanks for your help in advance.
Greets Yanick
Pass the image parameter to the function like,
function changeImage(image) {
document.getElementById("img").src=image;
}
<img src="img/thumbnail/test.jpg" alt="" id="img"
onclick="changeImage('img/upload/test1.jpg')" />
Keep ids unique. DOM elements "must" possess unique IDs for all practical reasons.
Though you could do an inline onclick, a better way to proceed with it is something as follows.
Assuming you have the images generated from some templating library either on the client or from the server, add data attributes with the image sources and a common class to all of these elements right there and add an event listener from your Javascript bound to elements matching the class and picking up the data attribute to replace the image source.

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 if url then image

Hello,
I do not know very much about javascript, not much at all to be specific, and i'm french (this means sorry for my english).
since i don't know a lot about html and everything, i'm just changing the css and html on tumblr existing theme (i know it's not the very best solution but it's working for me and i'm improving slowly my knowledge about this world)
so in tumblr you have several pages already created like the one that regroup all your post with the same tag, this page is called http://myblog.tumblr.com/tagged/mytag
Here is my problem : i would like to change the header for each of these pages !
I don't have access to the php code (wich seemed to be the best solution...)
here is when i have one header :
<body>
<div id="header">
<img src="{image:Header}"/>
</div>
</body>
i have code the css so that my header looks fine to me
to answer my problem, i tried javascript :
<body>
<div id="header">
<script>
var image = new Array("{image:Header}", "http://static.tumblr.com/my-other-image.jpg")
if(document.URL.indexOf("/") >= 0) {
image.src = "{image:Header}"
}
if(document.URL.indexOf("/tagged/mytag1") >= 0) {
image.src = "http://static.tumblr.com/my-other-image.jpg"
}
</script>
</div>
</body>
obviously it didn't work, and you may be laughing watching what i wrote...
since i only have 3 or 4 pages i'd like to change, i'm ok with the "dirty solution" with too much code, and i just think that i need an "else" for all the other pages !
Thank you for telling me how to make it work and sorry to take some of your time for a simple thing like this wich may not be even possible. and sorry for talking about my life in my terrible english.
Thank you
you must create a image element, then append to the dom:
<body>
<div id="header"></div>
<script>
var uris = ["{image:Header}", "http://static.tumblr.com/my-other-image.jpg"];
var image = document.createElement("img");
if (document.URL.indexOf("/") >= 0) {
image.src = uris[0]
}
if (document.URL.indexOf("/tagged/mytag1") >= 0) {
image.src = uris[1]
}
document.getElementById("header")
.appendChild(image);
</script>
</body>

Categories