Dynamic Image Changing with JavaScript
Dive into the world of dynamic image manipulation using JavaScript! Learn how to randomly display images on a webpage, passing IDs as parameters to functions, and allowing multiple images to call the same function. Enhance user interaction and visuals with these hands-on examples and tips.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
GetElementById More Examples
There are a bunch of ways we can make random pics show up! We ll use: getElementById, Math.floor(Math.random() * 3), and if conditions a function (We re combining tools!) Random Pic Random Pic Note: you need only 1 image in your html code that is the image you re going to change. But you ll need to download 3 more images those are the random images that will be showing up on your web page!
Random pic: JavaScript Code HTML Code function randPic() { alert("Changing pic") rand = Math.floor(Math.random() * 3) if (rand === 0) { document.getElementById("cute").src = "zero.jpg" } else if (rand === 1) { document.getElementById("cute").src = "one.jpg" } else if (rand === 2) { document.getElementById("cute").src = "two.jpg" } } <img src = "penguin.jpg" style = "width:175px; height: 175px;" alt = "adorable baby animal" id = "cute" onClick ="randPic()"> Make sure you ve: Downloaded 3 new images (I named mine zero.jpg, one.jpg, and two.jpg for ease of code writing) Made the pic call the new function Made the id in the img on your html page and the id between the document.getElementById parentheses match!
Next Example: Passing in id as Parameter Next Example: Passing in id as Parameter You can pass an id into a function s parameter when you call the function. Example: JavaScript Code HTML Code function changeToClosed(idpar) { alert("Changing pic") document.getElementById(idpar).src = "doors.jpg" } <img src = "bat3.png" style = "width:175px; height: 175px;" alt = "bat pic" id = "bat1" onClick ="changeToClosed('bat1')"> Notes: You are passing into the function s parameter the id of the image That ( bat1 ) goes into idpar Then idpar goes between the parentheses. Since it s a parameter, it DOES NOT have quotes around it
Now MANY images can call the SAME function!!! Now MANY images can call the SAME function!!! Example: HTML Code JavaScript Code <img src = "bat3.png" style = "width:175px; height: 175px;" alt = "bat pic" id = "bat1" onClick ="changeToClosed('bat1 ) > function changeToClosed(idpar) { alert("Changing pic") document.getElementById(idpar).src = "doors.jpg" } <img src = "ghost.png" style = "width:175px; height: 175px;" alt = "ghost pic" id = "ghost1" onClick ="changeToClosed('ghost1')"> <img src = "hamster.gif" style = "width:175px; height: 175px;" alt = "hamster pic" id = "hamster1" onClick ="changeToClosed('hamster1')"> Notes: The function HAS NOT CHANGED!!! Each image passes its id into the function s parameter when you click on it.
Theres a lot we can do with document.getElementById to modify items on your web page We re just getting started! E.g., Random pics We can change an image s src to a random pic! We can pass in an id of an image (or any other tag) into a parameter in a function And then use that parameter holding the id in document.getElementById Take Aways: (We could combine the random pics and passing in the id as a parameter!)
