2018-09-30 22:01:58 +00:00
---
id: bad87fee1348bd9aedf08820
title: Turn an Image into a Link
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cRdBnUr'
2019-07-31 18:32:23 +00:00
forumTopicId: 18327
2021-01-13 02:31:00 +00:00
dashedName: turn-an-image-into-a-link
2018-09-30 22:01:58 +00:00
---
2020-11-27 18:02:05 +00:00
# --description--
You can make elements into links by nesting them within an `a` element.
Nest your image within an `a` element. Here's an example:
2021-03-18 23:24:09 +00:00
```html
2021-04-26 17:04:53 +00:00
< a href = "#" > < img src = "https://www.bit.ly/fcc-running-cats" alt = "Three kittens running towards the camera." > < / a >
2021-03-18 23:24:09 +00:00
```
2020-11-27 18:02:05 +00:00
Remember to use `#` as your `a` element's `href` property in order to turn it into a dead link.
# --instructions--
Place the existing image element within an `a` (*anchor*) element.
2018-09-30 22:01:58 +00:00
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.
2020-11-27 18:02:05 +00:00
# --hints--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
The existing `img` element should be nested within an `a` element.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```js
assert($('a').children('img').length > 0);
2018-09-30 22:01:58 +00:00
```
2020-11-27 18:02:05 +00:00
Your `a` element should be a dead link with a `href` attribute set to `#` .
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```js
assert(new RegExp('#').test($('a').children('img').parent().attr('href')));
```
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
Each of your `a` elements should have a closing tag.
```js
assert(
code.match(/< \/a > /g) &&
code.match(/< a / g ) & &
code.match(/< \/a > /g).length === code.match(/< a / g ). length
);
```
# --seed--
## --seed-contents--
2018-09-30 22:01:58 +00:00
```html
< h2 > CatPhotoApp< / h2 >
< main >
< p > Click here to view more < a href = "#" > cat photos< / a > .< / p >
2018-10-08 00:01:53 +00:00
2021-04-26 17:04:53 +00:00
< img src = "https://www.bit.ly/fcc-relaxing-cat" alt = "A cute orange cat lying on its back." >
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
< p > Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.< / p >
< p > Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.< / p >
< / main >
```
2020-11-27 18:02:05 +00:00
# --solutions--
2018-09-30 22:01:58 +00:00
2019-04-22 06:07:05 +00:00
```html
< h2 > CatPhotoApp< / h2 >
< main >
< p > Click here to view more < a href = "#" > cat photos< / a > .< / p >
2021-04-26 17:04:53 +00:00
< a href = "#" > < img src = "https://www.bit.ly/fcc-relaxing-cat" alt = "A cute orange cat lying on its back." > < / a >
2019-04-22 06:07:05 +00:00
< p > Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.< / p >
< p > Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.< / p >
< / main >
2018-09-30 22:01:58 +00:00
```