Note : Both Netscape and Internet Explorer support the Images collection (Netscape call it an array). For properties, methods and events that are supported by <IMG>
element, see the <IMG>
topic.
The Images collection is an ordered, indexed (by document source order) array, containing a reference to every <IMG>
element in a document. For example, consider the following document:
Image Objects would normally be retrieved by their index in the Images collection (for example, above document.images(3)
contains a reference to the 4th image in the document element), but a string value can be used, as long as that string is a valid identifier (ID
or NAME
attribute value) for an image element in the document.
length
The length
property returns the number of elements in the collection. Note that the length
count starts at 1, not 0 as the images collection index does. Therefore, the length
property may return a value of 5, but to access the 3rd element, you'd need to use document.images(2).property
item
The item
method retrieves single items, or sub-collections from the all collection. It accepts the following arguments:
images.item(index, sub-index)
If index
is a number, then the method returns a reference to the image object at that position in the images collection index. I.e.
bIsComplete=document.images.item(2).complete
would make bIsComplete
be a boolean value dependant on the 3rd <IMG>
elements complete
property.
If the index
property is a string value, then the item
method returns a sub-collection, containing a reference to every image in the document that has its ID
or NAME
attribute set to the string contained in the index
argument. To retrieve certain element objects from this sub-collection, the sub-index
argument must be used.
© 1995-1998, Stephen Le Hunte
Questions:
<input type="file" onchange="previewFile()"><br> <img src="" height="200" alt="Image preview...">and then the JS:
function previewFile() { const preview = document.querySelector('img'); const file = document.querySelector('input[type=file]').files[0]; const reader = new FileReader(); reader.addEventListener("load", function () { // convert image file to base64 string preview.src = reader.result; }, false); if (file) { reader.readAsDataURL(file); } }Possible uses? Local customization of a web page's display without needing to manage user settings at the server?+
file: /Techref/language/html/ib/Scripting_Reference/imgcol.htm, 3KB, , updated: 2020/6/10 17:00, local time: 2024/8/14 21:28,
18.118.30.8:LOG IN
|
©2024 These pages are served without commercial sponsorship. (No popup ads, etc...).Bandwidth abuse increases hosting cost forcing sponsorship or shutdown. This server aggressively defends against automated copying for any reason including offline viewing, duplication, etc... Please respect this requirement and DO NOT RIP THIS SITE. Questions? <A HREF="http://techref.massmind.org/Techref/language/html/ib/Scripting_Reference/imgcol.htm"> The Images collection</A> |
Did you find what you needed? |
Welcome to massmind.org! |
Welcome to techref.massmind.org! |
.