resize an image in 'a href' tag link

looking at the code below, i can show an image with a smaller size

<a href="images/image.jpg"><img src="images/image.jpg" width="300" height="214" 开发者_Python百科border="0"></a>

but what if i want the href link to show the image with a smaller size as well. so lets say the original image.jpg is 1500x1200 and in the link i want to show it 800x600.

is there anyway to do something like this:

<a href="images/image.jpg" width="800" height="600"><img src="images/image.jpg" width="300" height="214" border="0"></a>

If I understand correctly, you want to control the size of the image that is the target of the href, using attributes of the a tag?

You can't do that. Your best bet (for controlling the size from the source of the link) is to serve your images using a server-side script which accepts size parameters in a querystring. Like image.php?img=image.jpg&w=800&h=600.

But that's a whole other question and would be out of scope for me to go into detail here.

Of course if you want to just change the image to a particular size, just resize the actual image and upload it again :)

Here is a funny solution:

<a href="javascript:document.getElementsByTagName('body')[0].innerHTML='<img src=images/image.jpg width=800 height=600>'"><img src="images/image.jpg" width="300" height="214" border="0"></a>

Though personally I would not recommend it, it works. :)

since you open the image itself it is impossible.

what you can do is,

link to and empty html page with only an <img src="URL" width="" height=""/> and apply the size to it.

Check out image-resizer in nodejs.

Here's the link: https://github.com/jimmynicol/image-resizer

Or you can use cloudinary nodejs integration which provides a free tier access for first 7500 image transformations