This question already has answers here:
how to attach url link to an image?
(2 answers)
Closed 8 years ago.
i have got this picture button on my site and i am trying to link it to another page using this code but it is not working at all :)
Here is the code. PLease help.
<img src="###" width="254" height="45"/>
The <img> part should be within the <a> tags...
<img src="###" width="254" height="45"/>
Basic HTML rules are that the link is what falls between the opening and closing <a> tags, whether text or image.
You want it as this:
<img src="###" alt="alt text">
The width and height tags are deprecated as you should use CSS for them, but the alt tag is required for HTML5 validation.
Having img tag within a tag says that associate a link to my image and show the image once clicked. You can also add "target=_blank" to open your image in new tab.
### would be the link
<a href="###">
<img src="###" alt="my image" width="254" height="45" target="_blank" />
</a>
Learn more at MDN
If you want image to be linkable, you need to place img tag inside the anchor tag
<img src="img source" />
Related
<a href="#sidewidgetarea" aria-label="Navigation Menu" aria-expanded="false" class="closed"> <span a ...
Repair: Add text to the a element or the title attribute of the a element or, if an image is used within the anchor, add Alt text to the image.
what i need to do ?
if you want to put an Alt text to an img you can do this
<img src="path" alt="your text">
"Add text to the a element or the title attribute of the a element"
Here, means to add text inside <a> tag and to add title attribute to it. Titles are given to elements when you want to describe something. When you add title attribute, if you hover over the element, a pop up will be shown.
<a href="https://Google.com" title="If you click on this, it will direct you to google">
Google[hover]
</a>
"if an image is used within the anchor, add Alt text to the image."
Well, this means you must use a <img/> tag inside a <a> tag. And to add alt attribute to the image. Alt is good for SEO and highly recommended. When the image, for some reason, doesn't show, here alt comes for help and describes your image.
<img src="URL" alt="The image is not loaded, because I didn't add a source" />
<img src="https://picsum.photos/200/300" alt="You won't see alt now, because image will be shown" />
P.S. Here is a website that provides random image: Lorem Picsum.
My website: cultpops.com
I'm trying to get the top left logo on my site to link to the 'about' portion on my page. As per another stackoverflow topic, I placed [a href="#about"][/a] around said logo and [a id="about"][/a] around said portion. What am I missing here?
I see you really put [a id=”about”] in your code. This is not an html tag. html tags always are like this <htmltag> and not with square brackets
If you want to link to an anchor you just need to give an id to the html element you want (doesn't have to be an <a> tag).
The easiest way to do this is for example on the image above your about section.
Set your editor to text instead of visual and add an id to your image or the a tag around it. It will look like this.
<a href="http://www.cultpops.com/wp-content/uploads/2015/05/logo21.png" id="about">
<img class="alignnone size-full wp-image-97" src="http://www.cultpops.com/wp-content/uploads/2015/05/logo21.png" alt="logo2" width="97" height="133">
</a>
Place the following around the "img src="example.com/image.png" tag:
<a href="http://example.com/youraboutpage">
<img src="example.com/image.png">
</a>
I can see you are using wordpress -the logo image tag is in your header.php file available in Appearance>Editor
Hope this helps
Admin Alex
I have used the ALT tags for all my images with this format:
<a alt="IMAGE ALT TEXT" href="http://2.bp.blogspot.com/-MEHRDQvoG-c/Ux0mL1mlJII/AAAAAAAAGg8/S9h3KjhJ6YQ/s1600/jquery-lightbox-with-dark-background.png" imageanchor="1"><img src="http://2.bp.blogspot.com/-MEHRDQvoG-c/Ux0mL1mlJII/AAAAAAAAGg8/S9h3KjhJ6YQ/s320/jquery-lightbox-with-dark-background.png" style="height:100%; width:100%;" /></a>
But I was surprised when the image checker tools sensed their alt tags as "missing". I supposed I had to insert the "alt" tag after the "img src" tag like that:
<img src="http://2.bp.blogspot.com/-MEHRDQvoG-c/Ux0mL1mlJII/AAAAAAAAGg8/S9h3KjhJ6YQ/s320/jquery-lightbox-with-dark-background.png" alt="IMAGE ALT TEXT" style="height:100%; width:100%;" />
Tell me please will this style correct?
alt is a property of IMG tag and not of A tag. It stands for alternative text to be shown or read by screen readers. So the second example you provided is the right one.
The alt attribute must be on the element and not on the hyperlink element.
You may be confusing the "alt" tag and the "title" tag.
The "alt" tag is used with images:
<img src="someImage.jpg" alt="image">
The title tag can be used with BOTH images and links
<img src="someImage.jpg alt="image" title="Some Image">
<a href="someLink.com" title="This is some link">
There wouldn't be any need for an "alt" tag on a traditional link, because even if the link was bad, there would still be text wrapped in the anchor indicating what it is:
Link to some link
With the image, the "alt" property value only displays when the image, for whatever reason, isn't available.
the alt should be only used in <applet>, <area>, <img>, <input>
alt - <applet>, <area>, <img>, <input> - Alternative text in case an
image can't be displayed.
Source
here is a snippet of img:
<img src="http://lorempixel.com/100/100" alt="image">
I am trying to add an image on html page but it doesn't appear
<img href="img/bg.jpeg" alt="welcom" />
everything seems to be fine what is wrong with code i test it many times
It test it on two browsers chrome 19 and firefox
I tried the same with another image extension but i doesn't work
<img href="img/2.png"/>
where is the problem
You're using the wrong attribute, instead of href you need to use src - the former is for links.
This would be the correct usage:
<img src="img/bg.jpeg" alt="welcom" />
The problem is just in: href the attribute
href attribute is for ancre link <a href="#">
<a href="directory">
The src attribute is for: img tag
<img src="directory"/>
and if you want to set a background with css you only have to add
background-image : url('directory');
Trust me its so easy to get confused by this stuff
So i suggest to change href attribute with src
<img src="img/bg.jpg" alt="Welcom" />
And it should work fine
You have to write
<img src="img/bg.jpeg" alt="welcom" />
istead of
<img href="img/bg.jpeg" alt="welcom" />
You need to use src not href to point to the image file name.
<html>
<img src="imagefilename.jpg">
</html>
This code will display an image with the filename imagefilename.jpg that is in the same directory as this html file
When I am testing my page in IE7, all the image have a tooltip corresponding to the text of the alt in the image tag..
<img src="Myimage.jpg" alt="No pic" />
When I hover my mouse on the displayed pic in IE7, I get a tooltip "No pic" corresponding to the text of the alt .How do I fix this ?
IE6/7 treats the alt attribute as though it was a title attribute - but only if there's no actual title attribute set.
You can workaround it with a blank title:
<img src="Myimage.jpg" alt="No pic" title="" />
You can try adding an empty title tag
<img src="image.jpg" alt="nopic" title="" />
The answer has been posted already (empty title tag).
However, (in reference to one of the answers) alts are supposed to describe the image for 508 compliance reasons and if the image doesn't show up, so you should change the alt text to describe your picture.
I would have made a comment on the original post but SO doesn't allow me to yet.
The actual question here is why are you using alt the way you are? If your image is simply decorative, you should have an empty alt attribute. look at the W3CS definition of the alt attribute.
http://www.w3.org/QA/Tips/altAttribute
On this occasion is suspect youd actually want:
<img src="Myimage.jpg" alt="" />