{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/freecodecamp/frontend/html/fcc-challenge-24-turn-an-image-into-a-link/","result":{"data":{"site":{"siteMetadata":{"title":"Be Brav3"}},"markdownRemark":{"id":"8e1f2c8f-2d35-5c94-b157-07c57027f0f1","excerpt":"In Free Code Camp Challenge 24 we can turn an image into a clickable image that leads to an URL. You can make elements into links by nesting them within an a…","html":"

In Free Code Camp Challenge 24 we can turn an image into a clickable image that leads to an URL.

\n
\n

You can make elements into links by nesting them within an a element.

\n

Nest your image within an a element. Here’s an example:

\n
\n
\n

[html]

\n
\n
\n

\"Three

\n
\n
\n

[/html]

\n
\n
\n

Remember to use # as your a element’s href property in order to turn it into a dead link.

\n

Place the existing image element within an anchor element.

\n

Once you’ve done this, hover over your image with your cursor. Your cursor’s normal pointer should become the link clicking pointer. The photo is now a link.

\n
\n

The original code looks like:

\n

[html highlight=”32″]

\n\n \n\n

CatPhotoApp

\n

Click here for cat photos.

\n\"A\n

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

\n \n

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

\n \n[/html]\n

The updated code with clickable image leading to an URL should look like:

\n

[html highlight=”32″]

\n\n \n\n

CatPhotoApp

\n

Click here for cat photos.

\n

\"A

\n

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

\n \n

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

\n \n[/html]","frontmatter":{"title":"FCC Challenge 24: Turn an Image into a Link","date":"March 09, 2016","description":null}}},"pageContext":{"slug":"/blog/freecodecamp/frontend/html/fcc-challenge-24-turn-an-image-into-a-link/","previous":{"fields":{"slug":"/blog/freecodecamp/frontend/html/fcc-challenge-23-make-dead-links-using-the-hash-symbol/"},"frontmatter":{"title":"FCC Challenge 23: Make Dead Links using the Hash Symbol"}},"next":{"fields":{"slug":"/blog/selenium/locating-a-webelement-with-selenium-webdriver/"},"frontmatter":{"title":"Locating a WebElement With Selenium WebDriver"}}}}}