How To Show Full Sized Image From Clicking Smaller Image

Hi:

I am John & I have a smaller version of an image that I would like to click and then show the full sized version of the image that I have on another web page.

Question is, what piece of html do I need to do this manoeuvre? I am also thinking of a nice piece of ‘tooltip’ on the hover that says “click here to see the full sized image” or something like that.

I am hours into this already so thanks in advance for any help

Try this:

<a href="folder/big_image.jpg" alt="Big image" title="Big image"><img src="small_image.jpg"></a>
1 Like

To expand a little on Rubble’s reply, most browsers will display the contents of the “title” attribute as a tooltip, so you can adjust that to suit.

The drawback is that it won’t be visible to anybody using keyboard navigation. If it’s not clear that clicking the small image will take you to a larger one, then I prefer to add a line above or below the image to explain that, rather than rely on hover.

1 Like

Would changing title=“Big image” to title=“Click for a big image” work @TechnoBear

It still wouldn’t be accessible to keyboard users. He should probably add in some CSS and a small span element.

http://codepen.io/ryanreese09/pen/wBmgaE

That does what @Wdideas wants, in that it displays a tooltip with that wording. But my point is that to display a tooltip, you need to be using a mouse and hover over the image. If you’re navigating by keyboard (or touchscreen, too, I presume), then you won’t see the tooltip.

If it’s important to tell people that they can click the small image for a larger version, then I generally like to have that fully visible n the page.

[quote=“RyanReese, post:5, topic:113240”]
He should probably add in some CSS and a small span element.
[/quote]That works - but again, you need to know to tab to the image in order to activate the text. If it’s obvious that the image is some kind of link, then you probably don’t need the tooltip; if it’s not obvious, then people may not realise there is anything to activate.

1 Like

Of course - I’d rather a tip being added like you suggested; it’s overall the best since I would have no clue to hover over it.

Thanks for the suggestion

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.