I have 10 images of an empty black square. Below them, I have 10 black boxes labeled 0-9. My goal is to allow the user to click on a numbered square, and select which blank square he wants to place it.
The user must be able to do this with every numbered square. (I have a math problem that I want the user to solve by clicking the images and put them where they need to go to solve the equation). My train of thought was to obtain the image clicked by using getElementId and storing it into a variable, and continue the process.
I'm not sure if this is possible. My thinking was "Click image, identiy what was clicked, store it in a temporary variable holder, and swap with the second (blank) image clicked).
My HTML:
These are the blank images 0-9:
<img src="blank.jpg" id="blank0" onclick="swap()" width="30" height="30"> </button>
<img src="blank.jpg" id="blank1" onclick="swap()" width="30" height="30"> </button>
etc. etc.
These are the numbered images:
<img src="0.jpg" id="0" onclick="" width="30" height="30"> </button>
<img src="1.jpg" id="1" onclick="" width="30" height="30"> </button>
etc.
Try something like this:
(top of all JS):
var holder = '';
var holderId = '';
Then add this to numbered images:
<img src="0.jpg" id="number0" onclick="setHolder(this.src,this.id)" width="30" height="30">
And this to blank:
<img src="blank.jpg" id="blank0" onclick="swapHolder(this)" width="30" height="30">
Then create the two functions like this:
function setHolder(src,id) {
holder = src;
holderId = id;
}
function swapHolder(img) {
img.src = holder;
document.getElementById(holderId).src = 'blank.jpg';
holder = '';
holderId = '';
}
Related
Im trying to figure out, on how to replace the folder path and not the img.
The folder names are always the same, they're are not dynamic. If i click button "one", it should change all my images folder paths to "dist/one/", the same logics goes for the two others.
<button id="one" type="button">This should change the path to "dist/one/"</button>
<button id="two" type="button">This should change the path to "dist/two/"</button>
<button id="three" type="button">This should change the path to "dist/three/"</button>
<img src="dist/one/rocket.png" alt="" />
<img src="dist/two/rocket.png" alt="" />
<img src="dist/three/rocket.png" alt="" />
I'd use a data attribute for this. Store a template for the image src and a path value for each button, then update the image src values accordingly for each button click...
var buttons = document.querySelectorAll("button");
var images = document.querySelectorAll("img");
[].forEach.call(buttons, function(button) {
button.addEventListener("click", function() {
var path = this.getAttribute("data-path");
[].forEach.call(images, function(img) {
var src = img.getAttribute("data-src-template").replace("{path}", path);
img.src = src;
console.log(img.src);
});
});
});
// intialize the image...
document.querySelector("#one").click();
<button id="one" type="button" data-path="dist/one">This should change the path to "dist/one/"</button><br/>
<button id="two" type="button" data-path="dist/two">This should change the path to "dist/two/"</button><br/>
<button id="three" type="button" data-path="dist/three">This should change the path to "dist/three/"</button><br/>
<img data-src-template="{path}/rocket.png" alt="" />
<img data-src-template="{path}/rocket.png" alt="" />
<img data-src-template="{path}/rocket.png" alt="" />
This gives you what you need as well as being flexible if the path format ever changes, since everything you need is defined in the html and the script never needs to change.
For example, if you decided to move the images into another subfolder you could just change the image tag and it would still work...
<img data-src-template="newSubFolder/{path}/rocket.png" alt="" />
I believe you can do that by creating script.
If you assign ID to each of the <img> tags you can then do something like:
document.getElementById('exampleID').innerHTML="<src="new_path">";
Eventually put each <img> tag in DIV
<div id=someid>
<img src="dist/one/rocket.png" alt="" />
</div>
Script:
document.getElementById('someid').innerHTML="<img src="new_path"/>";
I did not test it but the answer should be really close to this.
I hope this was helpfull.
On my website I have three images 1.png, 2.png and 3.png. When I click on 1.png, I want the animated gif 1a.gif to be loaded and shown/updated in the img tag located in <div id="container">. When I click on 2.png, 2a.gif should be displayed (while 1a.gif vanishes) and so on... This is my code:
<html>
<body>
<div>
<img src="1.png" onclick="document.getElementById('img').src = '1a.gif'" />
<img src="2.png" onclick="document.getElementById('img').src = '2a.gif'" />
<img src="3.png" onclick="document.getElementById('img').src = '3a.gif'" />
</div>
<div id="container">
<img id="img" src="1a.gif" />
</div>
</html>
</body>
It is working, however unreliable (tested with firefox and chrome)! When I refresh the html page and click on 1.png, than on 2.png ... suddendly at one point only the first frame of the animated gif is shown. I have to click on the same image (1,2 or 3.png) again in order to make the gif run. Why? I am looking for a light weight javascript solution without jquery. I am just asking myself why the gif is not played properly once I click on the image.
As a side note: It would be nice to show a loading image while the gif (5 MB) is loading. I failed to achive that using css:
#container {background:url('loading.png') no-repeat; }
In this case the loading image doesn't show up at all. Probably because I am updating directly from one (e.g. 1a.gif) to another (e.g. 2a.gif).
Showing it right before loading the gif did not help as well:
<img src="1.png" onclick="document.getElementById('img').src = 'loading.png';
document.getElementById('img').src = '1a.gif'" />
There are many ways of implementing this kind of thing, but to keep in line with how you're doing it, you'll want to hook into the onload event of the img.
Note that in this snippet, I don't have access to your GIFs, so I'm using the dummyimage.com service, which is pretty fast, so you don't see the "loading" for very long.
window.onload = function() {
var img = document.getElementById('img');
var container = document.getElementById('container');
var showImage = function showImage() {
img.style.display = "inline";
container.style.backgroundImage = "";
};
img.addEventListener('load', showImage);
img.addEventListener('error', showImage);
var thumbs = document.getElementsByClassName('thumb');
for (var i = 0, z = thumbs.length; i < z; i++) {
var thumb = thumbs[i];
var handler = (function(t) {
return function clickThumb() {
container.style.backgroundImage = "url('https://dummyimage.com/500x500/000/fff.gif&text=loading')";
img.style.display = "none";
img.src = t.dataset['image'];
};
})(thumb);
thumb.addEventListener('click', handler);
}
};
<div>
<img src="1.png" class="thumb" data-image="https://dummyimage.com/500x200/000/fff.gif" />
<img src="2.png" class="thumb" data-image="https://dummyimage.com/200x200/000/fff.gif" />
<img src="3.png" class="thumb" data-image="https://dummyimage.com/500x500/000/fff.gif" />
</div>
<div id="container">
<img id="img" class="main" />
</div>
This happens bacause the second img is not loaded yet!
I suggest you to put the 2 img in 2 different divs and the use javascript to hide/show the entire div!
I have 4 thumbnails to the left, and when I click on one of them I waht to show a large picture to the right on the screen.
My problem is, that for some reason it shows 8 small thumbnails (first 4 and then 4 again). The first four ones are not clickable. The last four ones are clickable and correctly shows the larger image.
So, where does the first four thumbnails come from, and how do I get rid of them?
I have a transparant image (Picture.gif) that is the larger picture that is changed and shows the bigger versions of the thumbnails.
My html:
<body onLoad="init()">
<table class="planes">
<tr>
<td>
<ul>
<div id="thumb">
<li><img src="img/Plane1.jpg" alt="Plane1"></li>
<li><img src="img/Plane2.jpg" alt="Plane2"></li>
<li><img src="img/Plane3.jpg" alt="Plane3"></li>
<li><img src="img/Plane4.jpg" alt="Plane4"></li>
</div>
</ul>
</td>
<td>
<img class="pic" id="main" src="img/Picture.gif" alt="">
</td>
</tr>
</table>
My javascript:
var images= new Array('img/Plane1.jpg', 'img/Plane2.jpg', 'img/Plane3.jpg', 'img/Plane4.jpg');
var imgList = new Array();
function init()
{
for (var i=0; i<images.length; i++)
{
imgList[i] = new Image();
imgList[i].src = images[i];
document.getElementById('thumb').appendChild(imgList[i]);
imgList[i].addEventListener("click", swap, false)
}
}
function swap(evtObj)
{
var imgfile = evtObj.target.getAttribute('src');
var mainTag = document.getElementById('main');
mainTag.src = imgfile;
}
In this line:
document.getElementById('thumb').appendChild(imgList[i]);
You are appending the image to the 'thumb' list again. But these are the ones you want to keep, as they have the eventListener attached to them.
You need to remove the tags from your html code to achieve the desired result.
<li><img src="img/Plane1.jpg" alt="Plane1"></li>
<li><img src="img/Plane2.jpg" alt="Plane2"></li>
<li><img src="img/Plane3.jpg" alt="Plane3"></li>
<li><img src="img/Plane4.jpg" alt="Plane4"></li>
The first 4 images are the ones you have in your static html code. The next 4 are the dynamic generated from javascrip. Just remove the images inside thumb from your html code.
The images are both in your html, and also created in javascript.
The line document.getElementById('thumb').appendChild(imgList[i]); adds each image specified in the images array of your javascript to the page.
I suggest you will want to remove the ones in your html - simply remove the <li> tags and the images that are within them.
After taking out the unneeded tags, your HTML should look something like this:
<body onLoad="init()">
<table class="planes">
<tr>
<td>
<div id="thumb">
</div>
</td>
<td>
<img class="pic" id="main" src="img/Picture.gif" alt="">
</td>
</tr>
</table>
First, div cannot be a child of ul and second you shouldn't really use tables for layout (unless making an email template).
If you are just trying to change the src of the main image on the click of the thumbnails, you can use the following js:
var images = new Array('img/Plane1.jpg', 'img/Plane2.jpg', 'img/Plane3.jpg', 'img/Plane4.jpg'),
thumbnails = document.getElementById('thumb').getElementsByTagName('img'),
mainImage = document.getElementById('main');
for (i = 0; i < thumbnails.length; i++) {
setClickFunction(i);
}
function setClickFunction(currentIndex) {
thumbnails[currentIndex].onclick = function() {
mainImage.src = images[currentIndex];
};
}
Example
Using links for your large images instead of an array
I have created an HTML file which uses java script to display images randomly displayed in 3 div tags. On click the images move left or right. It works fine until I use single slideshow in the page, but creates problem when I try multiple slideshows on the same page.
Here is the code for one slide show :
**<script>
currentIndx = 2;
MyImages=new Array();
MyImages[0]='1images2.jpeg';
MyImages[1]='1images3.jpeg';
MyImages[2]='1images4.jpeg';
MyImages[3]='artwork.jpg';
MyImages[4]='1images5.jpeg';
imagesPreloaded = new Array(4)
for (var i = 0; i < MyImages.length ; i++)
{
imagesPreloaded[i] = new Image(120,120)
imagesPreloaded[i].src=MyImages[i]
}
/* we create the functions to go forward and go back */
function Nexter()
{
if (currentIndx<MyImages.length-1){
alert(currentIndx);
document.leftimg.src=document.middleimg.src
document.middleimg.src=document.rightimg.src
document.rightimg.src=imagesPreloaded[++currentIndx].src
}
else {
alert("In nexter else")
currentIndx=0
document.leftimg.src = document.middleimg.src
document.middleimg.src = document.rightimg.src
document.rightimg.src = imagesPreloaded[currentIndx].src
}
writeImageNumber();
}
function Backer()
{
if (currentIndx>0)
{
--currentIndx;
alert("In Backer If");
document.rightimg.src=document.middleimg.src
document.middleimg.src=document.leftimg.src
document.leftimg.src=imagesPreloaded[currentIndx].src
}
else
{
currentIndx = MyImages.length-1
alert(MyImages.length +"else");
document.rightimg.src = document.middleimg.src
document.middleimg.src = document.leftimg.src
document.leftimg.src = imagesPreloaded[currentIndx].src
}
writeImageNumber();
}
/*###### function to reload the images and text when refresh is pressed ##### */
function setCurrentIndex()
{
currentIndx=0;
document.theImage.src=MyImages[0];
document.form1.text1.value=Messages[0];
writeImageNumber();
}
</script>
<body onload="setCurrentIndex();automaticly()">
<!-- start of form for image slide show ####################### -->
<div id ="left" style="float:left">
<a href="#" onclick="Backer()" ><img src="1images2.jpeg" width="265" height="262"
border="0" name="leftimg"></a>
</div>
<div id ="middle" style="float:left">
<a href="#" onclick=""><img src="1images3.jpeg" width="265" height="262"
border="0" name="middleimg"></a>
</div>
<div id ="right" class="compimg" style="float:left">
<a href="#" onclick="Nexter()" ><img src="1images4.jpeg"
width="265" height="262" alt="" border="0"name="rightimg"></a>
</div>
<!-- end of form for image slide show ####################### -->**
Any suggestions...
You haven't wrapped your script in any javascript class(object) so all variables you are using have global scope(page level). I guess your variables are over written if you try to use it multiple time.
You can get better answer if you post HTML markup of how you are trying to create multiple slideshow in single page...
I have the following code to display the images
<ui:repeat id="repeat5" value="#{getData.imageThumbnail1}" var="imagesLst2" varStatus="loop">
<h:panelGroup>
<p:commandLink id="cl3" action="#{getData.imageID(imagesLst2.imageID)}" styleClass="ovr" update=":mainForm:tabView:example">
<p:graphicImage id="gi3" value="#{imagesStreamer.image}" styleClass="bord" alt="image not available3" width="60" height="60" >
<f:param name="id5" value="#{imagesLst2.imageID}" />
</p:graphicImage>
</p:commandLink>
</h:panelGroup>
</ui:repeat>
I have a css file to display border for the p:graphicImage
.bord
{
border-style:solid;
border-width:2px;
border-color:#00FFFF;
}
I can view multiple images, when i select a image it needs to change the border-color for that graphicImage (at any point of time there will be only one selected image), how do i do it in PrimeFaces
I tried using a javascript but could not figure out how to change the border for an existing component.
UPDATE:1
I did the above task with the following code
<p:graphicImage id="gi3" value="#{imagesStreamer.image}" onmousedown="mouseDown(this)" styleClass="bord" alt="image not available3" width="60" height="60" >
and the javascript
function mouseDown(element) {
var element1 = (element);
element1.style.borderColor="#ff0000";
}
Now my problem is how do i change the previously selected border colour on a new selection.
This is how i did the above things
jsf code
<p:graphicImage id="gi3" value="#{imagesStreamer.image}" onmousedown="mouseDown(this)" styleClass="bord" alt="image not available3" width="60" height="60" >
javascript
var elementOld;
function mouseDown(element) {
var element1 = (element);
element1.style.borderColor="#ff0000";
if(elementOld != null){
elementOld.style.borderColor="#739E39"
}
elementOld = element1;
}
Thanks to BalusC reply
How to refer to a JSF component Id in jquery?
I think this is a cleaner solution, and you won't have to use global variables.
Add a that surrounds the ui:repeat. Then simply solved with jquery.
markup:
<p:graphicImage id="gi3" value="#{imagesStreamer.image}" alt="image not available3" width="60" height="60" onclick="setBorder(this)">
javascript:
function setBorder(element) {
$('#imageContainer .bord').removeClass('bord'); // Removes the border from all images that has it.
$(element).addClass('bord'); // Adds the border class to the clicked image.
}