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

HTML

Posted by John Levy
John Levy
1,451 Points

Having problems with linking files

I am trying to make the image in my code clickable so it opens up the modal on the same page. Right now when I click on the image the "SELECT OPTION" pops up in a seprate window then I have to click the SELECT OPTION menu for it to got to the correct page. How do I make it open the modal in the same window when clicking on the image? I have attached my code below. http://codepen.io/Johned22/pen/gLOPOX Thanks in advance

Jim Sweeney
Jim Sweeney
3,050 Points

I'm kind of new with this too but I'll give it a shot. I think you need to wrap the image with the href in order to make it clickable. That way the entire image is the hyperlink.

3 Answers

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks for your response. I figured it would be something like that but where in the code do I wrap the image? That is the part I can not figure out.

Jim Sweeney
Jim Sweeney
3,050 Points
Jim Sweeney
Jim Sweeney
3,050 Points

Try something like this. It should work. You can then add any other parameters regarding width and height into the image tag.

<a href = "#openModal"><img src="beginnermensimage.jpg">SELECT OPTIONS</a>

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

It is getting better but I am still having issues. This is the code I am using-<figure id="beginner"> <a href="beginnermensdescription2.html"> <img src="beginnermensimage.jpg" id="image"> <figcaption><p class="program">Beginner Program</p><p class="info">For Men</p><p class="price">$0.99</p></figcaption> </figure>

The problem is when I click on the image it takes me to a "SELECT OPTIONS" page that I have to click on to get to the beginnermensdescription.html. How can I go straight to the beginnermensdescription.html when clicking the image?