An off-kilter way to confuse friends and make enemies!
Did your unsuspecting friend leave their computer in the library? This tutorial will show you how to transform all of the images on the website that a particular computer is visiting to one particular picture.
This is perfect for Facebook, school resources, or any site that has a lot of pictures.
You’ll learn a little bit of computer code, and you’ll learn a tool that most professional website developers use throughout their careers. Despite that, this tutorial is aimed for beginners — no prior knowledge necessary!
To complete this tutorial, you will need:
- A computer of any kind.
- Internet access.
- Google Chrome.
Finding an image
First, we must get an image. For this tutorial, we will use an image of a pug. Feel free, however, to choose any image you like.
- Go to http://google.com
- Search for your desired image content. In this tutorial, I will search for “pug.”
- Click “Images” to pull up a list of images.
- Find an image of your choice. Once you do that, click on that image. A menu should appear, with a description of where that image was found. Click “View Image,” located just below that description.
- You should end up on a page with just your image. Copy the page’s URL (located at the top of your browser).
Replacing the image
Time to prank your friend. You can search for a new website to leave on their computer or instead work with what they have open . Remember that websites with high image content are ideal. Because of that, social media websites are best: Pinterest, Instagram, Buzzfeed, and so on. I have played this prank on classmates who left their Facebook news feeds open.
For this example, we will do the replacement on a simple Google search. But feel free to follow along on any website of your choice! The process is one and the same.
- Find your website. In the picture below, I searched for the “University of Florida” on Google.
- Right-click somewhere on the white space of the website. Your cursor should have an option to “Inspect Element.” On the image below, it is the last option. Click it.
- Either on the right side of your browser or in a separate window, a toolbar should pop up that looks like the following:
Note: This toolbar displays all of the current website’s “code.” Software developers use it to make changes to the website on the fly, without having to restart the program with every adjustment.
- Click the “+” Icon on the Styles tab. First, type in “img” before the curly bracket.
Note: we are telling the browser that the following code applies to all images on the website.
- Then type the following code inside: “content: url( url-here );”
- in the “url-here” section, press paste.
Note: we are telling the browser that all images will now display the given image website.
- Press enter, and you’re done!
So, what just happened?
As mentioned, when a user opens the “Inspect Element” window, the internet browser displays the computer code that your browser (in this case, Chrome) reads. Anybody that completes this project, however simple and silly the prank is, is actually running computer code. Despite its reputation, coding can be easy to learn and fun.
Hopefully, this article inspires you to continue to explore how websites are created and maintained! Any questions? Feel free to reach out and ask me for help at firstname.lastname@example.org.