Why Is The Photo Not A Link?

HTML-CSS
1

Turn an Image Into a Link

According to the notes in this exercise -

hover over your image with your cursor. Your cursor’s normal pointer should become the link clicking pointer. The photo is now a link.

Apparently, I have passed this exercise properly. However the photo itself is not a link (the pointer does not become a hand when hovering over the photo) and according to the instructions, it should be. The only thing that is a link is the - alt="A cute orange cat lying on its back.” So the question is - should both the alt and the image function as links or does this code only provide for the alt to be a link?

<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img "https://freecatphotoapp.com" alt="A cute orange cat lying on its back."></a>


  <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">

  <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>

Screen Shot 2020-12-11 at 6.35.14 PM
Screen Shot 2020-12-11 at 6.35.14 PM1316×828 122 KB

1 Like
2

You forgot to write “src=” in the first image code, so it’s not presenting the image, only the text you provided with the “alt” attribute.

The image you see is the second one you have in your code.

3 
<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://freecatphotoapp.com" alt="A cute orange cat lying on its back."></a>


  <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">

  <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>

Screen Shot 2020-12-12 at 7.54.41 AM
Screen Shot 2020-12-12 at 7.54.41 AM992×652 90.1 KB

So I have added the src as suggested, and the only difference that I can see, as a result of the addition, is that now -
cat photos is still a link
a cute orange cat lying on its back is a new link that I didn’t have previously
the photo, which is supposed to be a link, is still not a link - so what am I missing here?

4

Hey @ttibsen!

May i know why there are two <img> tags?

5 
<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>
  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

  <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>
````Preformatted text`

Aha! Your question about 2 <img> tags jolted me awake. Of course there shouldn't be - the image tag should be nested within the <a>
tags. I have done this with the above code and it works like it should. Thanks for your perceptive question - it made me see the light.
6

Do you solve it @ttibsen ?

7

Yes I did Codely - thank you very much!

1 Like