Problem with image links: difference in behavior (IE vs Chrome) - html

An image as a link:
<a href="https://www.w3schools.com">
<img border="0" alt="W3Schools" src="logo_w3s.gif" width="100"
height="100">
</a>
The above code behaves differently in IE and Chrome.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_image
In IE, when I tried to dragout the image it used to create a shortcut to
the href specified in the anchor tag. and also it used the alt attribute
to set the name of the short cut.
But it Chrome, It uses the image src attribute to download the image.
Is there any workaround to make it similar to IE in chrome as well?
An image as a link:
<a draggable="true" href="https://www.w3schools.com"> <img draggable="false" border="0" width="100" height="100" style='background: url(/tags/logo_w3s.gif);'></img>
</a>
I tried the above solution in Chrome, It helps in creating the shortcut
pointing to the href specified in the anchor tag. but it doesn't uses
the alt of the image.
If i tried to make
<a...>W3Schools<img...></a>
It helped but the string W3Schools is displayed as part of the page.

Related

Why does my alt tag not work at showing a description when hovering the image?

I've tried both the longdesc and the alt tag to make it so a description of the image appears when hovering it but none of them seem to work.
Any idea what to do since none of the tags seem to work.
My code currently looks like this:
<div align="center">
<img src="placeholder.jpg" width="900" height="300" alt="Placeholder">
</div>
The alt attribute stands for alternative text when the image doesn't load for any reason. The correct attribute you are looking for is title.
<img src="placeholder.jpg" width="900" height="300" title="Placeholder">

URL src image won't show

The same thing has been use for another image that uses HTML, and it works fine, exept for this one : https://media.discordapp.net/attachments/604447563185127426/665665552324362260/BCS_Bottom_Bar.png
And when I put the URL the same way I did for my other image and the same elements used, Yet it doesn't work.
Can someone help me fix it ?
<div><img width="50" height="50" src="https://media.discordapp.net/attachments/604447563185127426/665665552324362260/BCS_Bottom_Bar.png?width=1260&height=117"></div>
I've tried many alternatives to the URL, but they all don't work, I even tried changing the name.
The img tag has two required attributes: src and alt.
So you have to change your href attribute to src.
<div><img width="50" height="50" src="https://media.discordapp.net/attachments/604447563185127426/665665552324362260/BCS_Bottom_Bar.png?width=1260&height=117"></div>
For more detail, take a look at; https://www.w3schools.com/tags/tag_img.asp
It loads this way, there are no issues in your html.
As the font color is white, you maybe need to give the div a black
background like this:
<div style="background: black">
<img width="50%" height="50%" src="https://media.discordapp.net/attachments/604447563185127426/665665552324362260/BCS_Bottom_Bar.png">
</div>
I changed your width and height attributes to 50 percent.
Demo:
https://jsfiddle.net/ohc50tx6/

Image is not showing on html page

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

Image not becoming a hyperlink [duplicate]

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" />

How do I solve this issue in IE7?

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="" />