Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
armand Rodriguez
7,830 PointsDoes the button link need an image?
I was experimenting with the HTML code and trying to figure out, simultaneously, the javascript from later lessons, but got confused, so I came back here to look at simpler example. I was trying to figure out what made the car image at the top different from the buttons, which i figured out was the link to <a href="javascript:startCar();">. I took the image out of the first one, and noticed that obviously the key image was gone, but also that there was no more button or functionality for the start noise. Just out of curiosity, and I guess a way to understand a little bit better why it works, could this link work without an image placeholder, or does it need something there? What does it need to work?
2 Answers
Steven Parker
231,236 PointsAny visible element can be turned into a link.
You just have to wrap it in an <a> tag pair, and give it an href attribute. In fact, it is more common for a link to be made from one or more words of text than an image. For example:
<a href="javascript:startCar();">Click here for car sound.</a>
armand Rodriguez
7,830 PointsThanks a lot that clears it up for me!
Cassandra Godwin
3,581 PointsCassandra Godwin
3,581 PointsBut wrapping it in an <a> tag makes the image smaller. What if you wanted to keep the image large and make it clickable (turn it into a link)? I created a <b> tag to style the image hoping to make it a link but it has not worked.
https://w.trhou.se/ya0t6y22ml
Steven Parker
231,236 PointsSteven Parker
231,236 PointsYou can't make a "b" tag into a link. But you could change the styling applied to the "a" tag so that it doesn't reduce the size of the image.
Cassandra Godwin
3,581 PointsCassandra Godwin
3,581 PointsThanks, Steven! But if I do that, the buttons will also become large. I basically want the exact same formatting with the big image of the car and the three buttons, except the car is also a link to a sound. How can I accomplish this?
Steven Parker
231,236 PointsSteven Parker
231,236 PointsWhat if you style a class, and give that class only to the elements you want it to apply to?
Cassandra Godwin
3,581 PointsCassandra Godwin
3,581 PointsIf I want all 4 of the images currently on the site to be links, just as they are, styling the a class will not accommodate this because of the way it changes the size. I guess my fundamental question is, why does the <a> tag, which I believe to be a style only tag, give link functionality? How else can you give something link functionality other than an <a> tag?
Thanks for everything so far!
Steven Parker
231,236 PointsSteven Parker
231,236 PointsThe "a" is not a class but a tag name. It stands for "anchor", and when combined with the href attribute it creates the link functionality. It can be styled, but it is definitely not a "style only tag".
This is deviating significantly from the original question, perhaps you should start a new question regarding styling your image links and post your snapshot with it.