Can someone give me an HTML code for when I click on a picture it takes me to a new link?

Question

I need an html code that when I click on an image, it takes me to a new link. I REALLY need this code so if anyone can give it to me that would be great, thank in advance!

Answer 1

I don't need Best Answer, but DON'T use someone's INCORRECT HTML code! Do it right.



Making an image a link:

If site does not host images, then you MUST host your image online at any good image hosting site. The "src" image URL MUST be the DIRECT link to the image alone and not to the page the image is on.Put the DIRECT URL to ONLY the image in the src="" attribute. Put the correct link for the site in the href="" attribute.



You can change the "p" tags to div tags and style as needed.



Practice Your Link Code Online: http://www.w3schools.com/HTML/tryit.asp?filename=tryhtml_imglink

Practice HTML Code (HTML - Tryit Editor v1.4): http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro





Ron

Answer 2

in case you desire to link interior a similar web page then you particularly would desire to apply specific link tag with a # click right here to flow down on the web page the place the photograph is /a ... ... ... ... ... ... ... and then if somebody clicks on the link the web page will scroll right down to the photograph. wish that grew to become into clean adequate =)

Answer 3

Jamez's answer is good, but he forgot the REQUIRED alternate text attribute on the image tag (alt).



(Which Ron did mentioned. So I gave him the only thumbs up. For some reason, Stas S took your question literally, but the best way to add behaviour is to use already defined behaviours rather than create your own.)



It may work without it as HTML. But that attribute is mandatory (like the src element) and it will NOT work as XHTML. It does not validate as real HTML either without alternate text.



How you use it is for example:

This example makes a paragraph with an image in it of a file by the name of "portrait/" and the alternate text of "A self portrait done by myself". The alt text shows up while the image is loading, and if the image never loads, it stays as a replacement for the image. (In actuality, the image replaces the text when it loads.)



This is very important because you never know when the image might be separated from your HyperText document. This could happen:

- if you archive.

- if you change servers.

- if you lose the image.

- if the server has an error in the middle of loading.

- if your page is saved in an off-line storage.

- if the user agent is on a non-visual medium, such as tele-type or aural.

- if a user agent simply chooses not to see your images.



That way, the user will have an idea of what the image was for. If you can't come up with a good alternate text for your image, you really should consider using CSS for your image, because it might just be only a decoration image.



Other attributes that could be suggested for an image are:

- height: will apply a height on many browsers while the image is loading to prevent page loading jumping. Most new browsers are actually starting to ignore this. I suggest to use the actual height and/or width, for the sake of metadata, instead of a resized. CSS is best for resizing images in relative units.

- width: will apply a width on many browsers while the image is loading. This is actually not too useful unless if you have an image before text or another image (like an image with a caption, or an image map, although image maps are actually lists of images). Typically though, you might use CSS to say what the width of an image will be.

- class: useful if you want to apply CSS to an image, but an ancestor element might be better suited for the class.

- id: again useful for applying CSS, or behaviours, or to link to, but an ancestor element might be better suited for the id.

- longdesc: useful for adding a long description element, this is a little more complicated and I will explain it in a second.

- usemap: applies a client-side image map to this image (good for multiple, non rectangular links within an image).

- ismap: a server-side map. Not ideal because it's impossible to use with a keyboard. Technically, a form with an image input is a better choice because forms imply server-side, but it's essentially the same thing.

- Other defined attributes, which I won't mention because they aren't as useful on images =)



Semi-deprecated:

- name: a name for your image, basically the same thing as an ID, but without the added semantics (of CSS selector, EcmaScript selector, link anchor). It is only good for forms and Level 0 DOM behaviours. However, this is suggested for non-XHTML user agents. For the sake of example, I'll include this, and suppose that we're writing XHTML for an old non-XHTML user agent. This is only used on form elements in XHTML though, so it is by no means necessary.



Long descriptions: Long descriptions are a little harder to handle since they're more of a metadata and no known user agent has a useful way to link to it. A long description can be written up as follows.

[D]This is the old family farm house. It is across the bridge which goes over the ravine in my estate in Montana. This photograph was taken in the autumn and beautiful beech trees can be seen in the background.

You might find uses for long descriptions in very detailed descriptions that you might give of an image.



Finally, here are the specifications for both the image and anchor elements:

- http://www.w3.org/TR/html401/struct/objects.html#h-13.2

- http://www.w3.org/TR/html401/struct/links.html#h-12.2



For a refresher, please visit http://htmldog.com/guides/htmlbeginner/images/



To check if your website is valid in accordance to the rules of HTML 4.0 Strict (or most other W3C standards), please check with http://validator.w3.org/



I know you might not even read this since you've already picked our your best answer, but I mostly wanted to point out that alternate text IS mandatory in an image in HTML.

Answer 4

Answer 5