I would like to implement in such a way that , when we click the image ,the selected image should appear front and the rest of the images should hide behind the selected image .
I have got the code reference of similar functionality achieved using jquery .
Click on image to move to front?
please let me know how this can be done using Angular or using plain javascript?
Using plain javascript:
let images = document.getElementsByClassName('myclass');
Array.prototype.forEach.call(images, (img) => img.addEventListener('click', function() {
Array.prototype.forEach.call(images, (img) => img.style.zIndex = 0);
this.style.zIndex = 100;
}));
Related
There are multiple clickable images on the screen. I want to keep which image I clicked in a variable. How can I do this with javascript? Can you help me, please ?
You can add a listener on the images click event, then take the src for example of the image clicked and store it in a variable like this:
$('img').click(function (e) {
var clickedImge = '';
clickedImge = e.target.src;
});
I try create a quick prototype where user can see how an animation has looked like in the past. For this I need a screenshot gallery. So far I have in my HTML:
<div id="screenshot"></div>
This function is called based on some events:
function handlePicture() {
console.log("Greetings from server");
var img = document.createElement("img");
img.src = renderer.domElement.toDataURL(); // catching the Three.js scene as image
var src = document.getElementById("screenshot");
src.appendChild(img);
}
This shows the current screenshot. Great! But I want to have 10, 20, 300 or more of them, so that the screenshot is not replaced but a new image is appended next to it.
I would want the animation's timeline to be presented as a gallery, maybe with the help of CSS galleries https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive
I would need help with the next steps. How could each function call save renderer.domElement.toDataURL(); as a new image and create an element for it? I'm confused if I should make a new div for every image or put them all under div "screenshot". Many thanks!
I have set up a pen to demonstrate creating an image element with a button.
renderer.domElement.toDataURL() Is an async function so you would need to wrap it in a callback function.
var imgBtn = document.getElementById("addImage");
document.addEventListener("click", function(){
var newImage = document.createElement("img")
document.body.appendChild(newImage)
newImage.setAttribute("src",
"https://via.placeholder.com/150/0000FF/808080%20?
Text=Digital.com%20C/O%20https://placeholder.com/)")})
https://codepen.io/sijbc/pen/MWJeveL
I have a jQuery and, using it, I am changing my body background-image but how to make one image default when the page loads:
This is my jQuery under the head tag
var backImage = new Array();
backImage[0] = "images/1.jpg";
backImage[1] = "images/2.jpg";
backImage[2] = "images/3.jpg";
function changeBGImage(whichImage)
{
if (document.body){
document.body.background = backImage[whichImage];
}
links - clicking on this the background image changes:
1
2
3
You could launch the function when the page loads using the default image index.
For example
$(window).ready(function(){
changeBGImage(0);
});
or maybe if you want to set it before hand, you could just add it to the styles of the body tag
<body style="background-image:url(...);">
I have a question on rollover effects using JavaScript.
I have read that image sprites (image with another image on its side) can be used with help of CSS offsetting to achieve basic rollover when onmouseover is handled using JS. Have also read about the possibility of changing classes itself using JS (className) to achieve the above effect.
My question is, can I modify the image src itself using JavaScript, to achieve the rollover effect?
A code like this, maybe -
document.getElementByID("button1").onmouseover = rolloverFunction;
function rolloverFunction(){
this.src = "button1-image2.png";
}
I typed something like this to see if the src of the image can be modified upon rollover, but it is not working. Could you please let me know where I am going wrong?
You need the mouseover and mouseout events. mouseover is triggered when hovering in the image, mouseout on leaving the image. Using plain ol' JS would yield:
<img src="default.png" id="image" alt="">
<script>
var image = document.getElementById("image");
image.onmouseover = function () {
this.src = "rollover.png";
};
image.onmouseout = function () {
this.src = "default.png";
};
</script>
Or using a common function to avoid duplicating the URL:
function rollover_effect(img_elm, rollover_src) {
var default_src = img_elm.src;
img_elm.onmouseover = function () {
img_elm.src = rollover_src;
};
img_elm.onmouseout = function () {
img_elm.src = default_src;
};
}
rollover_effect(document.getElementByID("image"), "rollover.png");
I've created a sliding image viewer here. As you can see, there's 4 small clickable images to change/slide the image. I want the small image to change to this image alt text http://beta.d-load.org/images/etc/imagev-on.png when it's clicked, or when the appropriate main image is showing. That way the users can tell which main image is being shown. Can anyone maybe look at the source and explain how to do this? Thanks!
try the following code !!
var src = [];
src['normal'] = "http://beta.d-load.org/images/etc/imagev-norm.png";
src['active'] = "http://beta.d-load.org/images/etc/imagev-over.png";
$(document).ready(function() {
$('a',$('.paging')).click(function() {
$('a',$('.paging')).find('img').attr('src',src['normal']);
$(this).find('img').attr('src',src['active']) ;
});
});
Here you go, Demo : http://jsfiddle.net/qTB9g/