create src attribute using own text

[gongpex]

Hello everyone,

 

usually to display image we use :

<img src="link of image" width=".." height="..." />

but how to create own src attribute using own text so that the function is same when we use 'src':

 

for example:

<img ourtext="link of image" width=".." height="..." />

C : In short 'ourtext' have same function with 'src'

 

please someone help me

 

Thanks

Edited February 9, 2015 by gong

[dsonesuk]

You can't, that is what makes the image show, the src attribute, or create a containing element and adjust background-image: property. You can't create your own attributes or css properties to replace those that are recognised to do there specific task.

[davej]

...how to create own src attribute using own text so that the function is same when we use 'src':

<img ourtext="link of image" width=".." height="..." />

...In short 'ourtext' have same function with 'src'

 

 

Why?

 

How is the browser supposed to know what "ourtext" means?

 

What is the purpose of this renaming of src?

[gongpex]

 

How is the browser supposed to know what "ourtext" means?

 

What is the purpose of this renaming of src?

 

Allright ,

 

sorry for long reply,

 

my question is according on : http://www.html5box.com

<div class="image_tn"><a href="images/Big_Buck_Bunny_1.m4v" data-webm="images/Big_Buck_Bunny_1.webm" class="html5lightbox" title="Big Buck Bunny Copyright Blender Foundation"><img src="images/Big_Buck_Bunny_3_96.jpg"></a></div><div class="clr"></div>

code on above they use : data-webm as 'src' so that if the browser is firefox file will be accessed from data-webm not from src,

I had test this code and it run well.

 

Q : so how to create own src attribute using own text like data-webm?

 

note : on my question before I just use img src as example to make you all understand with my question, but on this section I use real example.

 

please answer

 

Thanks

Edited February 16, 2015 by gong

[dsonesuk]

That is data-* attrbute it always start with prefix of ‘data-‘ then a custom name afterwards which can be within reason, anything as long as it is lowercase and greater than one character.It stores in this case, data about a video file to use, it is nothing to do with images, it uses getAttribute() (http://www.w3schools.com/jsref/met_element_getattribute.asp) to retrieve custom data-* attribute value, as shown here:http://www.w3schools.com/tags/att_global_data.asp if you look at the try it example.That is why we said 'ourtext' is NOT valid, while ‘data-ourtext‘ would be, as it is a customizable data-* attribute.

[alexpnd]

There is nothing special about those attributes. In HTML you are allowed to have whatever attributes you like ( not by the specification, but by the implementation). The data- type attributes are simply a way they are trying to standardize custom attributes. A standard attribute would be something like your "src". Non-standard or custom would be whatever you would like, eg. "data-ourtext". If you are working with web components you can do something internally with them, otherwise you'll need some JavaScript or JQuery to grab the attribute and do something with it.

 

eg. in jQuery

$('#myelement').data('ourtext');

 

in JavaScript

document.querySelector('#myelement').getAttribute('data-ourtext');

 

Notice how jquery has a predefined data() method? It's for your convenience.