image attributes appearing priority - html

<img src="#" alt="abc"/>
after above code rendered in browser the position of alt and src are changed like
<img alt="abc" src="#"/>
Is there is any way to fix these problem
"I want that every time src comes before others attributes!"

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

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

preg_replace - turn <img> into <a href....><img</a>

I'm struggling to turn an image tag into a link and copy parameters within the tag i.e.
<img src="/images/image1.jpg" alt="The name of image">
into
<img src="/images/image1.jpg" alt="The name of image">
My problem is not just duplicating the src and alt data but account for missing and extra tags i.e.
<img src="/images/image1.jpg" >
into
<img src="/images/image1.jpg" >
and
<img style="padding:5px;" src="/images/image1.jpg" alt="The name of the image">
into
<img style="padding:5px;" src="/images/image1.jpg" alt="The name of the image">
This needs to be done for all instances of the img tag throughout a string.
Not meaning to sound like a challenge but can anyone propose a possible solution, I'm sure this can be done with preg_replace but I just can't work it through?
Thank you
The simplest way to do that:
HTML:
<span id="My_ID"><img class="My_img" src="/images/image1.jpg" alt="The name of image" /></span>
JavaScript and JQUERY(Not necessary but i used it for browser compatibility):
var first= true;
$('.My_img').hover(function(){
if(first == true){
//First time this prevent Dulicated runing and shows errors
first = false;//it is not thew first time anymore
var alt = $('.My_img').attr('alt');//Get the img alt
var src = $('.My_img').attr('src');//Get the img src
document.getElementById('My_ID').innerHTML = '';
}
});
To demostrate the above her is a fiddle:
http://jsfiddle.net/Mh9Np/
Simply but innerHTML is a bad practice as everyone say so i will give you an idea about the other way:(Samse HTML)
1-Store the img in a variable
2-Store the alt and src attribute in variables.
2-Create the a element.
3-Set to it the attributes you want with the help of alt and src variables.
4-Append the img to a.
5-Append a to the span.
6-Delete the original img.//Optional it might help resolving some styling issues.

What would the browser do with this html code: <img src="#"/>?

I was wondering what exactly would happen if you output <img src="#"/>? Does the browser essentially try to submit the same URI twice?
It attempts to load the current page (#) as an image. This will almost always fail, as the current page is HTML, not an image.
The same thing will happen for all of the following HTML tags as well:
<img src="?"> (more or less)
<img src="">
<img> (under some browsers!)

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