Changing individual images on Lesson #11

[Posts in the debugging category need to have the following pieces of information included in order to help other teachers or our moderator team best help you. Feel free to delete everything in brackets before posting your request for debugging help.]

Link to the project or level:
What I expect to happen: My Students are trying to make individual pictures do different things and we are struggling to understand how that should look in the code.
What actually happens: Nothing, the images stay the same.
What I’ve tried: We have tried renaming images in CSS, renaming them in HTML, and even linking them differently. I think we are at a point where some outside help would be the way to go. Thanks!


Welcome to the forum! I reviewed the code you submitted. I couldn’t find anything that isn’t working like it is coded. Can you perhaps explain what you mean by “make individual pictures do different things”?

I wasn’t quite sure what you were wanting to do with the images. If you can give me an example, I’m happy to give you some suggestions.



So for example, on Level 11 for the assessment, there are multiple pictures of “cool animals”. If I want to change the shape of only one, such as the Baiji, but don’t want that to affect the Steller’s Sea Cow, how would I differentiate that in the code? Does that make sense?

Aha! Yes. I understand now. You would do that by using “classes”. This is taught in lesson 17 (a few lessons down the road).

Here is a remix of your code where I added a class to the baiji image and then on the stylesheet used the selector to style that image.

Basically, you add a "class =“xxxxx” attribute to the html code like this:

  <img src="baiji.jpg" alt="Baiji" class="different">

And then in the style sheet, you style that selector like this.

.different {

I used the class of “different” but it could be anything.

Hope this helps!