Compare Revisions

X-Ray Goggles lets you poke around with the elements of a web page and remix them into new creations. Learn how to swap images, text, and more.

__TOC__ = Make sure you have X-Ray Goggles [[How to Install X-Ray Goggles|installed]] = Any time you stumble upon a web page you want to inspect, just click the X-Ray Goggles item you've installed in your bookmarks toolbar and start hacking. = Inspect the elements = With X-Ray Goggles activated, you'll notice that as you hover your mouse over sections of the web page, it will become highlighted with a brightly colored box. Each of these boxes represent elements of the web page. Click on one of the highlighted boxes and the code editor will appear at the bottom of your screen, which you can use to remix the element into your own variation. = Start remixing = Depending on the type of element you've selected, you can do various forms of remixing. == Change some text == Select a block of text, and change what it says in the code editor. As you edit the text, you can preview what your changes will look like in the main pane above. == Swap an image == All images use the <code><<!-- -->img<!-- -->></code> tag in HTML. In the code editor, you'll see that each <<!-- -->img<!-- -->> tag points to a specific URL address which tells the tag where the actual image lives. You can change the original image to anything you want. Just open up a new browser tab and find the image that you want to use, right click, and select {button copy image location}. Replace the image URL by pasting over it in the code editor, and you should see it change in the preview. == Modify a hyperlink == You can make hyperlinks point to wherever you want. All hyperlinks start with <code><<!-- -->a href="<!-- --></code> and contain the URL that the hyperlink points to. You can change the destination of the link by editting the URL situated between the quotation marks. You may also want to change what is called the "anchor text". This is the labeled text that gives the visitor a clue about the destination page, and is often displayed with an underline and a blue font. = Commit and publish! = If you've made a mistake, you can hit the {button Cancel} button to the right of the code editor. If you're happy with the changes you've made, then go ahead and hit the green {button Update} button and see what your remixed page looks like. When you're ready to publish, hit {key p} on your keyboard, or the {button Publish} button along the right sidebar. If you're signed in to teach.mozilla.org, your published Goggles remix will be added to the "Your Projects" page on teach.mozilla.org and you'll be given a unique URL to share with friends.