Hello sorry for maybe a stupid question but i can't seem to find a easy solution.
The meaning of my exercise is to put 3 thumbnails on my website, but when I move over the images they need to expand in size (so i have a thumbnail version of the picture and the normal size). The normal size picture has to be on the
<p id="groot"></p>
This do work correctly, the only problem is that the pictures keep showing up when i move over it. So when I move out of the thumbnail the picture need to dissapear. Is there a function or something that get the site to the original state or any solution? Thanks in advance. I hope I explained it clearly.
This is my first question on stackoverflow, so if you have tips for a complete noob :)
This is the body of my HTML code:
<body>
<p><img id="foto1" src="images/thumb-bones.jpg" alt="bones"/>
<img src="images/thumb-castle.jpg" alt="castle"/>
<img src="images/thumb-mentalist.jpg" alt="mentalist"/>
</p>
<p id="groot"></p>
</body>
This is the JS code:
addEventListener("load", init, false);
function init() {
let foto1 = document.getElementsByTagName("img")[0].addEventListener("mouseover", actie, false);
let foto2 = document.getElementsByTagName("img")[1].addEventListener("mouseover", actie2, false);
let foto3 = document.getElementsByTagName("img")[2].addEventListener("mouseover", actie3, false);
foto1.addEventListener("click", uit, false);
}
function actie(event) {
let plaats = document.getElementById("groot");
let element = document.createElement("img");
element.src = 'images/image-bones.jpg';
plaats.appendChild(element);
}
function actie2(event) {
let plaats = document.getElementById("groot");
let element = document.createElement("img");
element.src = 'images/image-castle.jpg';
plaats.appendChild(element);
}
function actie3(event) {
let plaats = document.getElementById("groot");
let element = document.createElement("img");
element.src = 'images/image-mentalist.jpg';
plaats.appendChild(element);
}
Use a mouseout handler and, in the handler, remove all children from that element. An easy way to do that is to assign "" to innerHTML. So for instance:
function actie_off(event) {
document.getElementById("groot").innerHTML = "";
}
Hook that up to all three thumbnails.
If you don't want to use innerHTML, this question's answers give alternatives.
You might consider mouseenter and mouseleave instead of mouseover and mouseout. Probably doesn't make much difference here, it's just that mouseover repeats as the mouse moves across the thumbnails, and the bubbling of mouseout can be confusing with nested elements (not currently relevant for you). See the links for details.
Another thing to consider is to store the fullsize image URL on the thumbnail img elements as a data-* URI, like this:
<img id="foto1" src="images/thumb-bones.jpg" alt="bones" data-fullsize="images/image-bones.jpg"/>
Then you can use a single handler for all of your img elements instead of three separate ones:
function actie(event) {
let plaats = document.getElementById("groot");
let element = document.createElement("img");
element.src = this.getAttribute("data-fullsize"); // Getting the fullsize URL
// from the image the event
// relates to
plaats.appendChild(element);
}
Related
Javascript noob here. I've looked for related questions but all the results won't work for me or I don't really understand parts of them. So I might just have done a silly mistake here.
What I'm trying to do is a script that when I hover over a button, changes the source of an image.
HTML:
<button onmouseover="changeImg()" class="about" href="#">ABOUT</button>
<img class="image2" src="images/image2.png">
Javascript:
<script>
function changeImg()
{
var image = document.getElementsByClassName("image2");
image.src = "images/image1.png"
}
</script>
Is there maybe an easier way to do it? I prefer using only html css and javascript.
Thanks for the help!
You’re using getElementsByClassName which will return an array of all the elements with that class. Either use document.getElementByClassName or document.querySelector(“element”)
function changeImg() {
var image = document.getElementByClassName("image2");
image.src = "images/image1.png"
}
Another solution is to use an event listener with the e variable:
document.querySelector(“.about”).addEventListener(“mouseover”, function (e) {
e.target.src = “newSource”
})
The e.target is the image element
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
Edit: Sorry if I reply late to any solutions because I need time to figure out how they work haha
I am a beginner in Javascript and I am currently trying to use this piece of code to change an image on mouseover
// Mouseover change (Ciel):
function rollover(my_image){
my_image.src = "images/ci2_a.png";
}
function mouseaway(my_image){
my_image.src = "images/ci_a.png";
}
and this is the corresponding HTML
<img src="images/ci_a.png" onmouseover="rollover(this)" onmouseout="mouseaway(this)" alt="xxx" style="float:left; width:38%">
This works fine, but I want to do it for more than one image on the same page (a different image rollover for each picture) . Even after changing the name of the functions and stuff it doesn't work. The first image stops changing onmouseover immediately when I try to add a similar function for the next image. Could someone tell me how to perform similar events on more than one image (not concurrently)? Thank you!
You could add event listeners to all the image elements you'd like.
<img class="my-image" src="images/ci_a.png" onmouseover="rollover(this)" onmouseout="mouseaway(this)" alt="xxx" style="float:left; width:38%"/>
function rollover(){
this.src = "images/ci2_a.png";
}
function mouseaway(){
this.src = "images/ci_a.png";
}
const myImages = document.querySelectorAll('.my-image')
myImages.forEach(img => {
img.addEventListener('mouseenter', rollover)
img.addEventListener('mouseleave', mouseaway)
})
You can send the image file as the second parameter like this:
function rollover(element, image) {
element.src = image
}
...
<img onmouseover="rollover(this, 'images/ci2_a.png')" ...>
But my question is why do you need JavaScript for that? You can use a simple CSS to achieve this.
Since you need different images on load and on hover, you need a single way to define this functionality across a collection of images.
Building on Matthew's approach, here's a way to do that.
JSFiddle to test it real-time.
You'll dynamically generate the images using data attributes to store the alternate (hover) image URL.
<img class="pics" src="https://picsum.photos/id/0/100"
data-swap="https://picsum.photos/id/10/100">
<br>
<img class="pics" src="https://picsum.photos/id/1/100"
data-swap="https://picsum.photos/id/11/100">
<br>
<img class="pics" src="https://picsum.photos/id/2/100"
data-swap="https://picsum.photos/id/12/100">
<br>
<img class="pics" src="https://picsum.photos/id/3/100"
data-swap="https://picsum.photos/id/14/100">
Then define the event listeners for all elements with the class pics. Here's a list of all the events that can be referenced.
On mouseover, store the original image in a data element original.
Then change the src with the value of the data-swap.
On mouseout, replace the src with the original value.
const myImages = document.querySelectorAll('.pics')
myImages.forEach(img => {
img.addEventListener('mouseover', function () {
img.dataset.original = img.src;
img.src = img.dataset.swap;
});
img.addEventListener('mouseout', function () {
img.src = img.dataset.original;
});
})
In my current assignment I got:
Create a toggle button on the html page that visually indicates what state it is in by changing the text displayed on it (e.g. changes between “up” and “down”, or “smiling” and “not smiling”) and by switching between two images, as well.
a. Hint: you will have to use a “state” variable outside the button’s listener callback function to re- member the button’s state between event callbacks.
4. Use the toggle button to toggle the mouth between a smile and a frown. In your button ‘click’ listener, check the button’s state with an ‘if’ statement to control whether you are going to make a smile or a frown.
I am quite confused as I searched in web - there are so many ways to create a button, in Html or in css.
Can somebody post a similar example please ?
Use the element.click and provide a callback click function. In this case the callback is the update function.
In the update function, check for the current src, i.e. the source for the image element. Update the src of the image and the text of the button accordingly.
I have also made it interactable in the image part. If not required just remove this line
imageElem.click(update);
var imageElem = document.getElementById('test_Img'),
buttonElem = document.getElementById('test_Btn'),
img1 = 'http://www.fantazia.org.uk/images/600px-Smiley_svg_small.png',
img2 = 'http://www.clipartsgram.com/image/2060213170-sad-smiley-face-clipart-mclpbaqca.png';
imageElem.addEventListener("click", update);
buttonElem.addEventListener("click", update);
function update() {
var src, text;
if (imageElem.src === img1) {
src = img2;
text = 'Sad';
} else {
src = img1;
text = 'Smile';
}
buttonElem.value = text;
imageElem.src = src;
}
<input type = 'button' id="test_Btn" value = 'Smile'/>
<img id="test_Img" src='http://www.fantazia.org.uk/images/600px-Smiley_svg_small.png' />
I'm apparently a bit of a dunce. I've been trying to get this to work as an onload slideshow that will randomly cycle through some images. I've looked through four different questions on here pertaining to how to change the src attribute using javascript and I think that I've avoided all of the problems that have been mentioned on those. The HTML calls the slideShow() function, but for the life of me I can't actually get the src to change and display on the page. Can someone please help me figure out what I've done wrong?
<script><!--
function slideShow()
{
window.setInterval("changeImage()", 5000);
}
function changeImage()
{
var imgSrcs["images//traps//1.jpg",
"images//traps//2.jpg",
"images//traps//3.jpg",
"images//traps//4.jpg"]
var i = Math.floor((Math.random() * 3));
var element = document.getElementById("slideShow").src;
element.innerHTML.src= imgSrcs[i];
}
--></script>
The HTML element that goes with this is:
<p><img src = "images//traps//1.jpg" alt = "Traps available for use" id = "slideShow"></p>
replace the following lines
var element = document.getElementById("slideShow").src;
element.innerHTML.src= imgSrcs[i];
with
var element = document.getElementById("slideShow");
element.src= imgSrcs[i];
I've assumed that slideShow refers to img tag id.