var firstMove = 0;
var pictures = ['boar.jpg','lion.jpg','bones.jpg','eagle.jpg','wolf.jpg','boar.jpg','lion.jpg','bones.jpg','eagle.jpg','wolf.jpg','boar.jpg','lion.jpg','bones.jpg','eagle.jpg','wolf.jpg']
pictures.sort()
function replyClick(clicked_id)
{
//if player already draw one card;
if (firstMove){
var image = document.getElementById(clicked_id);
image.innerHTML = '<img src='+pictures[clicked_id-1]+' />'
var firstPicture = document.getElementById(firstMove);
if (image.innerHTML == firstPicture.innerHTML){
firstMove=0;
}
else {
image.innerHTML = "";
firstPicture.innerHTML = "";
firstMove=0
}
}
// if player didnt draw any card;
else {
var image = document.getElementById(clicked_id);
image.innerHTML = '<img src='+pictures[clicked_id-1]+' />'
firstMove = clicked_id
}
}
<div class="card" id="1" onclick="replyClick(this.id)"></div>
<div class="card" id="2" onclick="replyClick(this.id)"></div>
I try to create simple pexeso game.where you looking for two identical images.
My question is how to change this code to show that certain image right after somebody click on it.Because my script show image after inner condition but that is too late for me.Thanks for answer
Compare array elements.
pictures[clicked_id-1] == pictures[firstMove-1]
is the same that
image.innerHTML == firstPicture.innerHTML
UPD
For small delay use setTimeout
// other code
function replyClick(clicked_id) {
if (firstMove){
var imageSrc = pictures[clicked_id-1];
var prevImageSrc = pictures[firstMove-1];
var image = document.getElementById(clicked_id);
image.innerHTML = '<img src='+imageSrc+' />'
var firstPicture = document.getElementById(firstMove);
if (imageSrc == prevImageSrc) {
firstMove=0;
} else {
// code will run after 1s delay
setTimeout(function () {
image.innerHTML = "";
firstPicture.innerHTML = "";
firstMove=0;
}, 1000); // delay = 1 second
}
} else {
var image = document.getElementById(clicked_id);
image.innerHTML = '<img src='+pictures[clicked_id-1]+' />'
firstMove = clicked_id
}
}
Related
I've have this code here: https://codepen.io/double_milkshake/pen/VwZJjgq
const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');
const textElement = document.querySelector(".text");
let counter = 0;
nextBtn.addEventListener('click',nextSlide);
prevBtn.addEventListener('click',prevSlide);
function nextSlide() {
container.animate([{opacity: '0.1'},{opacity: '1.0'}],{duration:500, fill: 'forwards'});
if(counter === 4) {
counter = -1;
}
counter++;
container.style.backgroundImage = `url(img/bcg-${counter}.png)`
}
function prevSlide() {
container.animate([{opacity: '0.1'},{opacity: '1.0'}],{duration:1000, fill: 'forwards'});
if(counter === 0) {
counter = 5;
}
counter--;
container.style.backgroundImage = `url(img/bcg-${counter}.png)`
}
It is a simple image slider. You can't see the images, because the code is made for images that are on your local drive. Every time you click the button, the counter changes and this way the image changes.
Now I would like to change the text, when clicking as well. But not sure How to start this, maybe you guys have any ideas?
Also any suggestions, what to do when I don't know How many images are in my folder. Currently they are hard coded to 5.
Thanks a lot!
HTML Markup:
<div class="text" id="caption">
This is image 1
</div>
Javascript
const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');
const textElement = document.querySelector(".text");
let counter = 0;
nextBtn.addEventListener('click',nextSlide);
prevBtn.addEventListener('click',prevSlide);
function nextSlide() {
container.animate([{opacity: '0.1'},{opacity: '1.0'}],{duration:500, fill: 'forwards'});
if(counter==4)
counter=-1;
counter = setText(counter, "up");
container.style.backgroundImage = `url(img/bcg-${counter}.png)`
}
function prevSlide() {
container.animate([{opacity: '0.1'},{opacity: '1.0'}],{duration:1000, fill: 'forwards'});
if(counter==-0)
counter=5;
counter = setText(counter, "down");
container.style.backgroundImage = `url(img/bcg-${counter}.png)`
}
function setText(cntr, direction){
if(direction=="up") {
cntr++;
} else {
cntr--;
}
if(cntr==0){
document.getElementById("caption").innerHTML = "This is image 1";
} else if(cntr==1){
document.getElementById("caption").innerHTML = "This is image 2";
} else if(cntr==2){
document.getElementById("caption").innerHTML = "This is image 3";
} else if(cntr==3){
document.getElementById("caption").innerHTML = "This is image 4";
} else if(cntr==4){
document.getElementById("caption").innerHTML = "This is image 5";
}
return cntr;
}
I've some buttons/img, which displays the status of the items in the database. On hovering should the src changed to a gif, which ends after the animated part. On leaving should the other gif come. If I entered and leaved the first button and I do the same with another button, on leaving the second time all of the two gifs loads new. The same happens with more than 2 times also.
Here a example:
function lightimgchange (ID, Val) {
var imgID = 'light' + ID;
var elem = document.getElementById(imgID);
if (Val == 1) {
elem.src = "img/light_on_off.gif";
}
else {
elem.src = "img/light_off_on.gif";
}
}
while ($reihe = mysql_fetch_array($light_db)) {
if ($reihe['Status'] == 'Y') {
echo "<img src='img/light_on.png' alt='On' id='light".$reihe['ID']."' height='75px' width='75px' onmouseenter='lightimgchange(".$reihe['ID'].", 1)' onmouseleave='lightimgchange(".$reihe['ID'].", 0)' style='border-radius:20%;'>";
}
else {
echo "<img src='img/light_off.png' alt='Off' id='light".$reihe['ID']."' height='75px' width='75px' onmouseenter='lightimgchange(".$reihe['ID'].", 0)' onmouseleave='lightimgchange(".$reihe['ID'].", 1)' style='border-radius:20%;'>";
}
}
I`ve solved it with a trick. After ending, I change the gif to a png.
Here`s the js solution:
function lightimgchange (ID, Val) {
var imgID = 'light' + ID;
var elem = document.getElementById(imgID);
if (Val == 1) {
elem.src = "img/light_on_off.gif";
setTimeout(function(){
elem.src = "img/light_off.png";
}, 450);
}
else {
elem.src = "img/light_off_on.gif";
setTimeout(function(){
elem.src = "img/light_on.png";
}, 450);
}
}
On html page I have several images with <img onclick="povecaj();"
In fact, trying to make some kind of light-box.
First img click not work, second click fired function and any other img first click fired function. But after page loaded fist img click doesn't work...
function is next:
function povecaj() {
if (document.readyState === "complete") {
if ((screen.width > 801) || (screen.height > 801)) {
init();
}
else {
return;
}
}
}
function init() {
$(' .card-img img').click(function () {
var thediv = document.getElementById('displaybox');
var staza = $(this).attr('src')
var sl = document.getElementById('image');
thediv.style.display = "";
sl.innerHTML = '<img alt="2" id="imgID" src="' + staza + '"/>' + '<div class="alert-close" onclick = "zapri()" >X</div>'
thediv.innerHTML = '<table style="width:100%; height:100%;"><tbody><tr><td style="text-align: center; vertical-align:central; width:100%; height:100%"></td></tr></tbody></table>';
thediv.style.display = "block";
sl.style = "block";
});
}
I'm working in VS2012, using Chrome inspect too.. can't see errors..
searched, googled, can't find solution. Can somebody help?
If your images loading dynamically the DOM you must add a jquery event listener like this:
function init() {
$(class_of_parent_div).on('click', '.card-img img', function () {
var thediv = document.getElementById('displaybox');
var staza = $(this).attr('src')
var sl = document.getElementById('image');
thediv.style.display = "";
sl.innerHTML = '<img alt="2" id="imgID" src="' + staza + '"/>' + '<div class="alert-close" onclick = "zapri()" >X</div>'
thediv.innerHTML = '<table style="width:100%; height:100%;"><tbody><tr><td style="text-align: center; vertical-align:central; width:100%; height:100%"></td></tr></tbody></table>';
thediv.style.display = "block";
sl.style = "block";
});
}
And write the class of parent div class_of_parent_div
I have 3 images (pic1, pic2, pic3) that on click of the div ID change to (pic4, pic5, pic6). All this works fine but I need to put in a mouseover command that when hovering over pic2, it changes to pic 7 and on mouseout it goes back to pic 2. I am unsure as to why this part of my code isn't working, is it a syntax error? The two functions I am trying to use to do this are "rolloverImage" and "init".
HTML
<div id="content1">
<img src="pic1.jpg" alt="pic1"/>
<img src="pic2.jpg" alt="pic2" id="pic2"/>
<img src="pic3.jpg" alt="pic3"/>
</div>
Javascript
var g = {};
//Change background colors every 20 seconds
function changebackground() {
var backColors = ["#6AAFF7", "#3AFC98", "#FC9B3A", "#FF3030", "#DEDEDE"];
var indexChange = 0;
setInterval(function() {
var selectedcolor = backColors[indexChange];
document.body.style.background = selectedcolor;
indexChange = (indexChange + 1) % backColors.length;
}, 20000);
}
function rolloverImage(){
if (g.imgCtr == 0){
g.pic2.src = g.img[++g.imgCtr];
}
else {
g.pic2.src = g.img[--g.imgCtr];
}
}
function init(){
g.img = ["pic2.jpg", "pic7.jpg"];
g.imgCtr = 0;
g.pic2 = document.getElementById('pic2');
g.pic2.onmouseover = rolloverImage;
g.pic2.onmouseout = rolloverImage;
}
window.onload = function() {
var picSets = [
["pic1.jpg", "pic2.jpg", "pic3.jpg"],
["pic4.jpg", "pic5.jpg", "pic6.jpg"],
];
var currentSetIdx = 0;
var contentDiv = document.getElementById("content1");
var images = contentDiv.querySelectorAll("img");
refreshPics();
contentDiv.addEventListener("click", function() {
currentSetIdx = (currentSetIdx + 1) % picSets.length;
refreshPics();
});
function refreshPics() {
var currentSet = picSets[currentSetIdx];
var i;
for(i = 0; i < currentSet.length; i++) {
images[i].src = currentSet[i];
}
}
changebackground();
init();
}
This question uses jquery.
In the card game below, one image will be used to make 2 matching cards. Cards are matched based on having the same file source.(ie if 2 cards have the same file source then they are a match).
What I'd like to do is match the cards based on different criteria. This is because I'd like to use 2 different images as the matching pair.
At first I thought that I could just specify values for the matching images, but when the cards are shuffled at the start/reset of each game, the values don't move with the image.
To sum up, I'd like to find a way to match 2 cards(images) that have differing file sources after they have been randomly shuffled.
Any help would be much appreciated. Thanks.
<script type="text/javascript">
var boxopened = "";
var imgopened = "";
var count = 0;
var found = 0;
function randomFromTo(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}
function shuffle() {
var children = $("#boxcard").children();
var child = $("#boxcard div:first-child");
var array_img = new Array();
for (i=0; i<children.length; i++) {
array_img[i] = $("#"+child.attr("id")+" img").attr("src");
child = child.next();
}
var child = $("#boxcard div:first-child");
for (z=0; z<children.length; z++) {
randIndex = randomFromTo(0, array_img.length - 1);
// set new image
$("#"+child.attr("id")+" img").attr("src", array_img[randIndex]);
array_img.splice(randIndex, 1);
child = child.next();
}
}
function resetGame() {
shuffle();
$(".tile").hide();
$("img").removeClass("opacity");
count = 0;
$("#msg").remove();
$("#count").html("" + count);
boxopened = "";
imgopened = "";
found = 0;
return false;
}
$(document).ready(function() {
$(".tile").hide();
$("#boxcard div").click(openCard);
shuffle();
function openCard() {
id = $(this).attr("id");
if ($("#"+id+" img").is(":hidden")) {
$("#boxcard div").unbind("click", openCard);
$("#"+id+" img").slideDown('fast');
if (imgopened == "") {
boxopened = id;
imgopened = $("#"+id+" img").attr("src");
//print imgopened
$('#reading1').html('<h1> imgopened is '+imgopened+'</h1>');
setTimeout(function() {
$("#boxcard div").bind("click", openCard)
}, 300);
} else {
currentopened = $("#"+id+" img").attr("src");
//print currentopened
$('#reading2').html('<h1> currentopened is '+currentopened+'</h1>');
if (imgopened != currentopened) {
// close again
setTimeout(function() {
$("#"+id+" img").slideUp('fast');
$("#"+boxopened+" img").slideUp('fast');
boxopened = "";
imgopened = "";
}, 400);
} else {
// found
$("#"+id+" img").addClass("opacity");
$("#"+boxopened+" img").addClass("opacity");
found++;
boxopened = "";
imgopened = "";
}
setTimeout(function() {
$("#boxcard div").bind("click", openCard)
}, 400);
}
count++;
$("#count").html("" + count);
if (found == 10) {
msg = '<span id="msg">Congrats ! You Found All The Cards With </span>';
$("span.link").prepend(msg);
}
}
}
});
</script>
Here is the html
<div id="reading1" style="display:block; width:700px; height:50px;"></div>
<br/>
<div id="reading2" style="color:#cc0000; display:block; width:700px; height:50px;"></div>
<div id="boxbutton">
<span class="link">
<span id="count">0</span>
Click
</span>
Restart
</div>
<div id="boxcard">
<div id="card1"><img class="tile" src="img/01.jpg" /></div>
<div id="card10"><img class="tile" src="img/01.jpg" /></div>
</div>
I would use the .data() method of jQuery to "attach" a specific piece of data that matches the "criteria" you need for the matched images. Then as you "turn over" a "card" you can extract the specific piece of data and compare it to another card that is turned over to see if they match. Because the data is a property of the image, it will "move" with the image when it is shuffled.