Search completed in 1.24 seconds.
1698 results for "image":
Your results are loading. Please wait...
ImageBitmapRenderingContext.transferFromImageBitmap() - Web APIs
the imagebitmaprenderingcontext.transferfromimagebitmap() method displays the given imagebitmap in the canvas associated with this rendering context.
... the ownership of the imagebitmap is transferred to the canvas as well.
... this method was previously named transferimagebitmap(), but was renamed in a spec change.
...And 2 more matches
<image>: The obsolete Image element - HTML: Hypertext Markup Language
WebHTMLElementimage
the obsolete html image element (<image>) is an obsolete remnant of an ancient version of html lost in the mists of time; use the standard <img> element instead.
...in order to display images, use the standard <img> element.
Images in HTML - Learn web development
fortunately, it wasn't too long before the ability to embed images (and other more interesting types of content) inside web pages was added.
... there are other types of multimedia to consider, but it is logical to start with the humble <img> element, used to embed a simple image in a webpage.
... in this article we'll look at how to use it in depth, including the basics, annotating it with captions using <figure>, and detailing how it relates to css background images.
...And 78 more matches
<img>: The Image Embed element - HTML: Hypertext Markup Language
WebHTMLElementimg
the html <img> element embeds an image into the document.
... the above example shows usage of the <img> element: the src attribute is required, and contains the path to the image you want to embed.
... the alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility — screen readers read this description out to their users so they know what the image means.
...And 77 more matches
Responsive images - Learn web development
previous overview: multimedia and embedding next in this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools html provides to help implement them.
...responsive images are just one part of responsive design, a future css topic for you to learn.
... prerequisites: you should already know the basics of html and how to add static images to a web page.
...And 67 more matches
Using images - Web APIs
one of the more exciting features of <canvas> is the ability to use images.
...external images can be used in any format supported by the browser, such as png, gif, or jpeg.
... you can even use the image produced by other canvas elements on the same page as the source!
...And 63 more matches
Image file type and format guide - Web media technologies
in this guide, we'll cover the image file types generally supported by web browsers, and provide insights that will help you select the most appropriate formats to use for your site's imagery.
... common image file types there are many image file formats in the world.
... abbreviation file format mime type file extension(s) browser compatibility apng animated portable network graphics image/apng .apng chrome, edge, firefox, opera, safari bmp bitmap file image/bmp .bmp chrome, edge, firefox, internet explorer, opera, safari gif graphics interchange format image/gif .gif chrome, edge, firefox, internet explorer, opera, safari ico microsoft icon image/x-icon .ico, .cur chrome, edge, firefox, internet explorer, opera, safari jpeg joint p...
...And 59 more matches
HTMLImageElement - Web APIs
the htmlimageelement interface represents an html <img> element, providing the properties and methods used to manipulate image elements.
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlimageelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlimageelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor image()...
... the image() constructor creates and returns a new htmlimageelement object representing an html <img> element which is not attached to any dom tree.
...And 49 more matches
Images, Tables, and Mysterious Gaps - Archive of obsolete content
almost no matter when you started creating web pages, odds are pretty high you have one or more designs based on the classic "convoluted tables and lots of images" paradigm.
...back in the early days, this approach worked, because browsers would usually make a table cell exactly as wide and tall as an image it contained.
...thanks to an obscure corner of the css specification, every design based on a precise layout of small images in table cells have become visual disasters just waiting to happen.
...And 38 more matches
image() - CSS: Cascading Style Sheets
the image() css function defines an <image> in a similar fashion to the <url> function, but with added functionality including specifying the image's directionality, specifying fallback images for when the preferred image is not supported, displaying just a part of that image defined by a media fragment, and specifying a solid color as a fallback in case none of the specified images are able to be rendered.
... disambiguation: image(), the htmlimageelement constructor.
... syntax image( <image-tags>?
...And 35 more matches
Multimedia: Images - Learn web development
previous overview: performance next media, namely images and video, account for over 70% of the bytes downloaded for the average website.
...this article looks at optimizing image and video to improve web performance.
... objective: to learn about the various image formats, their impact on performance, and how to reduce the impact of images on overall page load time.
...And 34 more matches
<input type="image"> - HTML: Hypertext Markup Language
WebHTMLElementinputimage
<input> elements of type image are used to create graphical submit buttons, i.e.
... submit buttons that take the form of an image rather than text.
... value <input type="image"> elements do not accept value attributes.
...And 34 more matches
Border-image generator - CSS: Cascading Style Sheets
this tool can be used to generate css3 border-image values.
... border image generator html content <div id="container"> <div id="gallery"> <div id="image-gallery"> <img class="image" src="https://udn.realityripple.com/samples/2c/fa0192d18e.png" data-stateid="border1"/> <img class="image" src="https://udn.realityripple.com/samples/b8/dacdd63e77.png" data-stateid="border2"/> <img class="image" src="https://udn.realityripple.com/samples/07/1fcc357205.png" data-stateid="border3"/> <img class="image" src="https://udn.realityripple.com/samples/7b/dd37c1d691.png" data-stateid="border4"/> <img class="image" src="https://udn.realityripple.com/samples/a9/b9fff72dab.png" data-stateid="border5"/> <img class="image" src="https://udn.realityrippl...
...e.com/samples/fb/c0b285d3da.svg" data-stateid="border6"/> </div> </div> <div id="load-actions" class="group section"> <div id="toggle-gallery" data-action="hide"> </div> <div id="load-image" class="button"> upload image </div> <input id="remote-url" type="text" placeholder="load an image from url"/> <div id="load-remote" class="button"> </div> </div> <div id="general-controls" class="group section"> <div class="name"> control box </div> <div class="separator"></div> <div class="property"> <div class="name">scale</div> <div class="ui-input-slider" data-topic="scale" data-unit="%" data-max="300" data-sensivity="10"> ...
...And 29 more matches
HTMLImageElement.srcset - Web APIs
the htmlimageelement property srcset is a string which identifies one or more image candidate strings, separated using commas (,) each specifying image resources to use under given circumstances.
... each image candidate string contains an image url and an optional width or pixel density descriptor that indicates the conditions under which that candidate should be used instead of the image specified by the src property.
... the srcset property, along with the sizes property, are a crucial component in designing responsive web sites, as they can be used together to make pages that use appropriate images for the rendering situation.
...And 25 more matches
border-image - CSS: Cascading Style Sheets
the border-image css property draws an image around a given element.
... note: you should specify a separate border-style in case the border image fails to load.
... constituent properties this property is a shorthand for the following css properties: border-image-outset border-image-repeat border-image-slice border-image-source border-image-width syntax /* source | slice */ border-image: linear-gradient(red, blue) 27; /* source | slice | repeat */ border-image: url("/images/border.png") 27 space; /* source | slice | width */ border-image: linear-gradient(red, blue) 27 / 35px; /* source | slice | width | outset | repeat */ border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space; the border-image property may be specified with anywhere from one to five of the values listed below.
...And 24 more matches
Add a hitmap on top of an image - Learn web development
here we go over how to set up an image map, and some downsides to consider first.
... prerequisites: you should already know how to create a basic html document and how to add accessible images to a webpage.
... objective: learn how to make different regions of one image link to different pages.
...And 23 more matches
CanvasRenderingContext2D.drawImage() - Web APIs
the canvasrenderingcontext2d.drawimage() method of the canvas 2d api provides different ways to draw an image onto the canvas.
... syntax void ctx.drawimage(image, dx, dy); void ctx.drawimage(image, dx, dy, dwidth, dheight); void ctx.drawimage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight); parameters image an element to draw into the context.
... the specification permits any canvas image source (canvasimagesource), specifically, a cssimagevalue, an htmlimageelement, an svgimageelement, an htmlvideoelement, an htmlcanvaselement, an imagebitmap, or an offscreencanvas.
...And 21 more matches
background-image - CSS: Cascading Style Sheets
the background-image css property sets one or more background images on an element.
... the background images are drawn on stacking context layers on top of each other.
...how the images are drawn relative to the box and its borders is defined by the background-clip and background-origin css properties.
...And 21 more matches
HTMLImageElement.alt - Web APIs
the htmlimageelement property alt provides fallback (alternate) text to display when the image specified by the <img> element is not loaded.
... this may be the case because of an error, because the user has disabled the loading of images, or because the image simply hasn't finished loading yet.
... think of it like this: when choosing alt strings for your images, imagine what you would say when reading the page to someone over the phone without mentioning that there's an image on the page.
...And 20 more matches
<image> - CSS: Cascading Style Sheets
WebCSSimage
the <image> css data type represents a two-dimensional image.
... syntax the <image> data type can be represented with any of the following: an image denoted by the <url> data type a <gradient> data type a part of the webpage, defined by the element() function an image, image fragment or solid patch of color, defined by the image() function a blending of two or more images defined by the cross-fade() function.
... a selection of images chosed based on resolution defined by the image-set() function.
...And 20 more matches
Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
html provides a crossorigin attribute for images that, in combination with an appropriate cors header, allows images defined by the <img> element that are loaded from foreign origins to be used in a <canvas> as if they had been loaded from the current origin.
... security and tainted canvases because the pixels in a canvas's bitmap can come from a variety of sources, including images or videos retrieved from other hosts, it's inevitable that security problems may arise.
...a tainted canvas is one which is no longer considered secure, and any attempts to retrieve image data back from the canvas will cause an exception to be thrown.
...And 20 more matches
Images, media, and form elements - Learn web development
images, other media, and form elements behave a little differently in terms of your ability to style them with css than regular boxes.
... replaced elements images and video are described as replaced elements.
...as we will see however, there are various things that css can do with an image.
...And 18 more matches
Shapes From Images - CSS: Cascading Style Sheets
in this guide we will take a look at how we can create a shape from an image file with an alpha channel or even from a css gradient.
... a simple shape from an image to use an image for the shape the image needs to have an alpha channel, an area that is not fully opaque.
... the shape-image-threshold property is used to set a threshold for this opacity.
...And 18 more matches
DataTransfer.setDragImage() - Web APIs
when a drag occurs, a translucent image is generated from the drag target (the element the dragstart event is fired at), and follows the mouse pointer during the drag.
... this image is created automatically, so you do not need to create it yourself.
... however, if a custom image is desired, the datatransfer.setdragimage() method can be used to set the custom image to be used.
...And 16 more matches
-moz-image-rect - CSS: Cascading Style Sheets
the -moz-image-rect value for css background-image lets you use a portion of a larger image as a background.
... syntax -moz-image-rect(<uri>, top, right, bottom, left); values <url> the uri of the image from which to take the sub-image.
... top the top edge, specified as an <integer> or <percentage>, of the sub-image within the specified image.
...And 16 more matches
border-image-slice - CSS: Cascading Style Sheets
the border-image-slice css property divides the image specified by border-image-source into regions.
... these regions form the components of an element's border image.
...each one is used a single time to form the corners of the final border image.
...And 15 more matches
CanvasRenderingContext2D.putImageData() - Web APIs
the canvasrenderingcontext2d.putimagedata() method of the canvas 2d api paints data from the given imagedata object onto the canvas.
... note: image data can be retrieved from a canvas using the getimagedata() method.
... you can find more information about putimagedata() and general manipulation of canvas contents in the article pixel manipulation with canvas.
...And 13 more matches
WebGLRenderingContext.compressedTexImage[23]D() - Web APIs
the webglrenderingcontext.compressedteximage2d() and webgl2renderingcontext.compressedteximage3d() methods of the webgl api specify a two- or three-dimensional texture image in a compressed format.
... compressed image formats must be enabled by webgl extensions before using these methods.
... syntax // webgl 1: void gl.compressedteximage2d(target, level, internalformat, width, height, border, arraybufferview?
...And 13 more matches
WebGLRenderingContext.texImage2D() - Web APIs
the webglrenderingcontext.teximage2d() method of the webgl api specifies a two-dimensional texture image.
... syntax // webgl1: void gl.teximage2d(target, level, internalformat, width, height, border, format, type, arraybufferview?
... pixels); void gl.teximage2d(target, level, internalformat, format, type, imagedata?
...And 13 more matches
image-rendering - CSS: Cascading Style Sheets
the image-rendering css property sets an image scaling algorithm.
... the property applies to an element itself, to any images set in its other properties, and to its descendants.
... the user agent will scale an image when the page author specifies dimensions other than its natural size.
...And 13 more matches
HTMLImageElement.complete - Web APIs
the read-only htmlimageelement interface's complete attribute is a boolean value which indicates whether or not the image has completely loaded.
... syntax let doneloading = htmlimageelement.complete; value a boolean value which is true if the image has completely loaded; otherwise, the value is false.
... the image is considered completely loaded if any of the following are true: neither the src nor the srcset attribute is specified.
...And 12 more matches
HTMLImageElement.loading - Web APIs
the htmlimageelement property loading is a string whose value provides a hint to the user agent that tells the browser how to handle loading images which are currently outside the window's visual viewport.
... this helps to optimize the loading of the document's contents by postponing loading the image until it's expected to be needed, rather than immediately during the initial page load.
... syntax let imageloadscheduling = htmlimageelement.loading; htmlimageelement.loading = eagerorlazy; value a domstring providing a hint to the user agent as to how to best schedule the loading of the image to optimize page performance.
...And 12 more matches
WebGL2RenderingContext.texSubImage3D() - Web APIs
the webgl2renderingcontext.texsubimage3d() method of the webgl api specifies a sub-rectangle of the current texture.
... syntax void gl.texsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, arraybufferview?
... srcdata, optional srcoffset); void gl.texsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, imagebitmap?
...And 12 more matches
image-set() - CSS: Cascading Style Sheets
WebCSSimage-set
the image-set() css function notation is a method of letting the browser pick the most appropriate css image from a given set, primarily for high pixel density screens.
...the image-set() function delivers the most appropriate image resolution for a user’s device, providing a set of image options — each with an associated resolution declaration — from which the browser picks the most appropriate for the device and settings.
... resolution can be used as a proxy for filesize — a user agent on a slow mobile connection with a high-resolution screen may prefer to receive lower-resolution images rather than waiting for a higher resolution image to load.
...And 12 more matches
image - Archive of obsolete content
ArchiveMozillaXULimage
« xul reference home [ examples | attributes | properties | methods | related ] summary an element that displays an image, much like the html img element.
... the src attribute can be used to specify the url of the image.
... note: prior to gecko 8.0, images did not shrink down with the same ratio in both directions when specifying maximum sizes using maxheight or maxwidth.
...And 11 more matches
Image gallery - Learn web development
previous overview: building blocks now that we've looked at the fundamental building blocks of javascript, we'll test your knowledge of loops, functions, conditionals and events by getting you to build a fairly common item you'll see on a lot of websites — a javascript-powered image gallery.
... project brief you have been provided with some html, css and image assets and a few lines of javascript code; you need to write the necessary javascript to turn this into a working program.
... the html body looks like this: <h1>image gallery example</h1> <div class="full-img"> <img class="displayed-img" src="images/pic1.jpg"> <div class="overlay"></div> <button class="dark">darken</button> </div> <div class="thumb-bar"> </div> the example looks like this: the most interesting parts of the example's css file: it absolutely positions the three elements inside the full-img <div> — the <img> in which the full-sized image is displayed, an empty <div> that is sized to be the same size as the <img> and put right over the top of it (this is used to apply a darkening effect to the image via a semi-transparent background color), and a <button> that is used to control the darkening effect.
...And 11 more matches
CanvasRenderingContext2D.getImageData() - Web APIs
the canvasrenderingcontext2d method getimagedata() of the canvas 2d api returns an imagedata object representing the underlying pixel data for a specified portion of the canvas.
...if the specified rectangle extends outside the bounds of the canvas, the pixels outside the canvas are transparent black in the returned imagedata object.
... note: image data can be painted onto a canvas using the putimagedata() method.
...And 11 more matches
HTMLImageElement.sizes - Web APIs
the htmlimageelement property sizes allows you to specify the layout width of the image for each of a list of media conditions.
... this provides the ability to automatically select among different images—even images of different orientations or aspect ratios—as the document state changes to match different media conditions.
... syntax let sizes = htmlimageelement.sizes; htmlimageelement.sizes = sizes; value a usvstring containing a comma-separated list of source size descriptors followed by an optional fallback size.
...And 11 more matches
ImageCapture - Web APIs
the imagecapture interface of the mediastream image capture api provides methods to enable the capture of images or photos from a camera or other photographic device.
... it provides an interface for capturing images from a photographic device referenced through a valid mediastreamtrack.
... constructor imagecapture() creates a new imagecapture object which can be used to capture still frames (photos) from a given mediastreamtrack which represents a video stream.
...And 11 more matches
WebGLRenderingContext.compressedTexSubImage2D() - Web APIs
the webglrenderingcontext.compressedtexsubimage2d() method of the webgl api specifies a two-dimensional sub-rectangle for a texture image in a compressed format.
... compressed image formats must be enabled by webgl extensions before using this method or a webgl2renderingcontext must be used.
... syntax // webgl 1: void gl.compressedtexsubimage2d(target, level, xoffset, yoffset, width, height, format, arraybufferview?
...And 11 more matches
WebGLRenderingContext.texSubImage2D() - Web APIs
the webglrenderingcontext.texsubimage2d() method of the webgl api specifies a sub-rectangle of the current texture.
... syntax // webgl 1: void gl.texsubimage2d(target, level, xoffset, yoffset, width, height, format, type, arraybufferview?
... pixels); void gl.texsubimage2d(target, level, xoffset, yoffset, format, type, imagedata?
...And 11 more matches
image-orientation - CSS: Cascading Style Sheets
the image-orientation css property specifies a layout-independent correction to the orientation of an image.
...its functionality may be moved into properties on the <img> and/or <picture> elements, with the possible exception of from-image.
... /* keyword values */ image-orientation: none; image-orientation: from-image; /* use exif data from the image */ /* global values */ image-orientation: inherit; image-orientation: initial; image-orientation: unset; /* obsolete values.
...And 11 more matches
<image> - SVG: Scalable Vector Graphics
WebSVGElementimage
the <image> svg element includes images inside svg documents.
... it can display raster image files or other svg files.
... the only image formats svg software must support are jpeg, png, and other svg files.
...And 11 more matches
HTMLImageElement.align - Web APIs
the obsolete align property of the htmlimageelement interface is a string which indicates how to position the image relative to its container.
... you should instead use the css propertiy vertical-align, which does in fact also work on images despite its name.
... you can also use the float property to float the image to the left or right margin.
...And 10 more matches
SVGImageElement - Web APIs
the svgimageelement interface corresponds to the <image> element.
...="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgimageelement" target="_top"><rect x="111" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgimageelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interf...
... svgimageelement.crossorigin a domstring corresponding to the crossorigin attribute of the given <image> element.
...And 10 more matches
self.createImageBitmap() - Web APIs
the createimagebitmap() method creates a bitmap from a given source, optionally cropped to contain only a portion of that source.
...it accepts a variety of different image sources, and returns a promise which resolves to an imagebitmap.
... syntax const imagebitmappromise = createimagebitmap(image[, options]); const imagebitmappromise = createimagebitmap(image, sx, sy, sw, sh[, options]); parameters image an image source, which can be an <img>, svg <image>, <video>, <canvas>, htmlimageelement, svgimageelement, htmlvideoelement, htmlcanvaselement, blob, imagedata, imagebitmap, or offscreencanvas object.
...And 10 more matches
-webkit-mask-box-image - CSS: Cascading Style Sheets
-webkit-mask-box-image sets the mask image for an element's border box.
... initial value: none applies to: all elements inherited: no media: visual computed value: as specified syntax -webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>] where: <mask-box-image> <uri> | <gradient> | none <top> <right> <bottom> <left> <length> | <percentage> <x-repeat> <y-repeat> repeat | stretch | round | space values <uri> the location of the image resource to be used as a mask image.
... <gradient> a -webkit-gradient function to be used as a mask image.
...And 10 more matches
IAccessibleImage
other-licenses/ia2/accessibleimage.idlnot scriptable this interface represents images and icons.
... 1.0 66 introduced gecko 1.9 inherits from: iunknown last changed in gecko 1.9 (firefox 3) this interface is used for a representation of images like icons on buttons.
... iaccessibleimage only needs to be implemented in certain situations.
...And 9 more matches
CanvasRenderingContext2D.createImageData() - Web APIs
the canvasrenderingcontext2d.createimagedata() method of the canvas 2d api creates a new, blank imagedata object with the specified dimensions.
... syntax imagedata ctx.createimagedata(width, height); imagedata ctx.createimagedata(imagedata); parameters width the width to give the new imagedata object.
... height the height to give the new imagedata object.
...And 9 more matches
HTMLImageElement.naturalWidth - Web APIs
the htmlimageelement interface's read-only naturalwidth property returns the intrinsic (natural), density-corrected width of the image in css pixels.
... this is the width the image is if drawn with nothing constraining its width; if you neither specify a width for the image nor place the image inside a container that limits or expressly specifies the image width, this is the number of css pixels wide the image will be.
... the corresponding naturalheight method returns the natural height of the image.
...And 9 more matches
HTMLImageElement.x - Web APIs
the read-only htmlimageelement property x indicates the x-coordinate of the <img> element's left border edge relative to the root element's origin.
... the x and y properties are only valid for an image if its display property has the computed value table-column or table-column-group.
... syntax let imagex = htmlimageelement.x; value an integer value indicating the distance in pixels from the left edge of the element's nearest root element and the left edge of the <img> element's border box.
...And 9 more matches
HTMLImageElement.y - Web APIs
the read-only htmlimageelement property y indicates the y-coordinate of the <img> element's top border edge relative to the root element's origin.
... the x and y properties are only valid for an image if its display property has the computed value table-column or table-column-group.
... syntax let imagey = htmlimageelement.y; value an integer value indicating the distance in pixels from the top edge of the element's nearest root element to the top edge of the <img> element's border box.
...And 9 more matches
border-image-source - CSS: Cascading Style Sheets
the border-image-source css property sets the source image used to create an element's border image.
... the border-image-slice property is used to divide the source image into regions, which are then dynamically applied to the final border image.
... syntax /* keyword value */ border-image-source: none; /* <image> values */ border-image-source: url(image.jpg); border-image-source: linear-gradient(to top, red, yellow); /* global values */ border-image-source: inherit; border-image-source: initial; border-image-source: unset; values none no border image is used.
...And 9 more matches
mask-image - CSS: Cascading Style Sheets
the mask-image css property sets the image that is used as mask layer for an element.
... /* keyword value */ mask-image: none; /* <mask-source> value */ mask-image: url(masks.svg#mask1); /* <image> values */ mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent); mask-image: image(url(mask.png), skyblue); /* multiple values */ mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* global values */ mask-image: inherit; mask-image: initial; mask-image: unset; syntax values none this keyword is interpreted as a transparent black image layer.
... <mask-source> a <url> reference to a <mask> or to a css image.
...And 9 more matches
Using images in HTML - Web media technologies
WebMediaimages
the html <img> element lets you embed images into an html document, while the <picture> element enables responsive images.
... in this guide you'll find links to resources that deal with adding images to websites.
... references these articles cover some of the html elements and css properties that are used to control how images are displayed on the web.
...And 9 more matches
HTMLImageElement.decode() - Web APIs
the decode() method of the htmlimageelement interface returns a promise that resolves when the image is decoded and it is safe to append the image to the dom.
... this can be used to initiate loading of the image prior to attaching it to an element in the dom (or adding it to the dom as a new element), so that the image can be rendered immediately upon being added to the dom.
... this, in turn, prevents the rendering of the next frame after adding the image to the dom from causing a delay while the image loads.
...And 8 more matches
HTMLImageElement.height - Web APIs
the height property of the htmlimageelement interface indicates the height at which the image is drawn, in css pixels if the image is being drawn or rendered to any visual medium such as the screen or a printer; otherwise, it's the natural, pixel density corrected height of the image.
... syntax htmlimageelement.height = newheight; let height = htmlimageelement.height; value an integer value indicating the height of the image.
... the terms in which the height is defined depends on whether the image is being rendered to a visual medium or not.
...And 8 more matches
HTMLImageElement.naturalHeight - Web APIs
the htmlimageelement interface's naturalheight property is a read-only value which returns the intrinsic (natural), density-corrected height of the image in css pixels.
... this is the height the image is if drawn with nothing constraining its height; if you don't specify a height for the image, or place the image inside a container that either limits or expressly specifies the image height, it will be rendered this tall.
... syntax let naturalheight = htmlimageelement.naturalheight; value an integer value indicating the intrinsic height, in css pixels, of the image.
...And 8 more matches
HTMLImageElement.width - Web APIs
the width property of the htmlimageelement interface indicates the width at which the image is drawn, in css pixels if the image is being drawn or rendered to any visual medium such as the screen or a printer; otherwise, it's the natural, pixel density corrected width of the image.
... syntax htmlimageelement.width = newwidth; let width = htmlimageelement.width; value an integer value indicating the width of the image.
... the terms in which the width is defined depends on whether the image is being rendered to a visual medium or not.
...And 8 more matches
WebGL2RenderingContext.compressedTexSubImage3D() - Web APIs
the webgl2renderingcontext.compressedtexsubimage3d() method of the webgl api specifies a three-dimensional sub-rectangle for a texture image in a compressed format.
... syntax // read from the buffer bound to gl.pixel_unpack_buffer void gl.compressedtexsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, imagesize, offset); void gl.compressedtexsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, arraybufferview srcdata, optional srcoffset, optional srclengthoverride); parameters target a glenum specifying the binding point (target) of the active texture.
...level 0 is the base image level and level n is the nth mipmap reduction level.
...And 8 more matches
-moz-image-region - CSS: Cascading Style Sheets
for certain xul elements and pseudo-elements that use an image from the list-style-image property, this property specifies a region of the image that is used in place of the whole image.
... this allows elements to use different pieces of the same image to improve performance.
... /* keyword value */ -moz-image-region: auto; /* <shape> value */ -moz-image-region: rect(0, 8px, 4px, 4px); /* global values */ -moz-image-region: inherit; -moz-image-region: initial; -moz-image-region: unset; the syntax is similar to the clip property.
...And 8 more matches
<source>: The Media or Image Source element - HTML: Hypertext Markup Language
WebHTMLElementsource
it is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats.
... sizes is a list of source sizes that describes the final rendered width of the image represented by the source.
...this information is used by the browser to determine, before laying the page out, which image defined in srcset to use.
...And 8 more matches
Test your skills: HTML images - Learn web development
this aim of this skill test is to assess whether you've understood our images in html article.
... html images 1 in this task we want you to embed a simple image of some blueberries into the page.
... you need to: add the path to the image to an appropriate attribute to embed it on the page.
...And 7 more matches
ImageData() - Web APIs
the imagedata() constructor returns a newly instantiated imagedata object built from the typed array given and having the specified width and height.
... syntax new imagedata(array, width [, height]); new imagedata(width, height); parameters array optional a uint8clampedarray containing the underlying pixel representation of the image.
... if no such array is given, an image with a transparent black rectangle of the specified width and height will be created.
...And 7 more matches
ImageData - Web APIs
WebAPIImageData
the imagedata interface represents the underlying pixel data of an area of a <canvas> element.
... it is created using the imagedata() constructor or creator methods on the canvasrenderingcontext2d object associated with a canvas: createimagedata() and getimagedata().
... it can also be used to set a part of the canvas by using putimagedata().
...And 7 more matches
MediaStream Image Capture API - Web APIs
the mediastream image capture api is an api for capturing images or videos from a photographic device.
... in addition to capturing data, it also allows you to retrieve information about device capabilities such as image size, red-eye reduction and whether or not there is a flash and what they are currently set to.
... mediastream image capture concepts and usage the process of retrieving an image or video stream happens as described below.
...And 7 more matches
Adding Labels and Images - Archive of obsolete content
« previousnext » this section describes a way to add labels and images to a window.
...images xul has an element to display images within a window.
... this element is appropriately named image.
...And 6 more matches
CanvasRenderingContext2D.imageSmoothingEnabled - Web APIs
the imagesmoothingenabled property of the canvasrenderingcontext2d interface, part of the canvas api, determines whether scaled images are smoothed (true, default) or not (false).
... on getting the imagesmoothingenabled property, the last value it was set to is returned.
...when enlarging images, the default resizing algorithm will blur the pixels.
...And 6 more matches
HTMLImageElement.crossOrigin - Web APIs
the htmlimageelement interface's crossorigin attribute is a string which specifies the cross-origin resource sharing (cors) setting to use when retrieving the image.
... syntax htmlimageelement.crossorigin = crossoriginmode; let crossoriginmode = htmlimageelement.crossorigin; value a domstring of a keyword specifying the cors mode to use when fetching the image resource.
... if you don't specify crossorigin, the image is fetched without cors (the fetch no-cors mode).
...And 6 more matches
HTMLImageElement.currentSrc - Web APIs
the read-only htmlimageelement property currentsrc indicates the url of the image which is currently presented in the <img> element it represents.
... syntax let currentsource = htmlimageelement.currentsrc; value a usvstring indicating the full url of the image currently visible in the <img> element represented by the htmlimageelement.
... this is useful when you provide multiple image options using the sizes and/or htmlimageelement.srcset properties.
...And 6 more matches
Resizing background images with background-size - CSS: Cascading Style Sheets
the background-size css property lets you resize the background image of an element, overriding the default behavior of tiling the image at its full size by specifying the width and/or height of the image.
... by doing so, you can scale the image upward or downward as desired.
... tiling a large image let's consider a large image, a 2982x2808 firefox logo image.
...And 6 more matches
nsIAccessibleImage
accessible/public/nsiaccessibleimage.idlscriptable this interface allows in-process accessibility clients to retrieve information about an image.
... 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void getimageposition(in unsigned long coordtype, out long x, out long y); void getimagesize(out long width, out long height); methods getimageposition() returns the coordinates of the image accessible.
...void getimageposition( in unsigned long coordtype, out long x, out long y ); parameters coordtype specifies coordinates origin (for available constants refer to nsiaccessiblecoordinatetype).
...And 5 more matches
HTMLImageElement.isMap - Web APIs
the htmlimageelement proeprty ismap is a boolean value which indicates that the image is to be used by a server-side image map.
... this may only be used on images located within an <a> element.
... note: for accessibility reasons, you should generally avoid using server-side image maps, as they require the use of a mouse.
...And 5 more matches
HTMLImageElement.src - Web APIs
the htmlimageelement property src, which reflects the html src attribute, specifies the image to display in the <img> element.
... syntax htmlimageelement.src = newsource; let src = htmlimageelement.src; value when providing only a single image, rather than a set of images from which the browser selects the best match for the viewport size and display pixel density, the src attribute is a usvstring specifying the url of the desired image.
... if you use the srcset content attribute to provide multiple image options for different display pixel densities, the url specified by the src attribute is used in one of two ways: as a fallback for browsers that don't support srcset.
...And 5 more matches
ImageCapture.getPhotoSettings() - Web APIs
the getphotosettings() method of the imagecapture interface returns a promise that resolves with a photosettings object containing the current photo configuration settings.
... syntax const settingspromise = imagecapture.getphotosettings() return value a promise that resolves with a photosettings object containing the following properties: filllightmode: the flash setting of the capture device, one of "auto", "off", or "on".
... imageheight: the desired image height as an integer.
...And 5 more matches
WebGL2RenderingContext.copyTexSubImage3D() - Web APIs
the webgl2renderingcontext.copytexsubimage3d() method of the webgl api copies pixels from the current webglframebuffer into an existing 3d texture sub-image.
... syntax void gl.copytexsubimage3d(target, level, xoffset, yoffset, zoffset, x, y, width, height); parameters target a glenum specifying the binding point (target) of the active texture.
...level 0 is the base image level and level n is the nth mipmap reduction level.
...And 5 more matches
WebGL2RenderingContext.texImage3D() - Web APIs
the webglrenderingcontext.teximage3d() method of the webgl api specifies a three-dimensional texture image.
... syntax void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, glintptr offset); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, htmlcanvaselement source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, htmlimageelement source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, htmlvideoelement source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, imagebitmap source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, imagedata source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type,...
...srcdata); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, arraybufferview srcdata, srcoffset); parameters target a glenum specifying the binding point (target) of the active texture.
...And 5 more matches
border-image-outset - CSS: Cascading Style Sheets
the border-image-outset css property sets the distance by which an element's border image is set out from its border box.
... the parts of the border image that are rendered outside the element's border box with border-image-outset do not trigger overflow scrollbars and don't capture mouse events.
... syntax /* <length> value */ border-image-outset: 1rem; /* <number> value */ border-image-outset: 1.5; /* vertical | horizontal */ border-image-outset: 1 1.2; /* top | horizontal | bottom */ border-image-outset: 30px 2 45px; /* top | right | bottom | left */ border-image-outset: 7px 12px 14px 5px; /* global values */ border-image-outset: inherit; border-image-outset: initial; border-image-outset: unset; the border-image-outset property may be specified as one, two, three, or four values.
...And 5 more matches
border-image-repeat - CSS: Cascading Style Sheets
the border-image-repeat css property defines how the edge regions of a source image are adjusted to fit the dimensions of an element's border image.
... syntax /* keyword value */ border-image-repeat: stretch; border-image-repeat: repeat; border-image-repeat: round; border-image-repeat: space; /* vertical | horizontal */ border-image-repeat: round stretch; /* global values */ border-image-repeat: inherit; border-image-repeat: initial; border-image-repeat: unset; the border-image-repeat property may be specified using one or two values chosen from the list of values below.
... values stretch the source image's edge regions are stretched to fill the gap between each border.
...And 5 more matches
border-image-width - CSS: Cascading Style Sheets
the border-image-width css property sets the width of an element's border image.
... if this property's value is greater than the element's border-width, the border image will extend beyond the padding (and/or content) edge.
... syntax /* keyword value */ border-image-width: auto; /* <length> value */ border-image-width: 1rem; /* <percentage> value */ border-image-width: 25%; /* <number> value */ border-image-width: 3; /* vertical | horizontal */ border-image-width: 2em 3em; /* top | horizontal | bottom */ border-image-width: 5% 15% 10%; /* top | right | bottom | left */ border-image-width: 5% 2em 10% auto; /* global values */ border-image-width: inherit; border-image-width: initial; border-image-width: unset; the border-image-width property may be specified using one, two, three, or four values chosen from the list of values below.
...And 5 more matches
image-rendering - SVG: Scalable Vector Graphics
the image-rendering attribute provides a hint to the browser about how to make speed vs.
... quality tradeoffs as it performs image processing.
... note: as a presentation attribute, image-rendering can be used as a css property.
...And 5 more matches
Image() - Web APIs
the image() constructor creates a new htmlimageelement instance.
... disambiguation: image(), the css function notation.
... syntax var htmlimageelement = new image(width, height); parameters width the width of the image (i.e., the value for the width attribute).
...And 4 more matches
HTMLImageElement.longDesc - Web APIs
the obsolete property longdesc on the htmlimageelement interface specifies the url of a text or html file which contains a long-form description of the image.
... syntax descurl = htmlimageelement.longdesc; htmlimageelement.longdesc = descurl; value a domstring which may be either an empty string (indicating that no long description is available) or the url of a file containing a long form description of the image's contents.
... for example, if the image is a png of a flowchart.
...And 4 more matches
ImageBitmap - Web APIs
the imagebitmap interface represents a bitmap image which can be drawn to a <canvas> without undue latency.
... it can be created from a variety of source objects using the createimagebitmap() factory method.
... imagebitmap provides an asynchronous and resource efficient pathway to prepare textures for rendering in webgl.
...And 4 more matches
ImageCapture.takePhoto() - Web APIs
the takephoto() method of the imagecapture interface takes a single exposure using the video capture device sourcing a mediastreamtrack and returns a promise that resolves with a blob containing the data.
... syntax const blobpromise = imagecaptureobj.takephoto([photosettings]) parameters photosettings optional an object that sets options for the photo to be taken.
... imageheight: the desired image height as an integer.
...And 4 more matches
WebGLRenderingContext.copyTexSubImage2D() - Web APIs
the webglrenderingcontext.copytexsubimage2d() method of the webgl api copies pixels from the current webglframebuffer into an existing 2d texture sub-image.
... syntax void gl.copytexsubimage2d(target, level, xoffset, yoffset, x, y, width, height); parameters target a glenum specifying the binding point (target) of the active texture.
...level 0 is the base image level and level n is the nth mipmap reduction level.
...And 4 more matches
shape-image-threshold - CSS: Cascading Style Sheets
the shape-image-threshold css property sets the alpha channel threshold used to extract the shape using an image as the value for shape-outside.
... /* <number> value */ shape-image-threshold: 0.7; /* global values */ shape-image-threshold: inherit; shape-image-threshold: initial; shape-image-threshold: unset; syntax values <alpha-value> sets the threshold used for extracting a shape from an image.
... formal definition initial value0.0applies tofloatsinheritednocomputed valuethe same as the specified value after clipping the <number> to the range [0.0, 1.0].animation typea number formal syntax <alpha-value>where <alpha-value> = <number> | <percentage> examples aligning text to a gradient this example creates a <div> block with a gradient background image.
...And 4 more matches
Crisp pixel art look with image-rendering - Game development
original size 4x size 4x size (scaled with an image editor) none vendor's algorithm nearest-neighbor algorithm a css-based solution the good news is that you can use css to automatically do the up-scaling, which not only solves the blur problem, but also allows you to use the images in their original, smaller size, thus saving download time.
... also, some game techniques require algorithms that analyse images, which also benefit from working with smaller images.
... the css property to achieve this scaling is image-rendering.
...And 3 more matches
Test your skills: Images and Form elements - Learn web development
the aim of this task is to help you check your understanding of some of the values and units that we looked at in the lesson on images, media and form elements.
... task one in this task, you have an image that is overflowing the box.
... we want the image to scale down to fit inside the box without any extra white space, but we do not mind if some part of the image is cropped.
...And 3 more matches
Document.images - Web APIs
WebAPIDocumentimages
the images read-only property of the document interface returns a collection of the images in the current html document.
... syntax var imagecollection = document.images; value an htmlcollection providing a live list of all of the images contained in the current document.
... each entry in the collection is an htmlimageelement representing a single image element.
...And 3 more matches
Document.mozSetImageElement() - Web APIs
the document.mozsetimageelement() method changes the element being used as the css background for a background with a given background element id.
... syntax document.mozsetimageelement(imageelementid, imageelement); parameters imageelementid is a string indicating the name of an element that has been specified as a background image using the -moz-element css function.
... imageelement is the new element to use as the background corresponding to that image element string.
...And 3 more matches
HTMLImageElement.decoding - Web APIs
the decoding property of the htmlimageelement interface represents a hint given to the browser on how it should decode the image.
...possible values are: sync: decode the image synchronously for atomic presentation with other content.
... async: decode the image asynchronously to reduce delay in presenting other content.
...And 3 more matches
HTMLImageElement.lowSrc - Web APIs
the htmlimageelement interface's obsolete lowsrc property can be used to specify the url of a reduced-quality or otherwise faster-loading version of the image specified by the src property.
... syntax htmlimageelement.lowsrc = imageurl; imageurl = htmlimageelement.lowsrc; value a domstring specifying the url of a version of the image specified by src which has been modified in some fashion so that it loads significantly more quickly than the primary image.
... there are a number of ways to achieve this; primary among them: higher compression levels (for example, a primary image saved as a jpeg using 85% quality might have a lowsrc version saved at 15%.
...And 3 more matches
ImageCapture.getPhotoCapabilities() - Web APIs
the getphotocapabilities() method of the imagecapture interface returns a promise that resolves with a photocapabilities object containing the ranges of available configuration options.
... syntax const capabilitiespromise = imagecaptureobj.getphotocapabilities() return value a promise that resolves with a photocapabilities object.
... example the following example, extracted from chrome's image capture / photo resolution sample, uses the results from getphotocapabilities() to modify the size of an input range.
...And 3 more matches
ImageData.data - Web APIs
WebAPIImageDatadata
the readonly imagedata.data property returns a uint8clampedarray that contains the imagedata object's pixel data.
... syntax imagedata.data examples getting an imagedata object's pixel data this example creates an imagedata object that is 100 pixels wide and 100 pixels tall, making 10,000 pixels in all.
... let imagedata = new imagedata(100, 100); console.log(imagedata.data); // uint8clampedarray[40000] console.log(imagedata.data.length); // 40000 filling a blank imagedata object this example creates and fills a new imagedata object with colorful pixels.
...And 3 more matches
SVGFEImageElement - Web APIs
the svgfeimageelement interface corresponds to the <feimage> element.
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeimageelement" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeimageelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this inte...
... svgfeimageelement.preserveaspectratio read only an svganimatedpreserveaspectratio corresponding to the preserveaspectratio attribute of the given element.
...And 3 more matches
list-style-image - CSS: Cascading Style Sheets
the list-style-image css property sets an image to be used as the list item marker.
... syntax /* keyword values */ list-style-image: none; /* <url> values */ list-style-image: url('starsolid.gif'); /* global values */ list-style-image: inherit; list-style-image: initial; list-style-image: unset; values <url> location of image to use as the marker.
... none specifies that no image is used as the marker.
...And 3 more matches
SVG as an Image - SVG: Scalable Vector Graphics
svg images can be used as an image format, in a number of contexts.
... many browsers support svg images in: html <img> or <svg> elements css background-image gecko-specific contexts additionally, gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) introduced support for using svg in these contexts: css list-style-image css content svg <image> element svg <feimage> element canvas drawimage function restrictions for security purposes, gecko places some restrictions on svg content when it's being used as an image: javascript is disabled.
...images, stylesheets) cannot be loaded, though they can be used if inlined through data: uris.
...And 3 more matches
XPCOM category image-sniffing-services
in versions of firefox prior to firefox 3, extensions could add decoders for new image types.
... however, such decoders relied on servers sending correct mime types; images sent with incorrect mime types would not be correctly displayed.
... in firefox 3, a new xpcom category was added in bug 391667 to allow "third-party" xpcom components to identify images based on their content.
...And 2 more matches
CanvasRenderingContext2D.imageSmoothingQuality - Web APIs
the imagesmoothingquality property of the canvasrenderingcontext2d interface, part of the canvas api, lets you set the quality of image smoothing.
... note: for this property to have an effect, imagesmoothingenabled must be true.
... syntax ctx.imagesmoothingquality = "low" || "medium" || "high" options possible values: "low" low quality.
...And 2 more matches
HTMLImageElement.border - Web APIs
the obsolete htmlimageelement property border specifies the number of pixels thick the border surrounding the image should be.
... syntax htmlimageelement.border = thickness; let thickness = htmlimageelement.border; value a domstring containing an integer value specifying the thickness of the border that should surround the image, in css pixels.
...instead, use the css border property and its longhand properties to establish borders around images.
...And 2 more matches
HTMLImageElement.useMap - Web APIs
the usemap property on the htmlimageelement interface reflects the value of the html usemap attribute, which is a string providing the name of the client-side image map to apply to the image.
... syntax htmlimageelement.usemap = imagemapanchor; let imagemapanchor = htmlimageelement.usemap; value a usvstring providing the page-local url (that is, a url that begins with the hash or pound symbol, "#") of the <map> element which defines the image map to apply to the image.
... you can learn more about client-side image maps in our learning article add a hitmap on top of an image.
...And 2 more matches
ImageBitmapRenderingContext - Web APIs
the imagebitmaprenderingcontext interface is a canvas rendering context that provides the functionality to replace the canvas's contents with the given imagebitmap.
... methods imagebitmaprenderingcontext.transferfromimagebitmap() displays the given imagebitmap in the canvas associated with this rendering context.
... ownership of the imagebitmap is transferred to the canvas.
...And 2 more matches
ImageCapture() constructor - Web APIs
the imagecapture() constructor creates a new imagecapture object.
... syntax const imagecapture = new imagecapture(videotrack) parameters videotrack a mediastreamtrack from which the still images will be taken.
... return value a new imagecapture object which can be used to capture still frames from the specified video track.
...And 2 more matches
ImageCapture.grabFrame() - Web APIs
the grabframe() method of the imagecapture interface takes a snapshot of the live video in a mediastreamtrack and returns a promise that resolves with a imagebitmap containing the snapshot.
... syntax const bitmappromise = imagecapture.grabframe() return value a promise that resolves to an imagebitmap object.
... example this example is extracted from this simple image capture demo.
...And 2 more matches
MediaImage - Web APIs
the media session api's mediaimage dictionary describes the images associated with the media resource mediametadata.
... properties src the url from which user agent can fetch the image's data.
... sizes specifies the resource in multiple sizes so that user agent does not have to scale a single image.
...And 2 more matches
SVGImageElement.decoding - Web APIs
the decoding property of the svgimageelement interface represents a hint given to the browser on how it should decode the image.
... syntax var refstr = svgimageelement.decoding svgimageelement.decoding = refstr; values a domstring representing the decoding hint.
... possible values are: sync: decode the image synchronously for atomic presentation with other content.
...And 2 more matches
WebGLRenderingContext.copyTexImage2D() - Web APIs
the webglrenderingcontext.copyteximage2d() method of the webgl api copies pixels from the current webglframebuffer into a 2d texture image.
... syntax void gl.copyteximage2d(target, level, internalformat, x, y, width, height, border); parameters target a glenum specifying the binding point (target) of the active texture.
...level 0 is the base image level and level n is the nth mipmap reduction level.
...And 2 more matches
-moz-force-broken-image-icon - CSS: Cascading Style Sheets
the -moz-force-broken-image-icon extended css property can be used to force the broken image icon to be shown even when a broken image has an alt attribute.
... syntax values <integer> a value of 1 means that the broken image icon is shown even if the image has an alt attribute.
... when the value 0 is used the image will act as usual and only display the alt attribute.
...And 2 more matches
image - Archive of obsolete content
« xul reference home image type: uri the uri of the image to appear on the element.
... if this attribute is empty or left out, no image appears.
... the position of the image is determined by the dir and orient attributes.
... example <menuitem label="foo" class="menuitem-iconic" image="something.png"/> see also image element ...
CSSImageValue - Web APIs
the cssimagevalue interface of the css typed object model api represents values for properties that take an image, for example background-image, list-style-image, or border-image-source.
... the cssimagevalue object represents an <image> that involves an url, such as url() or image(), but not linear-gradient() or element() .
... examples we create an element <button>magic wand</button> we add some css, including a background image requesting a binary file: button { display: inline-block; min-height: 100px; min-width: 100px; background: no-repeat 5% center url(https://mdn.mozillademos.org/files/16793/magicwand.png) aqua; } we get the element's style map.
... we then get() the background-image from the stylemap and stringify it: // get the element const button = document.queryselector( 'button' ); // retrieve all computed styles with computedstylemap() const allcomputedstyles = button.computedstylemap(); // return the cssimagevalue example console.log( allcomputedstyles.get('background-image') ); console.log( allcomputedstyles.get('background-image').tostring() ); specifications specification status comment css typed om level 1the definition of 'cssimagevalue' in that specification.
HTMLImageElement.hspace - Web APIs
the obsolete hspace property of the htmlimageelement interface specifies the number of pixels of empty space to leave empty on the left and right sides of the <img> element when laying out the page.
... syntax htmlimageelement.hspace = marginwidth; marginwidth = htmlimageelement.hspace; value an integer value specifying the width, in pixels, of the horizontal margin to apply to the left and right sides of the image.
... specifications specification status comment html living standardthe definition of 'htmlimageelement.hspace' in that specification.
... living standard html 4.01 specificationthe definition of 'htmlimageelement.hspace' in that specification.
HTMLImageElement.name - Web APIs
the htmlimageelement interface's deprecated name property specifies a name for the element.
... syntax htmlimageelement.name = namestring; namestring = htmlimageelement.name; value a domstring providing a name by which the image can be referenced.
... specifications specification status comment html living standardthe definition of 'htmlimageelement.name' in that specification.
... living standard html 4.01 specificationthe definition of 'htmlimageelement.name' in that specification.
HTMLImageElement.vspace - Web APIs
the obsolete vspace property of the htmlimageelement interface specifies the number of pixels of empty space to leave empty on the top and bottom of the <img> element when laying out the page.
... syntax htmlimageelement.vspace = marginheight; marginheight = htmlimageelement.vspace; value an integer value specifying the height, in pixels, of the vertical margin to apply to the top and bottom sides of the image.
... specifications specification status comment html living standardthe definition of 'htmlimageelement.vspace' in that specification.
... living standard html 4.01 specificationthe definition of 'htmlimageelement.vspace' in that specification.
PhotoCapabilities.imageHeight - Web APIs
the imageheight read-only property of the photocapabilities interface returns a mediasettingsrange object indicating the image height range supported by the user agent.
... syntax var mediasettingsrange = photocapabilities.imageheight value a mediasettingsrange object.
... specifications specification status comment mediastream image capturethe definition of 'imageheight' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetimageheight experimentalchrome full support 59edge full support ≤79firefox ?
imageWidth - Web APIs
the imagewidth read-only property of the photocapabilities interface returns a mediasettingsrange object indicating the image width range supported by the user agent.
... syntax var mediasettingsrange = photocapabilities.imagewidth value a mediasettingsrange is an object.
... specifications specification status comment mediastream image capturethe definition of 'imagewidth' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetimagewidth experimentalchrome full support 59edge full support ≤79firefox ?
Implementing image sprites in CSS - CSS: Cascading Style Sheets
image sprites are used in numerous web apps where multiple images are used.
... rather than include each image as a separate image file, it is much more memory- and bandwidth-friendly to send them as a single image; using background position as a way to distinguish between individual images in the same image file, so the number of http requests is reduced.
... implementation suppose an image is given to every item with class toolbtn: .toolbtn { background: url(myfile.png); display: inline-block; height: 20px; width: 20px; } a background position can be added either as two x, y values after the url()() in the background, or as background-position.
... for example: #btn1 { background-position: -20px 0px; } #btn2 { background-position: -40px 0px; } this would move the element with the id 'btn1' 20 pixels to the left and the element with the id 'btn2' 40 pixels to the left (assuming they have the class toolbtn assigned and are affected by the image rule above).
CSS Images - CSS: Cascading Style Sheets
css images is a module of css that defines what types of images can be used (the <image> type, containing urls, gradients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout models.
... reference properties image-orientation image-rendering image-resolution object-fit object-position functions linear-gradient() radial-gradient() repeating-linear-gradient() repeating-radial-gradient() conic-gradient() repeating-conic-gradient() url() element() image() cross-fade() data types <gradient> <image> guides using css gradients presents a specific type of css images, gradients, and how to create and use these.
... implementing image sprites in css describes the common technique grouping several images in one single document to save download requests and speed up the availability of a page.
... specifications specification status comment css images module level 4 working draft added image-resolution, conic-gradient(), and image() css images module level 3 candidate recommendation added image-orientation, image-rendering, object-fit and object-position compatibility standardthe definition of 'css gradients' in that specification.
image.onload - Archive of obsolete content
« xul reference home image.onload type: script code this event handler will be called on the image element when the image has finished loading.
... this applies whether the image is applied via the src attribute or the list-style-image style property.
... if you change the image, the event will fire again when the new image loads.
showimagecolumn - Archive of obsolete content
« xul reference home showimagecolumn type: boolean if true, an image column appears in the popup.
... there is no default styling of this image, but the class name returned by the results appears in the property list for the column.
... if this attribute is not specified, the image column doesn't appear.
Raster image - MDN Web Docs Glossary: Definitions of Web-related terms
a raster image is an image file defined as a grid of pixels.
...common raster image formats on the web are jpeg, png, gif, and ico.
... raster image files usually contain one set of dimensions, but the ico and cur formats, used for favicons and css cursor images, can contain multiple sizes.
nsISelectionImageService
layout/base/nsiselectionimageservice.idlnot scriptable please add a summary to this article.
... inherits from: nsisupports last changed in gecko 1.7 method overview void getimage(in short selectionvalue, out imgicontainer container); void reset(); methods getimage() retrieve the image for alpha blending.
... void getimage( in short selectionvalue, out imgicontainer container ); parameters selectionvalue container reset() the current image is marked as invalid.
ImageBitmap.close() - Web APIs
WebAPIImageBitmapclose
the imagebitmap.close() method disposes of all graphical resources associated with an imagebitmap.
... syntax void imagebitmap.close() examples var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext('webgl'); // ...
... var bitmap = offscreen.transfertoimagebitmap(); // imagebitmap { width: 256, height: 256 } bitmap.close(); // imagebitmap { width: 0, height: 0 } -- disposed specifications specification status comment html living standardthe definition of 'close()' in that specification.
ImageCapture.track - Web APIs
the track read-only property of the imagecapture interface returns a reference to the mediastreamtrack passed to the imagecapture() constructor.
... syntax const mediastreamtrack = imagecaptureobj.track value a mediastreamtrack object.
... specifications specification status comment mediastream image capturethe definition of 'track' in that specification.
ImageData.height - Web APIs
WebAPIImageDataheight
the readonly imagedata.height property returns the number of rows in the imagedata object.
... syntax imagedata.height example this example creates an imagedata object that is 200 pixels wide and 100 pixels tall.
... let imagedata = new imagedata(200, 100); console.log(imagedata.height); // 100 specification specification status comment html living standardthe definition of 'imagedata.height' in that specification.
ImageData.width - Web APIs
WebAPIImageDatawidth
the readonly imagedata.width property returns the number of pixels per row in the imagedata object.
... syntax imagedata.width example this example creates an imagedata object that is 200 pixels wide and 100 pixels tall.
... let imagedata = new imagedata(200, 100); console.log(imagedata.width); // 200 specification specification status comment html living standardthe definition of 'imagedata.width' in that specification.
Notification.image - Web APIs
the image read-only property of the notification interface contains the url of an image to be displayed as part of the notification, as specified in the image option of the notification() constructor.
... syntax var image = notification.image; value a usvstring.
... specifications specification status comment notifications apithe definition of 'image' in that specification.
OffscreenCanvas.transferToImageBitmap() - Web APIs
the offscreencanvas.transfertoimagebitmap() method creates an imagebitmap object from the most recently rendered image of the offscreencanvas.
... syntax imagebitmap offscreencanvas.transfertoimagebitmap() return value an imagebitmap.
... offscreen.transfertoimagebitmap(); // imagebitmap { width: 256, height: 256 } specifications specification status comment html living standardthe definition of 'offscreencanvas.transfertoimagebitmap()' in that specification.
SVGImageElement.decode - Web APIs
the decode() method of the svgimageelement interface initiates asynchronous decoding of an image, returning a promise that resolves once the image data is ready for use.
... syntax var promise = svgimageelement.decode(); parameters none.
... return value a promise which resolves once the image data is ready to be used, such as by appending it to the dom, replacing an existing image, and so forth.
Media type and format guide: image, audio, and video content - Web media technologies
WebMediaFormats
originally, these capabilities were limited, and were expanded organically, with different browsers finding their own solutions to the problems around including still and video imagery on the web.
... references images image file type and format guide covers support of image file types and content formats across the major web browsers, as well as providing basic information about each type: benefits, limitations, and use cases of interest to web designers and developers.
... image file types for web designers fundamental information about the various image file types that may be useful for web designers, including best practices and use cases for each type, and guidelines for choosing the right image file format for specific types of content.
<feImage> - SVG: Scalable Vector Graphics
WebSVGElementfeImage
the <feimage> svg filter primitive fetches image data from an external source and provides the pixel data as output (meaning if the external source is an svg image, it is rasterized.) usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <animatetransform>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes xlink attributes class style externalresourcesrequired specific attributes preserveaspectratio xlink:href dom interface this element implements the svgfeimageelement interface.
... example svg <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="image"> <feimage xlink:href="/files/6457/mdn_logo_only_color.png"/> </filter> </defs> <rect x="10%" y="10%" width="80%" height="80%" style="filter:url(#image);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<feimage>' in that specification.
... scalable vector graphics (svg) 1.1 (second edition)the definition of '<feimage>' in that specification.
SVG image element - SVG: Scalable Vector Graphics
« previousnext » the svg <image> element allows for raster images to be rendered within an svg object.
... in this basic example, a .jpg image referenced by an href attribute will be rendered inside an svg object: <?xml version="1.0" standalone="no"?> <!doctype svg public "-//w3c//dtd svg 1.1//en" "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd"> <svg width="5cm" height="4cm" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image href="firefox.jpg" x="0" y="0" height="50px" width="50px"/> </svg> there are some important things to take note of (referenced from the w3 specs): if you do not set the x or y attributes, they will be set to 0.
... having a height or width attribute of 0 will disable rendering of the image.
treecol-image - Archive of obsolete content
« xul reference home treecol-image use this class to have an image appear on the tree column header.
... specify the image using the src attribute.
View background images - Firefox Developer Tools
in the rules view, you can see a preview of images specified using background-image.
... just hover over the rule: from firefox 41, if you right-click the image declaration, you'll see an option to copy the image as a data: url: ...
CanvasImageSource - Web APIs
canvasimagesource provides a mechanism for other interfaces to be used as image sources for some methods of the canvasdrawimage and canvasfillstrokestyles interfaces.
... the interfaces that it allows to be used as image sources are the following: htmlimageelement svgimageelement htmlvideoelement htmlcanvaselement imagebitmap offscreencanvas specifications specification status comment html living standardthe definition of 'canvasimagesource' in that specification.
HTMLImageElement.referrerPolicy - Web APIs
the htmlimageelement.referrerpolicy property reflects the html referrerpolicy attribute of the <img> element defining which referrer is sent when fetching the resource.
... examples var img = new image(); img.src = 'img/logo.png'; img.referrerpolicy = 'origin'; var div = document.getelementbyid('divaround'); div.appendchild(img); // fetch the image using the origin as the referrer specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
ImageBitmap.height - Web APIs
the read-only imagebitmap.height property returns the imagebitmap object's height in css pixels.
... specifications specification status comment html living standardthe definition of 'imagebitmap.height' in that specification.
ImageBitmap.width - Web APIs
WebAPIImageBitmapwidth
the read-only imagebitmap.width property returns the imagebitmap object's width in css pixels.
... specifications specification status comment html living standardthe definition of 'imagebitmap.height' in that specification.
SVGImageElement.height - Web APIs
the height read-only property of the svgimageelement interface returns an svganimatedlength corresponding to the height attribute of the given <image> element.
... syntax var height = svgimageelement.height value an svganimatedlength.
SVGImageElement.preserveAspectRatio - Web APIs
the preserveaspectratio read-only property of the svgimageelement interface returns an svganimatedpreserveaspectratio corresponding to the preserveaspectratio attribute of the given <image> element.
... syntax var svganimatedpreerveaspectratio = svgimageelement.preserveaspectratio; value an svganimatedpreserveaspectratio.
SVGImageElement.width - Web APIs
the width read-only property of the svgimageelement interface returns an svganimatedlength corresponding to the width attribute of the given <image> element.
... syntax var width = svgimageelement.width; value an svganimatedlength.
SVGImageElement.x - Web APIs
WebAPISVGImageElementx
the x read-only property of the svgimageelement interface returns an svganimatedlength corresponding to the x attribute of the given <image> element.
... syntax var x = svgimageelement.x; value an svganimatedlength.
SVGImageElement.y - Web APIs
WebAPISVGImageElementy
the y read-only property of the svgimageelement interface returns an svganimatedlength corresponding to the y attribute of the given <image> element.
... syntax var y = svgimageelement.y; value an svganimatedlength.
Feature-Policy: legacy-image-formats - HTTP
the http feature-policy header legacy-image-formats directive controls whether the current document is allowed to display images in legacy formats.
... syntax feature-policy: legacy-image-formats <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
Feature-Policy: oversized-images - HTTP
the http feature-policy header oversized-images directive controls whether the current document is allowed to download and display large images.
... syntax feature-policy: oversized-images <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
Feature-Policy: unoptimized-images - HTTP
the http feature-policy header unoptimized-images directive controls whether the current document is allowed to download and display unoptimized images.
... syntax feature-policy: unoptimized-images <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
image - Archive of obsolete content
ArchiveMozillaXULPropertyimage
« xul reference image type: image url gets and sets the value of the image attribute.
menulist.image - Archive of obsolete content
« xul reference image type: image url the image associated with the currently selected item.
showImageColumn - Archive of obsolete content
« xul reference showimagecolumn type: boolean gets and sets the value of the showimagecolumn attribute.
:-moz-system-metric(images-in-menus) - Archive of obsolete content
the :-moz-system-metric(images-in-menus) css pseudo-class matches an element if the computer's user interface supports images in menus.
GetImagePosition
this content is now available at nsiaccessibleimage.getimageposition().
GetImageSize
this content is now available at nsiaccessibleimage.getimagesize().
Index - Web APIs
WebAPIIndex
389 css.paintworklet (static property) api, css, css paint api, experimental, houdini, painting, property, reference, worklet, paintworklet paintworklet is a static, read-only property of the css interface that provides access to the paintworklet, which programmatically generates an image where a css property expects a file.
... 398 using the css painting api css, css paint api, canvas, houdini, learn the css paint api is designed to enable developers to programmatically define images which can then be used anywhere a css image can be invoked, such as css background-image, border-image, mask-image, etc.
... 406 cssimagevalue api, css typed object model api, cssimagevalue, experimental, houdini, interface, reference the cssimagevalue interface of the css typed object model api represents values for properties that take an image, for example background-image, list-style-image, or border-image-source.
...And 145 more matches
imgIContainer
image/public/imgicontainer.idlscriptable represents an image in the gecko rendering engine.
...it also provides methods for drawing images onto thebes contexts.
... internally, this interface also manages animation of images.
...And 53 more matches
SVG documentation index - SVG: Scalable Vector Graphics
WebSVGIndex
found 383 pages: # page tags and summary 1 svg: scalable vector graphics 2d graphics, graphics, icons, images, reference, responsive design, svg, scalable graphics, scalable images, vector graphics, web, l10n:priority scalable vector graphics (svg) are an xml-based markup language for describing two-dimensional based vector graphics.xml 2 applying svg effects to html content css, guide, html, svg modern browsers support using svg within css styles to apply graphical effects to html content.
...after applying the kernelmatrix of the <feconvolvematrix> element to the input image to yield a number and applied the divisor attribute, the bias attribute is added to each component.
... 47 color-profile deprecated, needsexample, svg, svg attribute the color-profile attribute is used to define which color profile a raster image included through the <image> element should use.
...And 40 more matches
Drawing graphics - Learn web development
graphics on the web as we talked about in our html multimedia and embedding module, the web was originally just text, which was very boring, so images were introduced — first via the <img> element and later via css properties such as background-image, and svg.
...while you could use css and javascript to animate (and otherwise manipulate) svg vector images — as they are represented by markup — there was still no way to do the same for bitmap images, and the tools available were rather limited.
...this element is used to define the area on the page into which the image will be drawn.
...And 38 more matches
filter - CSS: Cascading Style Sheets
WebCSSfilter
filters are commonly used to adjust the rendering of images, backgrounds, and borders.
... filter: url(resources.svg#c1) filter functions blur() the blur() fucntion applies a gaussian blur to the input image.
... filter: blur(5px) <table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">original image</th> <th style="text-align: left;" scope="col">live example</th> <th style="text-align: left;" scope="col">svg equivalent</th> <th style="text-align: left;" scope="col">static example</th> </tr> </thead> <tbody> <tr> <td><img alt="test_form.jpg" id="img1" class="internal default" src="/files/3710/test_form_2.jpg" style="width: 100%;" /></td> <td><img alt=...
...And 36 more matches
Backgrounds and borders - Learn web development
from adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in css.
... background images the background-image property enables the display of an image in the background of an element.
... in the example below, we have two boxes — one has a background image which is larger than the box, the other has a small image of a star.
...And 34 more matches
Scaling of SVG backgrounds - CSS: Cascading Style Sheets
given the flexibility of svg images, there's a lot to keep in mind when using them as background images with the background-image property, and even more to keep in mind when also scaling them using the background-size property.
... this article describes how scaling of svg images is handled when using these properties.
... if the image has an intrinsic ratio (that is, its width:height ratio is constant, such as 16:9, 4:3, 2.39:1, 1:1, and so forth), the rendered size preserves that ratio.
...And 32 more matches
Pixel manipulation with canvas - Web APIs
with the imagedata object you can directly read and write a data array to manipulate pixel data.
... we will also look into how image smoothing (anti-aliasing) can be controlled and how to save images from your canvas.
... the imagedata object the imagedata object represents the underlying pixel data of an area of a canvas object.
...And 31 more matches
cross-fade() - CSS: Cascading Style Sheets
the css cross-fade() function can be used to blend two or more images at a defined transparency.
... it can be used for many simple image manipulations, such as tinting an image with a solid color or highlighting a particular area of the page by combining an image with a radial gradient.
... specification syntax the cross-fade() function takes a list of images with a percentage defining how much of each image is retained in terms of opacity when it is blended with the other images.
...And 31 more matches
Adding vector graphics to the Web - Learn web development
prerequisites: you should know the basics of html and how to insert an image into your document.
... objective: learn how to embed an svg (vector) image into a webpage.
... on the web, you'll work with two types of image — raster images, and vector images: raster images are defined using a grid of pixels — a raster image file contains information showing exactly where each pixel is to be placed, and exactly what color it should be.
...And 30 more matches
background-size - CSS: Cascading Style Sheets
the background-size css property sets the size of the element's background image.
... the image can be left to its natural size, stretched, or constrained to fit the available space.
... spaces not covered by a background image are filled with the background-color property, and the background color will be visible behind background images that have transparency/translucency.
...And 30 more matches
Index - Archive of obsolete content
mention the localization layer 393 making a mozilla installation modifiable add-ons, extensions mozilla's user interface is made up of xul (described below), xbl (a topic for another tutorial), javascript, css, and image files.
... xul, xbl, javascript, and css files are all in text format and can be edited in a standard text editor, while image files are in binary gif, jpg, or png format and must be edited with an image editing program.
...how to edit images, extract zip files, and how to modify css.
...And 29 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
in a typical image file, the color channels describe how much red, green, and blue are used to make up the final color.
...in vector images, they are used to model smooth curves that can be scaled indefinitely.
... 47 cms cms, composing, content management system, glossary a cms (content management system) is software that allows users to publish, organize, change, or remove various kinds of content, not only text but also embedded images, video, audio, and interactive code.
...And 24 more matches
mask-size - CSS: Cascading Style Sheets
WebCSSmask-size
the mask-size css property specifies the sizes of the mask images.
... the size of the image can be fully or partially constrained in order to preserve its intrinsic ratio.
... /* keywords syntax */ mask-size: cover; mask-size: contain; /* one-value syntax */ /* the width of the image (height set to 'auto') */ mask-size: 50%; mask-size: 3em; mask-size: 12px; mask-size: auto; /* two-value syntax */ /* first value: width of the image, second value: height */ mask-size: 50% auto; mask-size: 3em 25%; mask-size: auto 6px; mask-size: auto auto; /* multiple values */ /* do not confuse this with mask-size: auto auto */ mask-size: auto, auto; mask-size: 50%, 25%, 25%; mask-size: 6px, auto, contain; /* global values */ mask-size: inherit; mask-size: initial; mask-size: unset; note: if the value of this property is not set in a mask shorthand property that is applied to the element after the mask-size css property, the value of this property is then reset to its initial ...
...And 23 more matches
HTML: A good basis for accessibility - Learn web development
text alternatives whereas textual content is inherently accessible, the same cannot necessarily be said for multimedia content — image and video content cannot be seen by visually-impaired people, and audio content cannot be heard by hearing-impaired people.
... we have a simple example written up, accessible-image.html, which features four copies of the same image: <img src="dinosaur.png"> <img src="dinosaur.png" alt="a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> <img src="dinosaur.png" alt="a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." title="the mozilla red dinosaur"> <img src="dinosaur.png" aria-labelledby="dino-label"> <p id="dino-label">the mozilla red tyrannosaurus rex: a two legged dinosau...
...r standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p> the first image, when viewed by a screen reader, doesn't really offer the user much help — voiceover for example reads out "/dinosaur.png, image".
...And 22 more matches
HTML: A good basis for accessibility - Learn web development
text alternatives whereas textual content is inherently accessible, the same cannot necessarily be said for multimedia content — image and video content cannot be seen by visually-impaired people, and audio content cannot be heard by hearing-impaired people.
... we have a simple example written up, accessible-image.html, which features four copies of the same image: <img src="dinosaur.png"> <img src="dinosaur.png" alt="a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> <img src="dinosaur.png" alt="a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." title="the mozilla red dinosaur"> <img src="dinosaur.png" aria-labelledby="dino-label"> <p id="dino-label">the mozilla red tyrannosaurus rex: a two legged dinosau...
...r standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p> the first image, when viewed by a screen reader, doesn't really offer the user much help — voiceover for example reads out "/dinosaur.png, image".
...And 22 more matches
Index - Learn web development
3 accessible multimedia accessibility, article, audio, beginner, codingscripting, html, images, javascript, learn, multimedia, video, captions, subtitles, text tracks this chapter has provided a summary of accessibility concerns for multimedia content, along with some practical solutions.
...the enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.
...we'll start by creating a simple webpage with a heading, an image, and a few paragraphs.
...And 22 more matches
Index
MozillaTechXPCOMIndex
95 xpcom category image-sniffing-services add-ons, extensions, needscontent in versions of firefox prior to firefox 3, extensions could add decoders for new image types.
... however, such decoders relied on servers sending correct mime types; images sent with incorrect mime types would not be correctly displayed.
...non-text objects can have either a single link or a collection of links such as when the non-text object is an image map.
...And 22 more matches
Using files from web applications - Web APIs
consider this html: <input type="file" id="fileelem" multiple accept="image/*" style="display:none"> <button id="fileselect">select some files</button> the code that handles the click event can look like this: const fileselect = document.getelementbyid("fileselect"), fileelem = document.getelementbyid("fileelem"); fileselect.addeventlistener("click", function (e) { if (fileelem) { fileelem.click(); } }, false); you can style the new button for opening the ...
... consider this html: <input type="file" id="fileelem" multiple accept="image/*" class="visually-hidden"> <label for="fileelem">select some files</label> and this css: .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } /* separate rule for compatibility, :focus-within is required on modern firefox and chrome */ input.visually-hidden:focus + label { outline: thin dotted; } input.visua...
... example: showing thumbnails of user-selected images let's say you're developing the next great photo-sharing website and want to use html to display thumbnail previews of images before the user actually uploads them.
...And 22 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
WebHTMLElementinput
<input type="file" accept="image/*, text/*" name="file"/> hidden a control that is not displayed but whose value is submitted to the server.
... image a graphical submit button.
... displays an image defined by the src attribute.
...And 22 more matches
In-Depth - Archive of obsolete content
values: normal, reverse -moz-image-region this is useful for dividing up an image into multiple smaller images.
...check out the section on organizing images for more information.
... example: -moz-image-region: rect(168px 69px 189px 46px); -moz-opacity makes boxes semi-transparent.
...And 21 more matches
Animated PNG graphics
MozillaTechAPNG
authors the apng specification was authored by: stuart parmenter <pavlov@pavlov.net> vladimir vukicevic <vladimir@pobox.com> andrew smith <asmith15@littlesvr.ca> overview apng is an extension of the portable network graphics (png) format, adding support for animated images.
... it is intended to be a replacement for simple animated images that have traditionally used the gif format, while adding support for 24-bit images and 8-bit transparency.
... apng is a simpler alternative to mng, providing a spec suitable for the most common usage of animated images on the internet.
...And 21 more matches
Web video codec guide - Web media technologies
if the codec converts the media into an internal pixel format, or otherwise represents the image using a means other than simple pixels, the format of the original image doesn't make any difference.
...additionally, in saturated portions of the image (that is, where colors are pure and intense, such as a bright, pure red [rgba(255, 0, 0, 1)]), color depths below 10 bits per component (10-bit color) allow banding, where gradients cannot be represented without visible stepping of the colors.
... frame rate primarily affects the perceived smoothness of the motion in the image.
...And 21 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
you can then view previously-captured images and delete them.
... our desktop layout for snapshot is three columns, containing the camera viewer, image capture view, and gallery, respectively.
...in the snapshot example, we ended up with slightly different code: x-card:nth-child(1) video, x-card:nth-child(2) img { width: 100%; … } this is because in our case, we do in fact want the video and image to stretch to always fill their containers no matter what — a subtle but important difference from max-width — and therefore always be the same size.
...And 21 more matches
imgIRequest
inherits from: nsirequest last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) method overview void cancelandforgetobserver(in nsresult astatus); imgirequest clone(in imgidecoderobserver aobserver); void decrementanimationconsumers(); imgirequest getstaticrequest(); void incrementanimationconsumers(); void lockimage(); void requestdecode(); void unlockimage(); attributes attribute type description corsmode long the cors mode that this image was loaded with.
... image imgicontainer the image container.
... imageprincipal nsiprincipal the principal gotten from the channel the image was loaded from.
...And 20 more matches
Using the CSS Painting API - Web APIs
the css paint api is designed to enable developers to programmatically define images which can then be used anywhere a css image can be invoked, such as css background-image, border-image, mask-image, etc.
... to programmatically create an image used by a css stylesheet we need to work through a few steps: define a paint worklet using the registerpaint() function register the worklet include the paint() css function to elaborate over these steps, we're going to start by creating a half-highlight background, like on this header: css paint worklet in an external script file, we employ the registerpaint() function to name our css paint worklet.
...the second parameter is the class that does all the magic, defining the context options and what to paint to the two-dimensional canvas that will be our image.
...And 20 more matches
Progressive loading - Progressive web apps (PWAs)
images besides javascript and css, websites will likely contain a number of images.
... when you include <img> elements in your html, then every referenced image will be fetched and downloaded during initial website access.
... it's not unusual to have megabytes of image data to download before announcing the site is ready, but this again creates a bad perception of performance.
...And 19 more matches
context-menu - Archive of obsolete content
for example, a good use of the menu would be to show an "edit image" item when the user right-clicks an image in the page.
...it does not occur when the user invokes the context menu on a link, image, or other non-text node, or while a selection exists.
...for instance, you might want your menu item to appear for any page that has at least one image, but declarative contexts won't help you there.
...And 18 more matches
Theme concepts
themes developed using the webextensions api in firefox enable you to change the look of the browser by adding images to the header area of the firefox browser; this is the area behind the menu bar, toolbars, address bar, search bar, and tab strip.
... these theme options can be implemented as static themes (although the theme images themselves may be animated) or as dynamic themes created in a browser extension.
... defining a theme to create a theme (in this example a simple, single image theme): create a folder in a suitable location on your computer.
...And 17 more matches
Creating localizable web applications
don't put text or numbers in images.
...good: body.de foo, body.fr foo, body.pl foo { /* locale-specific rules for the foo element */ width: 10em; /* originally 8em */ } adapt the interaction to rtl locales right-to-left locales not only require good images handling (see images), but also should be taken into account when designing the interaction on the website.
...this is useful for strings occurring in the webapp multiple times, like "return to top", "comments", "click to see larger image" etc.
...And 17 more matches
Using textures in WebGL - Web APIs
the code that loads the texture looks like this: // // initialize a texture and load an image.
... // when the image finished loading copy it into the texture.
... // function loadtexture(gl, url) { const texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); // because images have to be download over the internet // they might take a moment until they are ready.
...And 17 more matches
Sizing items in CSS - Learn web development
a straightforward example is an image.
... an image has a width and a height defined in the image file it is embedding into the page.
... this size is described as the intrinsic size — which comes from the image itself.
...And 16 more matches
Add to iPhoto
once installed, when you right-click on an image, you'll see among the options in the contextual menu an option to "add image to iphoto".
... choose it, and iphoto will start up (if it's not already running) and import the image.
...we use a few of these routines because the launch services routine we'll be using to launch iphoto and pass it the image to import uses cfurl for the file references.
...And 16 more matches
Applying styles and colors - Web APIs
the resulting image should look something like the screenshot.
...by increasing the step count and in effect drawing more circles, the background would completely disappear from the center of the image.
...in the images below, the grid represents the canvas coordinate grid.
...And 16 more matches
Drag Operations - Web APIs
these include text selections, images, and links.
... when an image or link is dragged, the url of the image or link is set as the drag data, and a drag begins.
... in html, apart from the default behavior for images, links, and selections, no other elements are draggable by default.
...And 16 more matches
mask - CSS: Cascading Style Sheets
WebCSSmask
the mask css shorthand property hides an element (partially or fully) by masking or clipping the image at specific points.
... constituent properties this property is a shorthand for the following css properties: mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size syntax /* keyword values */ mask: none; /* image values */ mask: url(mask.png); /* pixel image used as mask */ mask: url(masks.svg#star); /* element within svg graphic used as mask */ /* combined values */ mask: url(masks.svg#star) luminance; /* element within svg graphic used as lumina...
...mask: inherit; mask: initial; mask: unset; /* multiple masks */ mask: url(masks.svg#star) left / 16px repeat-y, /* element within svg graphic is used as a mask on the left-hand side with a width of 16px */ url(masks.svg#circle) right / 16px repeat-y; /* element within svg graphic is used as a mask on the right-hand side with a width of 16px */ values <mask-reference> sets the mask image source.
...And 16 more matches
CSS3 - Archive of obsolete content
css backgrounds and borders module level 3 candidate recommendation adds: support, on backgrounds, for any type of <image>, and not only for uri() defined ones.
... support for multiple background images.
... support for the use of an <image> as the border with the css border-image, border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat properties.
...And 15 more matches
Tips for authoring fast-loading HTML pages - Learn web development
if you use background images a lot in your css, you can reduce the number of http lookups needed by combining the images into one, known as an image sprite.
... then you just apply the same image each time you need it for a background and adjust the x/y coordinates appropriately.
... this technique works best with elements that will have limited dimensions, and will not work for every use of a background image.
...And 15 more matches
JavaScript-DOM Prototypes in Mozilla
as an example of this let's look at an html image element in a document.
... var obj = document.images[0]; here, obj will not really have any properties (except for the standard jsobject properties such as constructor, and the non-standard __parent__, __proto__, etc.), all the dom functionality of obj comes from obj's prototype (obj.__proto__) that xpconnect sets up when exposing the first image in document to javascript.
... all those properties come from the interfaces that the c++ image object (nshtmlimageelement) implements and chooses to expose to xpconnect through the object's class info.
...And 15 more matches
-webkit-mask-composite - CSS: Cascading Style Sheets
the -webkit-mask-composite property specifies the manner in which multiple mask images applied to the same element are composited with one another.
... mask images are composited in the opposite order that they are declared with the -webkit-mask-image property.
... syntax values clear overlapping pixels in the source mask image and the destination mask image are cleared.
...And 15 more matches
background - CSS: Cascading Style Sheets
the background shorthand css property sets all background style properties at once, such as color, image, origin and size, or repeat method.
... constituent properties this property is a shorthand for the following css properties: background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size syntax /* using a <background-color> */ background: green; /* using a <bg-image> and <repeat-style> */ background: url("test.jpg") repeat-y; /* using a <box> and <background-color> */ background: border-box red; /* a single image, centered and scaled */ background: no-repeat center/80% url("../img/image.png"); the background ...
... the syntax of each layer is as follows: each layer may include zero or one occurrences of any of the following values: <attachment> <bg-image> <position> <bg-size> <repeat-style> the <bg-size> value may only be included immediately after <position>, separated with the '/' character, like this: "center/80%".
...And 15 more matches
More Button Features - Archive of obsolete content
adding an image you can add an image to a button by specifying a url in the image attribute.
... the image is loaded from the url, which can be a relative or absolute url, and then the image is displayed on the button.
... the button below will have both a label and the image 'happy.png'.
...And 14 more matches
Advanced styling effects - Learn web development
first, some html: <article class="simple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> now the css: p { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .simple { box-shadow: 5px 5px 5px rgba(0,0,0,0.7); } this gives us the following result: you'll see that we've got four items in the box-shadow property value: the first length value is the horizontal offset — the distance to the right the shadow is offset from the original box (or left, if the value is negative).
... multiple box shadows you can also specify multiple box shadows in a single box-shadow declaration, by separating them with commas: <article class="multiple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> p { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .multiple { box-shadow: 1px 1px 1px black, 2px 2px 1px black, 3px 3px 1px red, 4px 4px 1px red, 5px 5px 1px black, 6px 6px 1px black; } now we get this result: we've done something fun here by creating a raised box with multiple coloured layers, but you coul...
... first, we'll go with some different html for this example: <button>press me!</button> button { width: 150px; font-size: 1.1rem; line-height: 2; border-radius: 10px; border: none; background-image: linear-gradient(to bottom right, #777, #ddd); box-shadow: 1px 1px 1px black, inset 2px 3px 5px rgba(0,0,0,0.3), inset -2px -3px 5px rgba(255,255,255,0.5); } button:focus, button:hover { background-image: linear-gradient(to bottom right, #888, #eee); } button:active { box-shadow: inset 2px 2px 1px black, inset 2px 3px 5px rgba(0,0,0,0.3), ...
...And 14 more matches
Overview of CSS Shapes - CSS: Cascading Style Sheets
the specification defines three new properties: shape-outside — allows definition of basic shapes shape-image-threshold — sets an opacity threshold value.
... if an image is being used to define the shape, only the parts of the image that are the same opacity or greater than the threshold value are used in the shape.
... in the following example i have an image floated left.
...And 14 more matches
background-repeat - CSS: Cascading Style Sheets
the background-repeat css property sets how background images are repeated.
... a background image can be repeated along the horizontal and vertical axes, or not repeated at all.
... by default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space).
...And 14 more matches
<input type="file"> - HTML: Hypertext Markup Language
WebHTMLElementinputfile
additional attributes in addition to the common attributes shared by all <input> elements, inputs of type file also support the following attributes: attribute description accept one or more unique file type specifiers describing file types to allow capture what source to use for capturing image or video data files a filelist listing the chosen files multiple a boolean which, if present, indicates that the user may choose more than one file accept the accept attribute value is a string that defines the file types the file input should accept.
... for instance, there are a number of ways microsoft word files can be identified, so a site that accepts word files might use an <input> like this: <input type="file" id="docpicker" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"> capture the capture attribute value is a string that specifies which camera to use for capture of image or video data, if the accept attribute indicates that the input should be of one of those types.
... the string image/* meaning "any image file".
...And 14 more matches
Create Your Own Firefox Background Theme - Archive of obsolete content
how to create your own background theme themes are made up of a "header" graphic image file, which skins the default firefox ui background.
... creating a theme header image the header image is displayed as the background of the top of the browser window, nestling in behind the toolbars, address bar, search bar and the tab strip.
... image requirements dimensions should be 3000px wide × 200px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui.
...And 13 more matches
Dealing with files - Learn web development
so for example, if you put an image on your website at, test-site/myimage.jpg and then in a different file you try to invoke the image as test-site/myimage.jpg, it may not work.
...the most common things we'll have on any website project we create are an index html file and folders to contain images, style files, and script files.
... let's create these now: index.html: this file will generally contain your homepage content, that is, the text and images that people see when they first go to your site.
...And 13 more matches
SVG Guidelines
pros and cons of svg for images when used as a document format there is usually a compelling reason that makes svg the only solution.
... when used as an image format, it is sometimes less obvious whether it would be best to use svg or a raster image format for any given image.
... file size whether svg or a raster format will produce a smaller file for a given image depends very much on the image.
...And 13 more matches
nsIDragService
nsidragsession getcurrentsession( ) ; void invokedragsession( in nsidomnode adomnode, in nsisupportsarray atransferables, in nsiscriptableregion aregion, in unsigned long aactiontype ); void invokedragsessionwithimage(in nsidomnode adomnode, in nsisupportsarray atransferablearray, in nsiscriptableregion aregion, in unsigned long aactiontype, in nsidomnode aimage, in long aimagex, in long aimagey, in nsidomdragevent adragevent, in nsidomdatatransfer adatatransfer); void invokedragsessionwithselection(in nsiselection aselection, in nsisupportsarray atransferablearray, in unsigned long aactiontype, in n...
...this is used on mac and windows to update the position of a popup being used as a drag image during the drag operation.
... invokedragsessionwithimage() starts a modal drag session using an image.
...And 13 more matches
CanvasRenderingContext2D - Web APIs
it is used for drawing shapes, text, images, and other objects.
... canvasrenderingcontext2d.createpattern() creates a pattern using the specified image (a canvasimagesource).
... compositing canvasrenderingcontext2d.globalalpha alpha value that is applied to shapes and images before they are composited onto the canvas.
...And 13 more matches
Using Service Workers - Web APIs
now for a real example — what if we wanted to load images dynamically, but we wanted to make sure the images were loaded before we tried to display them?
...we can use .onload to only display the image after it’s loaded, but what about events that start happening before we start listening to them?
... we could try to work around this using .complete, but it’s still not foolproof, and what about multiple images?
...And 13 more matches
background-position - CSS: Cascading Style Sheets
the background-position css property sets the initial position for each background image.
... syntax /* keyword values */ background-position: top; background-position: bottom; background-position: left; background-position: right; background-position: center; /* <percentage> values */ background-position: 25% 75%; /* <length> values */ background-position: 0 0; background-position: 1cm 2cm; background-position: 10ch 8em; /* multiple images */ background-position: 0 0, center; /* edge offsets values */ background-position: bottom 10px right 20px; background-position: right 3em bottom 10px; background-position: bottom 10px right; background-position: top right 10px; /* global values */ background-position: inherit; background-position: initial; background-position: unset; the background-position property is specified as one or m...
... 1-value syntax: the value may be: the keyword value center, which centers the image.
...And 13 more matches
mask-repeat - CSS: Cascading Style Sheets
the mask-repeat css property sets how mask images are repeated.
... a mask image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all.
...; mask-repeat: no-repeat; /* two-value syntax: horizontal | vertical */ mask-repeat: repeat space; mask-repeat: repeat repeat; mask-repeat: round space; mask-repeat: no-repeat round; /* multiple values */ mask-repeat: space round, no-repeat; mask-repeat: round repeat, space, repeat-x; /* global values */ mask-repeat: inherit; mask-repeat: initial; mask-repeat: unset; by default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space).
...And 13 more matches
<picture>: The Picture element - HTML: Hypertext Markup Language
WebHTMLElementpicture
the html <picture> element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.
...the selected image is then presented in the space occupied by the <img> element.
... to decide which url to load, the user agent examines each <source>'s srcset, media, and type attributes to select a compatible image that best matches the current layout and capabilities of the display device.
...And 13 more matches
Custom toolbar button - Archive of obsolete content
optional tools you can optionally use any image editor to customize the images.
...paste it into the new file: #custom-button-1, #wrapper-custom-button-1 {list-style-image: url("chrome://custombutton/content/button-1.png");} /* common style for all custom buttons */ .custombutton {-moz-image-region: rect( 0px 24px 24px 0px);} .custombutton:hover {-moz-image-region: rect(24px 24px 48px 0px);} [iconsize="small"] .custombutton {-moz-image-region: rect( 0px 40px 16px 24px);} [iconsize="small"] .custombutton:hover {-moz-image-region: rect(24px 40px 40px 24...
...it links to the button image, specifying the dimensions of the four parts of the image.
...And 12 more matches
Creating a Skin - Archive of obsolete content
a simple skin the image below shows the current find files dialog.
... the following style rules added to findfile.css will cause the changes shown in the accompanying image.
...note in the image that this style has applied only to the first tab, because it's the selected one.
...And 12 more matches
<statusbarpanel> - Archive of obsolete content
unlike normal buttons, a statusbarpanel can only have a label or an image but not both.
... attributes crop, image, label properties image, label style classes statusbarpanel-iconic, statusbarpanel-iconic-text, statusbarpanel-menu-iconic examples <statusbar> <statusbarpanel label="left panel"/> <spacer flex="1"/> <progressmeter mode="determined" value="82"/> <statusbarpanel label="right panel"/> </statusbar> attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute.
...for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } image type: uri the uri of the image to appear on the element.
...And 12 more matches
How can we design for all types of users? - Learn web development
if you want an elastic/responsive website, and you don't know what the browser's default width is, you can use the max-width property to allow up to 70 characters per line and no more: div.container { max-width:70em; } alternative content for images, audio, and video websites often include stuff besides plain text.
... images images can be either decorative or informative, but there's no guarantee that your users can see them.
... your readers may be using a very strict intranet that blocks images originating from a cdn.
...And 12 more matches
HTML basics - Learn web development
for example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables.
...the enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.
...take the <img> element that we already have in our html page: <img src="images/firefox-icon.png" alt="my test image"> this contains two attributes, but there is no closing </img> tag and no inner content.
...And 12 more matches
Taking still photos with WebRTC - Web APIs
next, we have a <canvas> element into which the captured frames are stored, potentially manipulated in some way, and then converted into an output image file.
... we also have an <img> element into which we will draw the image — this is the final display shown to the user.
... (function() { var width = 320; // we will scale the photo width to this var height = 0; // this will be computed based on the input stream var streaming = false; var video = null; var canvas = null; var photo = null; var startbutton = null; those variables are: width whatever size the incoming video is, we're going to scale the resulting image to be 320 pixels wide.
...And 12 more matches
Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
this change means that the aspect ratio of the image is calculated by the browser early on and can then be used to correct the size needed to display the image before it has loaded, if css has been applied that causes problems with its display size.
... jank problems when loading images in the olden days of web development, it was always seen as a good practice to add width and height attributes to your html <img> elements, so that when browsers first loaded the page, they could put a correctly-sized placeholder box in the layout for each image to appear in when it finally loads.
... without the width and height attributes, no placeholder space would be created, and when the image finally loaded you would get a noticeable jank in the page layout.
...And 12 more matches
widget - Archive of obsolete content
creation and content widgets can contain images or arbitrary web content.
...if the content is an image, it is automatically scaled to be 16x16 pixels.
... for example, this widget contains an image, so it looks like a simple icon: require("sdk/widget").widget({ id: "mozilla-icon", label: "my mozilla widget", contenturl: "http://www.mozilla.org/favicon.ico" }); you can make contenturl point to an html or icon file which you have packaged inside your add-on.
...And 11 more matches
Index - Archive of obsolete content
ArchiveMozillaXULIndex
unlike normal buttons, a statusbarpanel can only have a label or an image but not both.
... 155 image xul attributes, xul reference no summary!
... 156 image.onload no summary!
...And 11 more matches
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
floating fish with the cards set up to float, the next step was to place the images appropriately.
... this involved floating the image inside the floated div.
...i also added a border to the image, so that it would have a nice frame.
...And 11 more matches
2D maze game with device orientation - Game development
there are also three folders in the directory: img: all the images that we will use in the game.
...without the framework, to add the canvas element to the page, you would have to write something like this inside the <body> tag: <canvas id='game' width='320' height='480'></canvas> the important thing to remember is that the framework is setting up helpful methods to speed up a lot of things like image manipulation or assets management, which would be a lot harder to do manually.
... var ball = { _width: 320, _height: 480 }; ball.boot = function(game) {}; ball.boot.prototype = { preload: function() { this.load.image('preloaderbg', 'img/loading-bg.png'); this.load.image('preloaderbar', 'img/loading-bar.png'); }, create: function() { this.game.scale.scalemode = phaser.scalemanager.show_all; this.game.scale.pagealignhorizontally = true; this.game.scale.pagealignvertically = true; this.game.state.start('preloader'); } }; the main ball object is defined and we'...
...And 11 more matches
Responsive design - Learn web development
the second technique was the idea of fluid images.
... using a very simple technique of setting the max-width property to 100%, images would scale down smaller if their containing column became narrower than the image's intrinsic size, but never grow larger.
... this enables an image to scale down to fit in a flexibly-sized column, rather than overflow it, but not grow larger and become pixellated if the column becomes wider than the image.
...And 11 more matches
Styling lists - Learn web development
handling list spacing when styling lists, you need to adjust their styles so they keep the same vertical spacing as their surrounding elements (such as paragraphs and images; sometimes called vertical rhythm), and the same horizontal spacing as each other (you can see the finished styled example on github, and find the source code too.) the css used for the text styling and spacing is as follows: /* general styles */ html { font-family: helvetica, arial, sans-serif; font-size: 10px; } h2 { font-size: 2rem; } ul,ol,dl,p { font-size: 1.5rem; } li, p { ...
... list-style-image: allows you to use a custom image for the bullet, rather than a simple square or circle.
... if you set the value to inside, the bullets will sit inside the lines: ol { list-style-type: upper-roman; list-style-position: inside; } using a custom bullet image the list-style-image property allows you to use a custom image for your bullet.
...And 11 more matches
JavaScript basics - Learn web development
if values couldn't change, then you couldn't do anything dynamic, like personalize a greeting message or change an image displayed in an image gallery.
... adding an image changer in this section, you will learn how to use javascript and dom api features to alternate the display of one of two images.
... this change will happen as a user clicks the displayed image.
...And 11 more matches
Graceful asynchronous programming with Promises - Learn web development
in the first example, we'll use the fetch() method to fetch an image from the web, the blob() method to transform the fetch response's raw body contents into a blob object, and then display that blob inside an <img> element.
... first of all, download our simple html template and the sample image file that we'll fetch.
... inside your <script> element, add the following line: let promise = fetch('coffee.jpg'); this calls the fetch() method, passing it the url of the image to fetch from the network as a parameter.
...And 11 more matches
imgIDecoderObserver
image/public/imgidecoderobserver.idlscriptable this interface is used both for observing imgidecoder objects and for observing imgirequest objects.
... it lets you monitor the progress of loading an image.
...load notifications are fired as the image is loaded from the network or filesystem.
...And 11 more matches
HTMLCanvasElement.toBlob() - Web APIs
the htmlcanvaselement.toblob() method creates a blob object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.
... if type is not specified, the image type is image/png.
... the created image is in a resolution of 96dpi.
...And 11 more matches
Digital video concepts - Web media technologies
encoding color representing the colors in an image or video requires several values for each pixel.
... rgb most computer graphics models use the rgb color system, wherein some number of bits of data are used to represent each of the red, green, and blue components of the color of an individual pixel, and an image is comprised of a two-dimensional array of these pixels.
... yuv unlike rgb, the yuv (or y'uv) color encoding system is based around how humans perceive a color image.
...And 11 more matches
Graphic design for responsive sites - Progressive web apps (PWAs)
serving images selectively via css in general, you will use mostly the same graphical assets for different layouts in a responsive design, but you may well include slightly different ones dependant on context.
... making html <img>s responsive is not as easy, as there is currently no native mechanism to serve different html images depending on context.
...for an overview of what's available, read choosing a responsive image solution.
...And 11 more matches
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
optional tools you can optionally use any image editor to customize the images.
...paste it into the new file: #custom-button-1 {list-style-image: url("chrome://custombutton/content/button-1s.png");} /* common style for all custom buttons - modern */ #nav-bar .custombutton {-moz-image-region: rect( 0px 41px 39px 0px);} #nav-bar .custombutton:hover {-moz-image-region: rect( 0px 83px 39px 42px);} #nav-bar .custombutton:active {-moz-image-region: rect( 0px 125px 39px 84px);} .custombutton {-moz-image-region: rect(39px 49px 72px ...
... 0px);} .custombutton:hover {-moz-image-region: rect(39px 98px 72px 49px);} .custombutton:active {-moz-image-region: rect(39px 147px 72px 98px);} /* common style for all custom buttons - classic */ .custombutton {-moz-image-region: rect( 0px 145px 20px 126px);} .custombutton:hover {-moz-image-region: rect( 0px 164px 20px 145px);} .custombutton:active {-moz-image-region: rect( 0px 183px 20px 164px);} remove one of the common style sections, leaving the section for the theme that you use in seamonkey.
...And 10 more matches
menuitem - Archive of obsolete content
attributes acceltext, accesskey, allowevents, autocheck, checked, closemenu, command, crop, description, disabled, image, key, label, name, selected, tabindex, type, validate, value properties accessibletype, accesskey, command, control, crop, disabled, image, label, labelelement, parentcontainer, selected, tabindex, value style classes menuitem-iconic, menuitem-non-iconic examples <menulist> <menupopup> <menuitem label="option 1" value="1"/> <menuitem label="option 2" value="2"/> <menuitem label="option 3" value="3"...
... image type: uri the uri of the image to appear on the element.
... if this attribute is empty or left out, no image appears.
...And 10 more matches
Mozilla splash page - Learn web development
previous overview: multimedia and embedding in this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about mozilla!
... objective: to test knowledge around embedding images and video in web pages, frames, and html responsive image techniques.
... starting point to start off this assessment, you need to grab the html and all the images available in the mdn-splash-page-start directory on github.
...And 10 more matches
imgIEncoder
1.0 66 introduced gecko 1.8 inherits from: nsiasyncinputstream last changed in gecko 1.9 (firefox 3) method overview void addimageframe( [array, size_is(length), const] in pruint8 data, in unsigned long length, in pruint32 width, in pruint32 height, in pruint32 stride, in pruint32 frameformat, in astring frameoptions); void encodeclipboardimage(in nsiclipboardimage aclipboardimage, out nsifile aimagefile); obsolete since gecko 1.9 void endimageencode(); void initfromdata([array, size_is(length), const] in pruint8 data, in unsigned long length, in pruint32 width, in pruint32 height, in pruint32 stride, in pruint32 inputformat, in astring outputoptions); voi...
...d startimageencode(in pruint32 width, in pruint32 height, in pruint32 inputformat, in astring outputoptions); constants possible values for input format (note that not all image formats support saving alpha channels): constant value description input_format_rgb 0 input is rgb each pixel is represented by three bytes: r, g, and b (in that order, regardless of host endianness) input_format_rgba 1 input is rgb each pixel is represented by four bytes: r, g, and b (in that order, regardless of host endianness).
... apng: ----- the following options can be used with startimageencode(): transparency=[yes|no|none] -- default: "yes" overrides default from input format.
...And 10 more matches
Perceivable - Accessibility
non-text content refers to multimedia such as images, audio, and video.
... success criteria how to conform to the criteria practical resource 1.1.1 provide text equivalents (a) all images that convey meaningful content should be given suitable alternative text.
... complex images or charts should have an accessible alternative provided, either on the same page or via a link.
...And 10 more matches
content - CSS: Cascading Style Sheets
WebCSScontent
/* keywords that cannot be combined with other values */ content: normal; content: none; /* <image> values */ content: url("http://www.example.com/test.png"); content: linear-gradient(#e66465, #9198e5); /* alt text for generated content, added in the level 3 specification */ content: url("http://www.example.com/test.png") / "this is the alt text"; /* values below can only be applied to generated content using ::before and ::after */ /* <string> value */ content: "prefix"; /* <counter> values */ content: counter(chapter_counter); content: counters(section_counter, "."); /* attr() value linked to the html attribute value */ content: attr(value s...
... <image> an <image>, denoted by the <url> or <gradient> data type, or part of the webpage, defined by the element() function, denoting the content to display.
...otherwise, for uri values, the absolute uri; for attr() values, the resulting string; for other keywords, as specified.animation typediscrete formal syntax normal | none | [ <content-replacement> | <content-list> ] [/ <string> ]?where <content-replacement> = <image><content-list> = [ <string> | contents | <image> | <quote> | <target> | <leader()> ]+where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><quote> = open-quote | close-quote | no-open-quote | no-close-quote<target> = <target-counter()> | <target-counters()> | <target-text()><leader()> = leader( <leader-type> )where <image()> = image( <image-tags>...
...And 10 more matches
mask-border-slice - CSS: Cascading Style Sheets
the mask-border-slice css property divides the image set by mask-border-source into regions.
...tom */ mask-border-slice: 30 30% 45; /* top | right | bottom | left */ mask-border-slice: 7 12 14 5; /* using the `fill` keyword */ mask-border-slice: 10% fill 7 12; /* global values */ mask-border-slice: inherit; mask-border-slice: initial; mask-border-slice: unset; the mask-border-slice property may be specified using one to four <number-percentage> values to represent the position of each image slice.
... values <number> represents an edge offset in pixels for raster images and coordinates for vector images.
...And 10 more matches
Populating the page: how browsers work - Web Performance
if your fonts, images, scripts, ads, and metrics all have different hostnames, a dns lookup will have to be made for each one.
... <!doctype html> <html> <head> <meta charset="utf-8"/> <title>my simple page</title> <link rel="stylesheet" src="styles.css"/> <script src="myscript.js"></script> </head> <body> <h1 class="heading">my page</h1> <p>a paragraph with a <a href="https://example.com/about">link</a></p> <div> <img src="myimage.jpg" alt="image description"/> </div> <script src="anotherscript.js"></script> </body> </html> this response for this initial request contains the first byte of data received.
... when the parser finds non-blocking resources, such as an image, the browser will request those resources and continue parsing.
...And 10 more matches
treecol - Archive of obsolete content
attributes crop, cycler, dragging, editable, fixed, hidden, hideheader, ignoreincolumnpicker, label, primary, sort, sortactive, sortdirection, src, type, width properties accessibletype style classes treecol-image examples this example shows a checkbox in the first column, requires the style below.
...if targeting firefox for mac os x, be sure to use these styles but include your own checkbox image.
... */ list-style-image: none; } treechildren::-moz-tree-checkbox(checked){ /* css for checked cells.
...And 9 more matches
CSS values and units - Learn web development
in the example below i have added a background image to the containing block of our colored boxes.
... images the <image> data type is used wherever an image is a valid value.
... this can be an actual image file pointed to via a url() function, or a gradient.
...And 9 more matches
HTMLCanvasElement.toDataURL() - Web APIs
the htmlcanvaselement.todataurl() method returns a data uri containing a representation of the image in the format specified by the type parameter (defaults to png).
... the returned image is in a resolution of 96 dpi.
... if the requested type is not image/png, but the returned value starts with data:image/png, then the requested type is not supported.
...And 9 more matches
WebGLRenderingContext.getFramebufferAttachmentParameter() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image.
...possible values: gl.framebuffer_attachment_object_type: the type which contains the attached image.
... gl.framebuffer_attachment_object_name: the texture or renderbuffer of the attached image (webglrenderbuffer or webgltexture).
...And 9 more matches
WebGL best practices - Web APIs
in practice, effectively all systems support at least the following: max_cube_map_texture_size: 4096 max_renderbuffer_size: 4096 max_texture_size: 4096 max_viewport_dims: [4096,4096] max_vertex_texture_image_units: 4 max_texture_image_units: 8 max_combined_texture_image_units: 8 max_vertex_attribs: 16 max_varying_vectors: 8 max_vertex_uniform_vectors: 128 max_fragment_uniform_vectors: 64 aliased_point_size_range: [1,100] your desktop may support 16k textures, or maybe 16 texture units in the vertex shader, but most other systems don't, and content that works for you will...
... for example, within firefox, the only time glgeterror is checked is after allocations (bufferdata, *teximage*, texstorage*) to pick up any gl_out_of_memory errors.
... another important method for batching is texture atlasing, where multiple images are placed into a single texture, often like a checkerboard.
...And 9 more matches
Fundamentals of WebXR - Web APIs
this includes both managing the process of rendering the views needed to simulate the 3d experience and the ability to sense the movement of the headset or other motion sensing apparatus to provide the needed data to let you update the imagery shown to the user based on that movement.
... <<<--- replace image with an svg for future translation work and consistency --->>> some more advanced headsets provide at least minimal support for translational movement detection, but to capture more substantial movement through the space, external sensors are usually required, such as cameras (either using visible light or infrared).
... virtual reality in a vr environment, the entire image is digitally created by your app or site, from foreground objects all the way to the background or skybox.
...And 9 more matches
-webkit-mask-repeat-x - CSS: Cascading Style Sheets
the -webkit-mask-repeat-x property specifies whether and how a mask image is repeated (tiled) horizontally.
... /* keyword values */ -webkit-mask-repeat-x: repeat; -webkit-mask-repeat-x: no-repeat; -webkit-mask-repeat-x: space; -webkit-mask-repeat-x: round; /* multiple values */ -webkit-mask-repeat-x: repeat, no-repeat, space; /* global values */ -webkit-mask-repeat-x: inherit; -webkit-mask-repeat-x: initial; -webkit-mask-repeat-x: unset; syntax values repeat the mask image is repeated both horizontally and vertically.
... no-repeat the mask image is not repeated; only one copy of the mask image is drawn.
...And 9 more matches
-webkit-mask-repeat-y - CSS: Cascading Style Sheets
the -webkit-mask-repeat-y property sets whether and how a mask image is repeated (tiled) vertically.
... /* keyword values */ -webkit-mask-repeat-y: repeat; -webkit-mask-repeat-y: no-repeat; -webkit-mask-repeat-y: space; -webkit-mask-repeat-y: round; /* multiple values */ -webkit-mask-repeat-y: repeat, no-repeat, space; /* global values */ -webkit-mask-repeat-y: inherit; -webkit-mask-repeat-y: initial; -webkit-mask-repeat-y: unset; syntax values repeat the mask image is repeated vertically.
... no-repeat the mask image is not repeated vertically; only one copy of the mask image is drawn in vertical direction.
...And 9 more matches
element() - CSS: Cascading Style Sheets
WebCSSelement
the element() css function defines an <image> value generated from an arbitrary html element.
... this image is live, meaning that if the html element is changed, the css properties using the resulting value are automatically updated.
... a particularly useful scenario for using this would be to render an image in an html <canvas> element, then use that as a background.
...And 9 more matches
Compiling an Existing C Module to WebAssembly - WebAssembly
get an image from javascript into wasm getting the encoder's version number is great, but encoding an actual image would be more impressive.
... the first question you need to answer is: how do i get the image into wasm?
...luckily, the canvas api has canvasrenderingcontext2d.getimagedata — that gives you an uint8clampedarray containing the image data in rgba: async function loadimage(src) { // load image const imgblob = await fetch(src).then(resp => resp.blob()); const img = await createimagebitmap(imgblob); // make canvas same size as image const canvas = document.createelement('canvas'); canvas.width = img.width; canvas.height = img.height; // draw image onto canvas const ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); return ctx.getimagedata(0, 0, img.width, img.height); } now it's "only" a matter of copying the data from javascript into wasm.
...And 9 more matches
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
setting the image for a toolbar button is done with css: #xulschoolhello-hello-world-button { list-style-image: url("chrome://xulschoolhello/skin/hello-world.png"); } it's not really that simple to set the image for a toolbar button, because we need to consider the appearance of the button on different systems, and also consider the different button states, but we'll get into that further ahead.
... these are the current icon sets for firefox: windows mac os x (lion and above) mac os x linux (gnome) note: the images above are probably not distributable under the same cc license, unlike the rest of this material.
...the icons in the image are the ones that aren't provided by gtk.
...And 8 more matches
Getting Started - Archive of obsolete content
now all of the css and images are extracted, but if you make some changes and run mozilla as it is, you will not see them because it's still set to look at the files in the jar files.
...this is a catchall directory which holds all of the images and styles for portions of mozilla that don't merit their own individual directory.
...they contain the images/styles for the browser, email client, or html editor.
...And 8 more matches
Simple Example - Archive of obsolete content
in this situation, an rdf container will be used to hold the list of images.
... <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"> <rdf:seq rdf:about="http://www.xulplanet.com/rdf/myphotos"> <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/palace.jpg"/> <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/canal.jpg"/> <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg"/> </rdf:seq> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg" dc:title="palace from above"/> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/canal.jpg" dc:title="canal"/> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg"...
... dc:title="obelisk"/> </rdf:rdf> in this example, we have three images, which can be identified by urls.
...And 8 more matches
Modifying the Default Skin - Archive of obsolete content
skin basics a skin is a set of style sheets, images and behaviors that are applied to a xul file.
...the xul for any skins is the same, however the style sheets and images used are different.
... a skin is described using css, allowing you to define the colors, borders and images used to draw elements.
...And 8 more matches
Lightweight themes
how to create your own lightweight theme lightweight themes are made up of a "header" graphic image file, which skins the default firefox ui background.
... creating a theme header image the header image is displayed as the background of the top of the browser window, nestling in behind the toolbars, address bar, search bar and the tab strip.
... image requirements dimensions should be 3000px wide × 200px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui.
...And 8 more matches
imgILoader
inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) implemented by @mozilla.org/image/loader;1 as a service: var imgiloader = components.classes["@mozilla.org/image/loader;1"] .getservice(components.interfaces.imgiloader); method overview imgirequest loadimage(in nsiuri auri, in nsiuri ainitialdocumenturl, in nsiuri areferreruri, in nsiprincipal aloadingprincipal, in nsiloadgroup aloadgroup, in imgidecoderobserver aobserver, in nsisupports acx, in nsloadflags aloadflags, in nsisupports cachekey, in imgirequest arequest, in nsichannelpolicy channelpolicy); imgirequest loadimagewithchannel(in nsichannel achannel, in imgidecode...
...robserver aobserver, in nsisupports cx, out nsistreamlistener alistener); boolean supportimagewithmimetype(in string mimetype); constants constant value description load_cors_anonymous 1 << 16 load_cors_use_credentials 1 << 17 methods loadimage() start the load and decode of an image.
... imgirequest loadimage( in nsiuri auri, in nsiuri ainitialdocumenturl, in nsiuri areferreruri, in nsiprincipal aloadingprincipal, in nsiloadgroup aloadgroup, in imgidecoderobserver aobserver, in nsisupports acx, in nsloadflags aloadflags, in nsisupports cachekey, in imgirequest arequest, in nsichannelpolicy channelpolicy ); parameters auri the uri to load.
...And 8 more matches
nsIClipboardCommands
inherits from: nsisupports last changed in gecko 1.7 method overview boolean cancopyimagecontents(); boolean cancopyimagelocation(); boolean cancopylinklocation(); boolean cancopyselection(); boolean cancutselection(); boolean canpaste(); void copyimagecontents(); void copyimagelocation(); void copylinklocation(); void copyselection(); void cutselection(); void paste(); void selectall(); void selectnone(); methods cancopyimagecontents() returns whether we can copy a...
...n image's contents.
... boolean cancopyimagecontents(); parameters none.
...And 8 more matches
nsIFaviconService
s(); void getfavicondata(in nsiuri afaviconuri, out autf8string amimetype, [optional] out unsigned long adatalen, [array,retval,size_is(adatalen)] out octet adata); obsolete since gecko 22.0 astring getfavicondataasdataurl(in nsiuri afaviconuri); obsolete since gecko 22.0 nsiuri getfaviconforpage(in nsiuri apageuri); obsolete since gecko 22.0 nsiuri getfaviconimageforpage(in nsiuri apageuri); obsolete since gecko 22.0 nsiuri getfaviconlinkforicon(in nsiuri afaviconuri); boolean isfailedfavicon(in nsiuri afaviconuri); void removefailedfavicon(in nsiuri afaviconuri); void setandloadfaviconforpage(in nsiuri apageuri, in nsiuri afaviconuri, in boolean aforcereload, in unsigned long afaviconloadtype, [optional] in nsifaviconda...
... getfaviconimageforpage() obsolete since gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamonkey 2.19) note: this method was removed in gecko 22.0.
...nsiuri getfaviconimageforpage( in nsiuri apageuri ); parameters apageuri uri of the page whose favicon is desired.
...And 8 more matches
Manipulating video using canvas - Web APIs
<!doctype html> <html> <head> <style> body { background: black; color:#cccccc; } #c2 { background-image: url(media/foo.png); background-repeat: no-repeat; } div { float: left; border :1px solid #444444; padding:10px; margin: 10px; background:#3b3b3b; } </style> </head> <body> <div> <video id="video" src="media/video.mp4" controls="true" crossorigin="anonymous"/> </div> <div> <canvas id="c1" width="160...
... canvas c1 is used to display the current frame of the original video, while c2 is used to display the video after performing the chroma-keying effect; c2 is preloaded with the still image that will be used to replace the green background in the video.
... processor.computeframe = function computeframe() { this.ctx1.drawimage(this.video, 0, 0, this.width, this.height); let frame = this.ctx1.getimagedata(0, 0, this.width, this.height); let l = frame.data.length / 4; for (let i = 0; i < l; i++) { let r = frame.data[i * 4 + 0]; let g = frame.data[i * 4 + 1]; let b = frame.data[i * 4 + 2]; if (g > 100 && r > 100 && b < 43) frame.data[i * 4 + 3] = 0; } this.ctx2.putimage...
...And 8 more matches
Recommended Drag Types - Web APIs
dragging images direct image dragging is not common.
... in fact, mozilla does not support direct image dragging on mac or linux.
... instead, images are usually dragged only by their urls.
...And 8 more matches
conic-gradient() - CSS: Cascading Style Sheets
the conic-gradient() css function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center).
...the result of the conic-gradient() function is an object of the <gradient> data type, which is a special kind of <image>.
...its concrete size will match the size of the element it applies to, or size of the <image> is set to something other than the element size.
...And 8 more matches
<filter-function> - CSS: Cascading Style Sheets
the <filter-function> css data type represents a graphical effect that can change the appearance of an input image.
... blur() blurs the image.
... brightness() makes the image brighter or darker.
...And 8 more matches
mask-border-source - CSS: Cascading Style Sheets
the mask-border-source css property sets the source image used to create an element's mask border.
... the mask-border-slice property is used to divide the source image into regions, which are then dynamically applied to the final mask border.
... syntax /* keyword value */ mask-border-source: none; /* <image> values */ mask-border-source: url(image.jpg); mask-border-source: linear-gradient(to top, red, yellow); /* global values */ mask-border-source: inherit; mask-border-source: initial; mask-border-source: unset; values none no mask border is used.
...And 8 more matches
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
2 allowing cross-origin use of images and canvas advanced, cors, canvas, html, image, reference, security, storage, data html provides a crossorigin attribute for images that, in combination with an appropriate cors header, allows images defined by the <img> element that are loaded from foreign origins to be used in a <canvas> as if they had been loaded from the current origin.
... 60 <area> content, element, html, html:flow content, html:phrasing content, multimedia, reference, web the html <area> element defines a hot-spot region on an image, and optionally associates it with a hypertext link.
... 116 <image>: the obsolete image element element, html, html element reference, html reference, html element, non-standard, obsolete, reference the obsolete html image element (<image>) is an obsolete remnant of an ancient version of html lost in the mists of time; use the standard <img> element instead.
...And 8 more matches
Handling media support issues in web content - Web media technologies
using poster frames a poster frame is a still image that's representative of the content of a video.
... this may be simply the first frame of video; however, in many cases, the first frame is blank, or contains nothing but the logo of a business, or some other image that doesn't give the reader any context for the video's contents.
... a good poster frame is one which is either a representative of the video's contents, or is an image which isn't even from the video itself but contains imagery and/or text which gives the reader a useful idea of the video's contents.
...And 8 more matches
MenuItems - Archive of obsolete content
adding icons to menu items an icon may be added to a menu item using the image attribute.
...in addition to the image, a special class "menuitem-iconic" must be used on the menuitem to indicate that an icon is expected.
... <menuitem id="add-bookmark" class="menuitem-iconic" label="add bookmark" image="addbookmark.png"/> as the image appears on a menu item, you will want to ensure you use a fairly small image.
...And 7 more matches
toolbarbutton - Archive of obsolete content
typically, it is expected to have an image.
... attributes accesskey, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, oncommand, open, orient, tabindex, title, type, validate properties accesskey, accessibletype, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, open, orient, tabindex, type examples <toolbar id="test-toolbar"> <toolbarbutton accesskey="p" label="plain"/> <toolbarbutton accesskey="c" label="checkbox" type="checkbox"/> <toolbarb...
... image type: uri the uri of the image to appear on the element.
...And 7 more matches
Mozilla’s UAAG evaluation report
(p1) vg renders html, css, and a number of graphic image formats.
...(p1) vg alt for img: rendered when images turned off.
...(p3) g alt for img: rendered when images turned off title for *any* element: rendered as tooltip longdesc for img element: in context menu - properties content of object element: ?
...And 7 more matches
Using the CSS Typed Object Model - Web APIs
there are other types available: an <image> will return a cssimagevalue.
...for example, the parameters for a csspositionvalue is one to two cssunitvalues or csskeywordvalues, or one of each: let position = new csspositionvalue( new csskeywordvalue("center"), new cssunitvalue(10, "px")); cssstylevalue the cssstylevalue interface of the the css typed object model api is the base class of all css values accessible through the typed om api, including cssimagevalue, csskeywordvalue, cssnumericvalue, csspositionvalue, csstransformvalue, and cssunparsedvalue.
... ); // 1 console.log( transform[0] ); // cssscale {x: cssunitvalue, y: cssunitvalue, z: cssunitvalue, is2d: true} console.log( transform[0].x ); // cssunitvalue {value: 0.95, unit: "number"} console.log( transform[0].y ); // cssunitvalue {value: 0.95, unit: "number"} console.log( transform[0].z ); // cssunitvalue {value: 1, unit: "number"} console.log( transform.is2d ); // true // cssimagevalue let bgimage = allcomputedstyles.get('background-image'); console.log( bgimage ); // cssimagevalue console.log( bgimage.tostring() ); // url("https://mdn.mozillademos.org/files/16793/magicwand.png") // cssunparsedvalue let unit = allcomputedstyles.get('--unit'); console.log( unit ) // let parsedunit = cssnumericvalue.parse( unit ); console.log( parsedunit ); console.log( parse...
...And 7 more matches
OffscreenCanvas - Web APIs
offscreencanvas.converttoblob() creates a blob object representing the image contained in the canvas.
... offscreencanvas.transfertoimagebitmap() creates an imagebitmap object from the most recently rendered image of the offscreencanvas.
...once a new frame has finished rendering in this context, the transfertoimagebitmap() method can be called to save the most recent rendered image.
...And 7 more matches
PhotoCapabilities - Web APIs
the photocapabilities interface of the the mediastream image capture api provides available configuration options for an attached photographic device.
... a photocapabilities object is retrieved by calling imagecapture.getphotocapabilities().
... photocapabilities.imageheight read only returns a mediasettingsrange object indicating the image height range supported by the user agent.
...And 7 more matches
WebGLRenderingContext.framebufferTexture2D() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image.
...possible values: gl.texture_2d: a 2d image.
... gl.texture_cube_map_positive_x: image for the positive x face of the cube.
...And 7 more matches
WebGL constants - Web APIs
useful for rendering hidden-line images, decals, and or solids with highlighted edges.
... generate_mipmap_hint 0x8192 hint for the quality of filtering when generating mipmap images with webglrenderingcontext.generatemipmap().
... max_vertex_uniform_vectors 0x8dfb max_varying_vectors 0x8dfc max_combined_texture_image_units 0x8b4d max_vertex_texture_image_units 0x8b4c max_texture_image_units 0x8872 implementation dependent number of maximum texture units.
...And 7 more matches
Text labels and names - Accessibility
use alt attribute to label area elements that have the href attribute in image maps, give each <area> element an alt attribute containing a name that describes what resources the areas links to.
... failure to do so makes an image map hard to use for users of assistive technology — they need alternative text to be able to understand the purpose of an image.
... examples the following example show a simple image map (taken from h24: providing text alternatives for the area elements of image maps): <img src="welcome.gif" usemap="#map1" alt="areas in the library.
...And 7 more matches
Typical use cases of Flexbox - CSS: Cascading Style Sheets
media objects the media object is a common pattern in web design — this pattern has an image or other element to one side and text to the right.
... ideally a media object should be able to be flipped — moving the image from left to right.
... we see this pattern everywhere, used for comments, and anywhere we need to display images and descriptions.
...And 7 more matches
Grid template areas - CSS: Cascading Style Sheets
this is a component with space for an image or other media on one side and content on the other.
... the image might be displayed on the right or left of the box.
... our grid is a two-column track grid, with the column for the image sized at 1fr and the text 3fr.
...And 7 more matches
background-position-x - CSS: Cascading Style Sheets
the background-position-x css property sets the initial horizontal position for each background image.
... values left aligns the left edge of the background image with the left edge of the background position layer.
... center aligns the center of the background image with the center of the background position layer.
...And 7 more matches
background-position-y - CSS: Cascading Style Sheets
the background-position-y css property sets the initial vertical position for each background image.
... values top aligns the top edge of the background image with the top edge of the background position layer.
... center aligns the vertical center of the background image with the vertical center of the background position layer.
...And 7 more matches
repeating-conic-gradient() - CSS: Cascading Style Sheets
the repeating-conic-gradient() css function creates an image consisting of a repeating gradient (rather than a single gradient) with color transitions rotated around a center point (rather than radiating from the center).
...the result of the repeating-conic-gradient() function is an object of the <gradient> data type, which is a special kind of <image>.
...its concrete size will match the size of the element it applies to, or the size the <image> is set to if it's set to something other than the element's size.
...And 7 more matches
shape-outside - CSS: Cascading Style Sheets
content-box; shape-outside: border-box; shape-outside: padding-box; /* function values */ shape-outside: circle(); shape-outside: ellipse(); shape-outside: inset(10px 10px 10px 10px); shape-outside: polygon(10px 10px, 20px 20px, 30px 30px); shape-outside: path('m0.5,1 c0.5,1,0,0.7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,1,1,1,1,0.3 c1,0.7,0.5,1,0.5,1 z'); /* <url> value */ shape-outside: url(image.png); /* <gradient> value */ shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px); /* global values */ shape-outside: initial; shape-outside: inherit; shape-outside: unset; the shape-outside property is specified using the values from the list below, which define the float area for float elements.
... <image> the float area is extracted and computed based on the alpha channel of the specified <image> as defined by shape-image-threshold.
...if this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.
...And 7 more matches
Rich-Text Editing in Mozilla - Developer guides
atdoc('backcolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- background -</option> <option value="red">red</option> <option value="green">green</option> <option value="black">black</option> </select> </div> <div id="toolbar2"> <img class="intlink" title="clean" onclick="if(validatemode()&&confirm('are you sure?')){odoc.innerhtml=sdeftxt};" src="data:image/gif;base64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha7opcsd/f4pfvrvdv8pv5xv///////////////////yh5baekab8alaaaaaawabyaaav84ceozgmeakqubmteyzk547qobcfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0kegtfolizlwre4ocqwrxototaihmcz0tvgmbqkzhayyfewev14eq8iflhnehmfdqkaiskqci2pdc4qbg+oajc0ewadncogo6anqkkoiqa7" /> <img class="intlink" title="print" onclick=...
..."printdoc();" src="data:image/png;base64,ivborw0kggoaaaansuheugaaabyaaaawcayaaadetgw7aaaabgdbtueaalgpc/xhbqaaaazis0deap8a/wd/ol2nkwaaaalwsflzaaalewaacxmbajqcgaaaaad0su1fb9oebxczfmgboiwaaaaidevydenvbw1lbnqa9sywvwaaaufjrefuomvtlutsjfeux//n3nn0ydpbh1abrpt4lfqtqkc3jrkkneisiiribbehjjpklivo4m1rrmkkjqirmjruqudkpt71qpipirkpaqdf55tv5vvuszjqtjolseukd3xu/3dpzusc/22wtu2wrn+jg5so/ocdh8ycmjdflehmlkjkvk7kuyn+ufza/rtth76zavocdptrxzqtni3mrwupc+6cktlxz/sddp2uu9uxlmyxz6qm8v4tz8lhf1h+zdqxt7s8olmxtbf4e8qafhjj3kbp2mzkkthpitjp9vh6ihia+whtasx5brpwuemgdondf/2a4m7ukds1jw662+xkqtkeuoqjktojm2h53yfl15psj04zc94wdtibr26fxlc2mzrvbccebz2kirfd414tkmlezbvgt33+qcohgha81swysew0r1uzfnylmtpx80pngqq91lwvk2jgvgnfvzg6ycyrat16gftw5kkkfo1eqltfh5q2ett0biwf+aitq4fdbk+imyo1oxvgf03wafjqvbckvdffryetxqiffygazths0zwagd7fg5tnnyntp8/fzvgwjofmgg7g...
...mdsmmbxdlwch2+xozsgbnzsncee4euyv4pwcpswypw0uhdybkswu1nyjendreqtkjwn2+zvttc1vmstb/mvev/weyslasslimcohobjxw+n3ap/sjefnl5gepzmpu4kg7opr1+tofpyuu3becwykcwqcdfmwfkauo90fhkdinbcamvqnymgqueagqwcohbdc1rjv9pild8ibvkz6qyviibqgtjpx4k0xpigezorn1da0cij4vfr0ta3wvbxh/rjdcufv6r2zpgph/e4pxsbcpeatqprjniso203/5s/za171mv8+w1loaaaaaelftksuqmcc"> <img class="intlink" title="undo" onclick="formatdoc('undo');" src="data:image/gif;base64,r0lgodlhfgawaomkadljwlie33morpgjuykl8aezxqpd+7/i19dv3nha7p///////////////////////yh5baekaa8alaaaaaawabyaaarr8mljq7046807tkayejjbnes4eeujvigapwyac0csocq7sdlwjkakca6tomywiargqf3mrqviejkksvlibsfewhdrih4fh/dzmice3/c4nbqbads=" /> <img class="intlink" title="redo" onclick="formatdoc('redo');" src="data:image/gif;base64,r0lgodlhfgawamihab1chdljwl9vj1ie34kl8apd+7/i1////yh5baekaacalaaaaaawabyaa...
...And 7 more matches
Making content editable - Developer guides
atdoc('backcolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- background -</option> <option value="red">red</option> <option value="green">green</option> <option value="black">black</option> </select> </div> <div id="toolbar2"> <img class="intlink" title="clean" onclick="if(validatemode()&&confirm('are you sure?')){odoc.innerhtml=sdeftxt};" src="data:image/gif;base64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha7opcsd/f4pfvrvdv8pv5xv///////////////////yh5baekab8alaaaaaawabyaaav84ceozgmeakqubmteyzk547qobcfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0kegtfolizlwre4ocqwrxototaihmcz0tvgmbqkzhayyfewev14eq8iflhnehmfdqkaiskqci2pdc4qbg+oajc0ewadncogo6anqkkoiqa7" /> <img class="intlink" title="print" onclick=...
..."printdoc();" src="data:image/png;base64,ivborw0kggoaaaansuheugaaabyaaaawcayaaadetgw7aaaabgdbtueaalgpc/xhbqaaaazis0deap8a/wd/ol2nkwaaaalwsflzaaalewaacxmbajqcgaaaaad0su1fb9oebxczfmgboiwaaaaidevydenvbw1lbnqa9sywvwaaaufjrefuomvtlutsjfeux//n3nn0ydpbh1abrpt4lfqtqkc3jrkkneisiiribbehjjpklivo4m1rrmkkjqirmjruqudkpt71qpipirkpaqdf55tv5vvuszjqtjolseukd3xu/3dpzusc/22wtu2wrn+jg5so/ocdh8ycmjdflehmlkjkvk7kuyn+ufza/rtth76zavocdptrxzqtni3mrwupc+6cktlxz/sddp2uu9uxlmyxz6qm8v4tz8lhf1h+zdqxt7s8olmxtbf4e8qafhjj3kbp2mzkkthpitjp9vh6ihia+whtasx5brpwuemgdondf/2a4m7ukds1jw662+xkqtkeuoqjktojm2h53yfl15psj04zc94wdtibr26fxlc2mzrvbccebz2kirfd414tkmlezbvgt33+qcohgha81swysew0r1uzfnylmtpx80pngqq91lwvk2jgvgnfvzg6ycyrat16gftw5kkkfo1eqltfh5q2ett0biwf+aitq4fdbk+imyo1oxvgf03wafjqvbckvdffryetxqiffygazths0zwagd7fg5tnnyntp8/fzvgwjofmgg7g...
...mdsmmbxdlwch2+xozsgbnzsncee4euyv4pwcpswypw0uhdybkswu1nyjendreqtkjwn2+zvttc1vmstb/mvev/weyslasslimcohobjxw+n3ap/sjefnl5gepzmpu4kg7opr1+tofpyuu3becwykcwqcdfmwfkauo90fhkdinbcamvqnymgqueagqwcohbdc1rjv9pild8ibvkz6qyviibqgtjpx4k0xpigezorn1da0cij4vfr0ta3wvbxh/rjdcufv6r2zpgph/e4pxsbcpeatqprjniso203/5s/za171mv8+w1loaaaaaelftksuqmcc"> <img class="intlink" title="undo" onclick="formatdoc('undo');" src="data:image/gif;base64,r0lgodlhfgawaomkadljwlie33morpgjuykl8aezxqpd+7/i19dv3nha7p///////////////////////yh5baekaa8alaaaaaawabyaaarr8mljq7046807tkayejjbnes4eeujvigapwyac0csocq7sdlwjkakca6tomywiargqf3mrqviejkksvlibsfewhdrih4fh/dzmice3/c4nbqbads=" /> <img class="intlink" title="redo" onclick="formatdoc('redo');" src="data:image/gif;base64,r0lgodlhfgawamihab1chdljwl9vj1ie34kl8apd+7/i1////yh5baekaacalaaaaaawabyaa...
...And 7 more matches
<feComposite> - SVG: Scalable Vector Graphics
the <fecomposite> svg filter primitive performs the combination of two input images pixel-wise in image space using one of the porter-duff compositing operations: over, in, atop, out, xor, and lighter.
...if the arithmetic operation is chosen, each result pixel is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 where: i1 and i2 indicate the corresponding pixel channel values of the input image, which map to in and in2 respectively k1, k2, k3 and k4 indicate the values of the attributes with the same name usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes » presentation attributes » filter primitive attributes » class style specific attributes ...
... the first set wipes out the background image by flooding with opaque white.
...And 7 more matches
JXON - Archive of obsolete content
conversion snippets now imagine you have this sample xml document: example.xml <?xml version="1.0"?> <!doctype catalog system "catalog.dtd"> <catalog> <product description="cardigan sweater"> <catalog_item gender="men's"> <item_number>qwz5671</item_number> <price>39.95</price> <size description="medium"> <color_swatch image="red_cardigan.jpg">red</color_swatch> <color_swatch image="burgundy_cardigan.jpg">burgundy</color_swatch> </size> <size description="large"> <color_swatch image="red_cardigan.jpg">red</color_swatch> <color_swatch image="burgundy_cardigan.jpg">burgundy</color_swatch> </size> </catalog_item> <catalog_item gender="women's"> <item_number>rrx9856</item_nu...
...mber> <discount_until>dec 25, 1995</discount_until> <price>42.50</price> <size description="medium"> <color_swatch image="black_cardigan.jpg">black</color_swatch> </size> </catalog_item> </product> <script type="text/javascript"><![cdata[function matchwo(a,b) { if (a < b && a < 0) { return 1; } else { return 0; } }]]></script> </catalog> first, create a dom tree like the previous example as described in the how to create a dom tree article.
... with this algorithm our example becomes: { "catalog": { "product": { "catalog_item": [{ "item_number": { "keyvalue": "qwz5671" }, "price": { "keyvalue": 39.95 }, "size": [{ "color_swatch": [{ "keyvalue": "red", "keyattributes": { "image": "red_cardigan.jpg" } }, { "keyvalue": "burgundy", "keyattributes": { "image": "burgundy_cardigan.jpg" } }], "keyvalue": null, "keyattributes": { "description": "medium" } }, { "color_swatch": [{ "keyvalue": "red", "keyattributes": { ...
...And 6 more matches
ContextMenus - Archive of obsolete content
on windows, the context menu can also be opened by pressing the menu key on the keyboard (the key on many keyboards next to control with a menu image) or by pressing shift+f10.
...for example, right clicking on an image might display items pertaining to images, whereas clicking on a link would display items pertaining to links.
...in this example, the triggernode property is checked for a popup attached to a browser to determine whether an image is clicked: <script> function showhideitems(aevent) { // aevent.target is the popup for which the popupshowing event fired.
...And 6 more matches
Adding Buttons - Archive of obsolete content
the button element has two main properties associated with it, a label and an image.
...thus, a button can have a label only, an image only or both a label and an image.
... syntax of buttons the button tag has the following syntax: <button id="identifier" class="dialog" label="ok" image="images/image.jpg" disabled="true" accesskey="t"/> the attributes are as follows, all of which are optional: id a unique identifier so that you can identify the button with.
...And 6 more matches
Anonymous Content - Archive of obsolete content
ditable menulist element, might be created as follows: xul: <menu class="dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> </menu> css: menu.dropbox { -moz-binding: url('chrome://example/skin/example.xml#dropbox'); } xbl: <binding id="dropbox"> <content> <children/> <xul:textbox flex="1"/> <xul:button src="chrome://global/skin/images/dropbox.jpg"/> </content> </binding> this example creates an input field with a button beside it.
...the resulting content would be: <menu class="dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> <textbox flex="1"/> <button src="chrome://global/skin/images/dropbox.jpg"/> </menu> includes attribute in some cases, you may wish to only include specific types of content and not others.
...let's say that we wanted to create a widget that displayed an image with a zoom in and zoom out button on each side of it.
...And 6 more matches
XUL accessibility guidelines - Archive of obsolete content
alternative text provide alternative text for meaningful images.
... alternative text is not needed when an image serves a purely decorative function.
... use the "alt" attribute to describe html images and use the "tooltiptext" attribute on xul elements that use images (i.e.
...And 6 more matches
tab - Archive of obsolete content
ArchiveMozillaXULtab
attributes accesskey, afterselected, beforeselected, command, crop, disabled, first-tab, image, label, last-tab, linkedpanel, oncommand, pending, pinned, selected, tabindex, unread, validate, value properties accesskey, accessibletype, command, control, crop, disabled, image, label, linkedpanel, selected, tabindex, value examples (example needed) attributes accesskey type: character this should be set to a character that is used as a shortcut key.
... image type: uri the uri of the image to appear on the element.
... if this attribute is empty or left out, no image appears.
...And 6 more matches
Tiles and tilemaps overview - Game development
tilemaps are a very popular technique in 2d game development, consisting of building the game world or level map out of small, regular-shaped images called tiles.
... this results in performance and memory usage gains — big image files containing entire level maps are not needed, as they are constructed by small images or image fragments multiple times.
... the tile atlas the most efficient way to store the tile images is in an atlas or spritesheet.
...And 6 more matches
Mozilla Web Developer FAQ
the almost standards mode is like the standards mode except it addresses the issue of the next question by rendering table cells with images in the traditional way.
... why are there gaps between image rows in tables when the layout engine is in the standards mode?
... in the css2 box layout model the default vertical sizing of layout boxes and the default vertical alignment of images is different from the behavior of old browsers.
...And 6 more matches
imgICache
image/public/imgicache.idlscriptable please add a summary to this article.
... inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) as of firefox 18, there is no longer a single image cache.
...use the following snippet to obtain a relevant image cache for a given document or channel (where relevantdocument is a document object that contains images you care about, or relevantchannel is an nsichannel that is used for fetching images): var tools = components.classes["@mozilla.org/image/tools;1"].getservice(components.interfaces.imgitools); var cache = tools.getimgcachefordocument(relevantdocument); // alternatively, tools.getimgcacheforchannel(relevantchannel) if there is no relevant document or channel, null may be passed, but this will cause any image cache requests to use the permanent storage cache (ie.
...And 6 more matches
Using readable streams - Web APIs
as our simple stream pump example shows (see it live also), exposing it is a matter of just accessing the body property of the response: // fetch the original image fetch('./tortoise.png') // retrieve its body as readablestream .then(response => response.body) this provides us with a readablestream object.
...this is done using the readablestream.getreader() method: // fetch the original image fetch('./tortoise.png') // retrieve its body as readablestream .then(response => response.body) .then(body => { const reader = body.getreader(); invoking this method creates a reader and locks it to the stream — no other reader may read this stream until this reader is released, e.g.
... also note that the previous example can be reduced by one step, as response.body is synchronous and so doesn't need the promise: // fetch the original image fetch('./tortoise.png') // retrieve its body as readablestream .then(response => { const reader = response.body.getreader(); reading the stream now you’ve got your reader attached, you can read data chunks out of the stream using the readablestreamdefaultreader.read() method.
...And 6 more matches
ARIA: img role - Accessibility
the aria img role can be used to identify multiple elements inside page content that should be considered as a single image.
... these elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner.
... <div role="img" aria-label="description of the overall image"> <img src="graphic1.png" alt=""> <img src="graphic2.png"> </div> description any set of content that should be consumed as a single image (which could include images, video, audio, code snippets, emojis, or other content) can be identified using role="img".
...And 6 more matches
Web accessibility for seizures and physical reactions - Accessibility
patterns and images can also trigger epilepsy.
... the fact that static images may cause seizures and other disorders is documented in such articles as “gamma oscillations and photosensitive epilepsy”, where it is noted “certain visual images, even in the absence of motion or flicker, can trigger seizures in patients with photosensitive epilepsy” the epilepsy foundation, in its article, "shedding light on photosensitivity, one of epilepsy's most complex conditions" talks about static images and patterns.
... although static images are possible as triggers, they are less consistent.
...And 6 more matches
-moz-context-properties - CSS: Cascading Style Sheets
the -moz-context-properties property can be used within privileged contexts in firefox to share the values of specified properties of the element with a child svg image.
... if you reference an svg image in a webpage (such as with the <img> element or as a background image), the svg image can coordinate with the embedding element (its context) to have the image adopt property values set on the embedding element.
... to do this the embedding element needs to list the properties that are to be made available to the image by listing them as values of the -moz-context-properties property, and the image needs to opt in to using those properties by using values such as the context-fill value.
...And 6 more matches
Using URL values for the cursor property - CSS: Cascading Style Sheets
this allows specifying arbitrary images as mouse cursors — any image format supported by gecko can be used.
..., ]* <keyword> it allows specifying the coordinates of the cursor's hotspot, which will be clamped to the boundaries of the cursor image.
... if none are specified, the coordinates of the hotspot are read from the file itself (for cur and xbm files) or are set to the top left corner of the image.
...And 6 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
ne; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url("images/picker_mask.png"); background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-...
... 50%; border: 1px solid #fff; position: absolute; top: 45%; left: 45%; } .ui-color-picker .picker:before { width: 8px; height: 8px; content: ""; position: absolute; border: 1px solid #999; border-radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { width: 198px; height: 28px; margin: 5px; border: 1px solid #fff; float: left; } .ui-color-picker .hue { background: url("images/hue_mask.png"); background: -moz-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -webkit-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -ms-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);...
... background: -o-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); } .ui-color-picker .alpha { border: 1px solid #ccc; background: url("images/alpha_mask.png"); } .ui-color-picker .slider-picker { width: 2px; height: 100%; margin: 0 0 0 -2px; border: 1px solid #777; background-color: #fff; position: relative; top: -1px; } /* input hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width: 30px; text-align: center; font-size: 14px; line-height: 18px; float: left; } .ui-color-picker .input input { width: 30px; height: 18p...
...And 6 more matches
HTTP Index - HTTP
WebHTTPIndex
a complete document is reconstructed from the different sub-documents fetched, for instance text, layout description, images, videos, scripts, and more 4 basics of http guide, http, overview http is a pretty extensible protocol.
...http has evolved from an early protocol to exchange files in a semi-trusted laboratory environment, to the modern maze of the internet, now carrying images, videos in high resolution and 3d.
... 17 content negotiation content negotiation, content negotiation reference, http, reference in http, content negotiation is the mechanism that is used for serving different representations of a resource at the same uri, so that the user agent can specify which is best suited for the user (for example, which language of a document, which image format, or which content encoding).
...And 6 more matches
edgeMode - SVG: Scalable Vector Graphics
the edgemode attribute determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image.
... two elements are using this attribute: <feconvolvematrix> and <fegaussianblur> feconvolvematrix for <feconvolvematrix>, edgemode determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image.
... value duplicate | wrap | none default value duplicate animatable yes duplicate this value indicates that the input image is extended along each of its borders as necessary by duplicating the color values at the given edge of the input image.
...And 6 more matches
Private Properties - Archive of obsolete content
before explaining how weakmaps work, the following looks at how ordinary objects can be used as hash maps, by creating a simple image cache: let images = {}; function getimage(name) { let image = images[name]; if (!image) { image = loadimage(name); images[name] = image; } return image; } now suppose there's a need to associate a thumbnail with each image.
... moreover, to create each thumbnail only when it's first required: function getthumbnail(image) { let thumbnail = image._thumbnail; if (!thumbnail) { thumbnail = createthumbnail(image); image._thumbnail = thumbnail; } return thumbnail; } this approach is straightforward, but relies on the use of prefixes.
... a better approach would be to store thumbnails in their own, separate hash map: let thumbnails = {}; function getthumbnail(image) { let thumbnail = thumbnails[image]; if (!thumbnail) { thumbnail = createthumbnail(image); thumbnails[image] = thumbnail; } return thumbnail; } there are two problems with the above approach.
...And 5 more matches
clipboard - Archive of obsolete content
the following types are supported: text (plain text) html (a string of html) image (a base-64 encoded png) if no data type is provided, then the module will detect it for you.
... currently the image type doesn't support transparency on windows.
... var clipboard = require("sdk/clipboard"); if (clipboard.currentflavors.indexof("html") != -1) require("sdk/tabs").open("data:text/html;charset=utf-8," + clipboard.get("html")); set the clipboard contents to an image.
...And 5 more matches
listcell - Archive of obsolete content
attributes crop, disabled, image, label, type properties disabled style classes listcell-iconic, examples (example needed) attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute.
... image type: uri the uri of the image to appear on the element.
... if this attribute is empty or left out, no image appears.
...And 5 more matches
Theme changes in Firefox 2 - Archive of obsolete content
rd-button[buttondown="true"] #history-button:active #home-button:active #mail-button #mail-button:active #mail-button[disabled="true"] #mail-button[open="true"] #new-tab-button:active #new-tab-button[checked="true"] #new-window-button:active #new-window-button[checked="true"] #paste-button:active #print-button:active #reload-button:active #stop-button:active .messagebutton .messageimage .messagetext browsermessage toolbar[iconsize="small"] #bookmarks-button:active toolbar[iconsize="small"] #copy-button:active toolbar[iconsize="small"] #cut-button:active toolbar[iconsize="small"] #downloads-button:active toolbar[iconsize="small"] #history-button:active toolbar[iconsize="small"] #home-button:active toolbar[iconsize="small"] #mail-button toolbar[iconsize="small"] #mail-bu...
... #imagebox the box that displays the feed icon.
...bscribeoptions #feederror #feedheader #feedheader[firstrun="true"] #feedheader[firstrun="true"] #feedintrotext #feedheader[firstrun="true"] #feedsubscribeline #feedintrotext #feedsubscribedonechangingoptions #feedsubscribehandletext #feedsubscribehandler #feedsubscribeline #feedsubscribeoptions #feedsubscribeoptionsgroup #feedsubscribeoptionsgrouptitle #feedtitlecontainer #feedtitleimage #feedtitlelink #readercontainer #readergroup #readers #readers > listitem .feedentrycontent .feedsubscribebutton .feedsubscribebutton .button-icon .feedsubscribelink .feedsubscribelinkbox .field .link .link:hover:active .plain .plain > .button-box .plain:focus > .button-box .stylelessborderless the default theme also includes styles for a[href] img, body, h1, h2, and html.
...And 5 more matches
-ms-filter - Archive of obsolete content
code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_8.htm -ms-filter: 'progid:dximagetransform.microsoft.motionblur(strength=50), progid:dximagetransform.microsoft.basicimage(mirror=1)'; the following example shows how to use an inline style sheet to set the filter on an image.
... code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_h.htm <img style="filter:progid:dximagetransform.microsoft.motionblur(strength=50) progid:dximagetransform.microsoft.basicimage(mirror=1)" src="/workshop/samples/author/dhtml/graphics/cone.jpg" height="80px" width="80px" alt="cone"> the following example shows how to use scripting to set the filter on an image.
... code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_s.htm <body> <p>click the image to start the filter.</p> // call the function.
...And 5 more matches
Mobile accessibility - Learn web development
responsive design — make sure layouts work on mobile, conserve image download sizes, and think about the provision of images for high-resolution screens.
... conserving image sizes downloaded.
... in general, small screen devices won't need images that are as large as their desktop counterparts, and they are more likely to be on slow network connections.
...And 5 more matches
How do you make sure your website works properly? - Learn web development
you might be surprised at how many problems come up: images don't show up, pages don't load or load slowly, and so on.
... uh-oh, where's the image?
...it's not showing the image we expected!
...And 5 more matches
Basic native form controls - Learn web development
this article covers: the common input types button, checkbox, file, hidden, image, password, radio, reset, submit, and text.
... note: the image input type also renders as a button.
... image button the image button control is rendered exactly like an <img> element, except that when the user clicks on it, it behaves like a submit button.
...And 5 more matches
CSS basics - Learn web development
how do i decorate my webpage with background images and colors?
... img[src] selects <img src="myimage.png"> but not <img> pseudo-class selector the specified element(s), but only when in the specified state.
... centering the image img { display: block; margin: 0 auto; } next, we center the image to make it look better.
...And 5 more matches
Firefox UI considerations for web developers
otherwise, the smallest image larger than 96 pixels wide is selected.
...if the site also has a favicon, it may be overlaid in the corner of the image.
... the selected image is then presented within the top sites list.
...And 5 more matches
IAccessibleHyperlink
non-text objects can have either a single link or a collection of links such as when the non-text object is an image map.
...an example is an image map which is an image with multiple links each of which is associated with a separate non-overlapping area of the image.
...an interesting use case is an image map where each area is associated with multiple actions, for example an image map of smart tags.
...And 5 more matches
Working with ArrayBuffers
this feature is based on the following work: //github.com/realityripple/uxp/blob/master/js/src/ctypes/ctypes.cpp#3080 //github.com/realityripple/uxp/blob/master/js/src/vm/arraybufferobject.cpp#1301 example 1 - image data the following example illustrates how to transfer a byte array pointed by ctypes.uint8_t.ptr to imagedata of canvas.
... this example is based on the fact that the imagedata returned from canvasrenderingcontext2d.getimagedata is a uint8clampedarray view for an arraybuffer.
... the following codeblock provides a basic example of getting and setting uint8clampedarray and arraybuffer of imagedata: // context is a canvasrenderingcontext2d of some canvas var imagedata = context.getimagedata(x, y, w, h); var array = imagedata.data; // array is a uint8clampedarray var buffer = imagedata.data.buffer; // buffer is a arraybuffer // incomingbuffer is a typedarray var imagedata2 = context.createimagedata(w, h); imagedata2.data.set(incomingbuffer); further, if you have a byte array pixelbuffer, and you need to create imagedata from it.
...And 5 more matches
Basic animations - Web APIs
basic animation steps these are the steps you need to take to draw a frame: clear the canvas unless the shapes you'll be drawing fill the complete canvas (for instance a backdrop image), you need to clear any shapes that have been drawn previously.
... var sun = new image(); var moon = new image(); var earth = new image(); function init() { sun.src = 'https://mdn.mozillademos.org/files/1456/canvas_sun.png'; moon.src = 'https://mdn.mozillademos.org/files/1443/canvas_moon.png'; earth.src = 'https://mdn.mozillademos.org/files/1429/canvas_earth.png'; window.requestanimationframe(draw); } function draw() { var ctx = document.getelementbyid('canvas').getconte...
...; ctx.clearrect(0, 0, 300, 300); // clear canvas ctx.fillstyle = 'rgba(0, 0, 0, 0.4)'; ctx.strokestyle = 'rgba(0, 153, 255, 0.4)'; ctx.save(); ctx.translate(150, 150); // earth var time = new date(); ctx.rotate(((2 * math.pi) / 60) * time.getseconds() + ((2 * math.pi) / 60000) * time.getmilliseconds()); ctx.translate(105, 0); ctx.fillrect(0, -12, 40, 24); // shadow ctx.drawimage(earth, -12, -12); // moon ctx.save(); ctx.rotate(((2 * math.pi) / 6) * time.getseconds() + ((2 * math.pi) / 6000) * time.getmilliseconds()); ctx.translate(0, 28.5); ctx.drawimage(moon, -3.5, -3.5); ctx.restore(); ctx.restore(); ctx.beginpath(); ctx.arc(150, 150, 105, 0, math.pi * 2, false); // earth orbit ctx.stroke(); ctx.drawimage(sun, 0, 0, 300, 300); window.reques...
...And 5 more matches
HTMLCanvasElement.mozGetAsFile() - Web APIs
the non-standard, firefox-specific the htmlcanvaselement method mozgetasfile() returns a memory-based file object representing the image contained in the canvas.
... syntax canvas.mozgetasfile(name, type); parameters name a domstring indicating the file name to give the file representing the image file in memory.
... type optional a domstring which specifies the image file format to use when creating the new image file.
...And 5 more matches
Rendering and the WebXR frame animation callback - Web APIs
60 fps is already beyond the point at which most people can easily detect that the animation isn't simply a series of still images going by really fast.
...the more of these we simulate—and the more accurately we do so—the better able we are to trick the human brain into perceiving our images in 3d.
...these two images are focused onto the retinas and the resulting signal transmitted over the optic nerves to the brain's visual cortex, located at the back of the occipital lobe.
...And 5 more matches
Web APIs
WebAPI
aambient light eventsbbackground tasksbattery api beaconbluetooth apibroadcast channel apiccss counter stylescss font loading api cssomcanvas apichannel messaging apiconsole apicredential management apiddomeencoding apiencrypted media extensionsffetch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance timeline apipermissions apipointer eventspointer lock apiproximity events push api rresize observer apiresource t...
...bluetooth bluetoothadvertisingdata bluetoothcharacteristicproperties bluetoothdevice bluetoothremotegattcharacteristic bluetoothremotegattdescriptor bluetoothremotegattserver bluetoothremotegattservice body broadcastchannel budgetservice budgetstate buffersource bytelengthqueuingstrategy bytestring c cdatasection css cssconditionrule csscounterstylerule cssgroupingrule cssimagevalue csskeyframerule csskeyframesrule csskeywordvalue cssmathproduct cssmathsum cssmathvalue cssmediarule cssnamespacerule cssnumericvalue cssomstring csspagerule csspositionvalue cssprimitivevalue csspseudoelement cssrule cssrulelist cssstyledeclaration cssstylerule cssstylesheet cssstylevalue csssupportsrule cssunitvalue cssunparsedvalue cssvalue cssvaluelist css...
...variablereferencevalue cache cachestorage canvascapturemediastreamtrack canvasgradient canvasimagesource canvaspattern canvasrenderingcontext2d caretposition channelmergernode channelsplitternode characterdata childnode client clients clipboard clipboardevent clipboarditem closeevent comment compositionevent constantsourcenode constrainboolean constraindomstring constraindouble constrainulong contentindex contentindexevent convolvernode countqueuingstrategy crashreportbody credential credentialscontainer crypto cryptokey cryptokeypair customelementregistry customevent d domconfiguration domerror domexception domhighrestimestamp domimplementation domimplementationlist domlocator dommatrix dommatrixreadonly domobject domparser dompoint dompointinit dompoin...
...And 5 more matches
symbols - CSS: Cascading Style Sheets
this must be one of the following data types: <string> <image> (note: this value is "at risk" and may be removed from the specification.
... it is not yet implemented.) <custom-ident> description a symbol can be a string, image, or identifier.
... formal definition related at-rule@counter-styleinitial valuen/acomputed valueas specified formal syntax <symbol>+where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...And 5 more matches
Color picker tool - CSS: Cascading Style Sheets
-picker .input[data-topic="hexa"] > .name { display: none; } .ui-color-picker .input[data-topic="hexa"] > input { width: 90px; height: 24px; padding: 2px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* preview color */ .ui-color-picker .preview { width: 95px; height: 53px; margin: 5px; margin-top: 10px; border: 1px solid #ddd; background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); float: left; position: relative; } .ui-color-picker .preview:before { height: 100%; width: 50%; left: 50%; top: 0; content: ""; background: #fff; position: absolute; z-index: 1; } .ui-color-picker .preview-color { width: 100%; height: 100%; background-color: rgba(255, 0, 0, 0.5); position: absolute; z-index: 1; } .ui-col...
...ls */ #controls { width: 110px; padding: 10px; float: right; } #controls #picker-switch { text-align: center; float: left; } #controls .icon { width: 48px; height: 48px; margin: 10px 0; background-repeat: no-repeat; background-position: center; border: 1px solid #ddd; display: table; float: left; } #controls .icon:hover { cursor: pointer; } #controls .picker-icon { background-image: url('https://mdn.mozillademos.org/files/6081/picker.png'); } #controls #void-sample { margin-right: 10px; background-image: url('https://mdn.mozillademos.org/files/6087/void.png'); background-position: center left; } #controls #void-sample[data-active='true'] { border-color: #ccc; background-position: center right; } #controls .switch { width: 106px; padding: 1px; border: 1px solid #c...
...cc; font-size: 14px; text-align: center; line-height: 24px; overflow: hidden; float: left; } #controls .switch:hover { cursor: pointer; } #controls .switch > * { width: 50%; padding: 2px 0; background-color: #eee; float: left; } #controls .switch [data-active='true'] { color: #fff; background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); background-color: #777; } /** * trash can */ #delete { width: 100%; height: 94px; background-color: #ddd; background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); background-repeat: repeat; text-align: center; color: #777; position: relative; float: right; } #delete #trash-can { width: 80%; height: 80%; border: 2px dashed #fff; border-radius: 5px; background: url('https://mdn.mozilladem...
...And 5 more matches
Using CSS gradients - CSS: Cascading Style Sheets
css gradients are represented by the <gradient> data type, a special type of <image> made of a progressive transition between two or more colors.
... gradients can be used anywhere you would use an <image>, such as in backgrounds.
... because gradients are dynamically generated, they can negate the need for the raster image files that traditionally were used to achieve similar effects.
...And 5 more matches
Recipe: Media objects - CSS: Cascading Style Sheets
named by nicole sullivan it refers to a two-column box with an image on one side and descriptive text on the other, e.g.
... the image can be on the left or right.
... the image might be small or large.
...And 5 more matches
cursor - CSS: Cascading Style Sheets
WebCSScursor
each <url> should point to an image file.
... the browser will try to load the first image specified, falling back to the next if it can't, and falling back to the keyword value if no images could be loaded (or if none were specified).
...these will set the cursor's hotspot, relative to the top-left corner of the image.
...And 5 more matches
Video player styling basics - Developer guides
since background images will be used to display appropriate icons, the background colour of the button is set to be transparent, non-repeated, and the element should fully contain the image.
... simple :hover and :focus states are then set for each button that simply alters the opacity of the button: .controls button:hover, .controls button:focus { opacity:0.5; } to obtain appropriate button images, a set of free common control set icons was downloaded from the web.
... each image was then converted to a base64 encoded string (using an online base64 image encoder), since the images are quite small, the resultant encoded strings are quite short.
...And 5 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
svg (scalable vector graphics) lets you draw images using commands that draw specific shapes, patterns, and lines to produce an image.
... svg commands are formatted as xml, and can be embedded directly into a web page or can be placed in he page using the <img> element, just like any other type of image.
...image courtesy of user sharkd on wikipedia, distributed under the cc by-sa 3.0 license.
...And 5 more matches
HTML attribute: accept - HTML: Hypertext Markup Language
an <input> like this: <input type="file" id="docpicker" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"> whereas if you're accepting a media file, you may want to be include any format of that media type: <input type="file" id="soundfile" accept="audio/*"> <input type="file" id="videofile" accept="video/*"> <input type="file" id="imagefile" accept="image/*"> the accept attribute doesn't validate the types of the selected files; it simply provides hints for browsers to guide users towards selecting the correct file types.
... <p> <label for="soundfile">select an audio file:</label> <input type="file" id="soundfile" accept="audio/*"> </p> <p> <label for="videofile">select a video file:</label> <input type="file" id="videofile" accept="video/*"> </p> <p> <label for="imagefile">select some images:</label> <input type="file" id="imagefile" accept="image/*" multiple> </p> note the last example allows you to select multiple iamges.
... the string image/* meaning "any image file".
...And 5 more matches
HTML elements reference - HTML: Hypertext Markup Language
WebHTMLElement
image and multimedia html supports various multimedia resources such as images, audio, and video.
... element description <area> the html <area> element defines a hot-spot region on an image, and optionally associates it with a hypertext link.
... <img> the html <img> element embeds an image into the document.
...And 5 more matches
MIME types (IANA media types) - HTTP
image list at iana image or graphical data including both bitmap and vector still images as well as animated versions of still image formats such as animated gif or apng.
... common examples are image/jpeg, image/png, and image/svg+xml.
... image types files whose mime type is image contain image data.
...And 5 more matches
color-profile - SVG: Scalable Vector Graphics
the color-profile attribute is used to define which color profile a raster image included through the <image> element should use.
... as a presentation attribute, it can be applied to any element but it only has an effect on the following element: <image> usage notes value auto | srgb | <name> | <iri> default value auto animatable yes auto all colors are presumed to be defined in the srgb color space unless a more precise embedded profile is specified within content data.
... for images that do have a profile built into their data, that profile is used.
...And 5 more matches
enable-background - SVG: Scalable Vector Graphics
the enable-background attribute specifies how the accumulation of the background image is managed.
... default value accumulate animatable no accumulate if an ancestor container element has a property value of enable-background: new, then all graphics elements within the current container element are rendered both onto the parent container elementʼs background image canvas and onto the target device.
... otherwise, there is no current background image canvas, so graphics elements are only rendered onto the target device.
...And 5 more matches
href - SVG: Scalable Vector Graphics
WebSVGAttributehref
fifteen elements are using this attribute: <a>, <animate>, <animatemotion>, <animatetransform>, <discard>, <feimage>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> in svg a for <a>, href defines the location of the referenced object, expressed as a url reference.
... value <url> default value none animatable no feimage for <feimage>, href defines a url referring to an image resource or to an element.
... value <url> default value none animatable yes image for <image>, href defines a url referring to the image to render.
...And 5 more matches
xlink:href - SVG: Scalable Vector Graphics
22 elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use>} html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> a for <a>, xlink:href defines the loc...
... value <iri> default value none animatable no cursor for <cursor>, xlink:href defines the reference to the file or element which provides the image of the cursor.
... value <funciri> default value none animatable yes feimage for <feimage>, xlink:href defines the reference to the image source.
...And 5 more matches
Canvas code snippets - Archive of obsolete content
function getpixelamount(canvas, r, g, b) { var cx = canvas.getcontext('2d'); var pixels = cx.getimagedata(0, 0, canvas.width, canvas.height); var all = pixels.data.length; var amount = 0; for (i = 0; i < all; i += 4) { if (pixels.data[i] === r && pixels.data[i + 1] === g && pixels.data[i + 2] === b) { amount++; } } return amount; }; getting the color of a pixel in a canvas this following snippet returns an object with the rgba values of the pixel at posi...
... function getpixelcolour(canvas, x, y) { var cx = canvas.getcontext('2d'); var pixel = cx.getimagedata(x, y, 1, 1); return { r: pixel.data[0], g: pixel.data[1], b: pixel.data[2], a: pixel.data[3] }; } chaining methods this class provides jquery-style chained access to 2d context methods and properties.
...mentbyid(canvas); } if (!(this instanceof canvas2dcontext)) { return new canvas2dcontext(canvas); } this.context = this.ctx = canvas.getcontext('2d'); if (!canvas2dcontext.prototype.arc) { canvas2dcontext.setup.call(this, this.ctx); } } canvas2dcontext.setup = function() { var methods = ['arc', 'arcto', 'beginpath', 'beziercurveto', 'clearrect', 'clip', 'closepath', 'drawimage', 'fill', 'fillrect', 'filltext', 'lineto', 'moveto', 'quadraticcurveto', 'rect', 'restore', 'rotate', 'save', 'scale', 'settransform', 'stroke', 'strokerect', 'stroketext', 'transform', 'translate']; var gettermethods = ['createpattern', 'drawfocusring', 'ispointinpath', 'measuretext', // drawfocusring not currently supported // the following might instead be wrapped to be able to...
...And 4 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
you can even display icons in menus by adding class="menuitem-iconic" to a menuitem element, along with a src attribute that gives an image uri.
...to show one with an icon as shown in figure 8, define an image's uri as the value for the image attribute.
... note: to see this sample in operation, use any image as the one to display and place it in the same folder as the xul document.
...And 4 more matches
Defining Cross-Browser Tooltips - Archive of obsolete content
summary: authors are used to having alt text appear as a &quot;tooltip&quot; above images, but that's not how it was meant to be used.
...the classic example is a "tooltip" of an image; when the user pauses the mouse pointer over an image, the contents of the alt attribute are displayed as a "tooltip." gecko-based browsers such as mozilla, netscape 6+, and compuserve 7 do not support this behavior.
... the problem according to the html 4.01 definition of the alt attribute: alt = text cs for user agents that cannot display images, forms, or applets, this attribute specifies alternate text.
...And 4 more matches
Elements - Archive of obsolete content
the following xul display types may be used: browser, button, checkbox, description, editor, grippy, iframe, image, label, menu, menuitem, menubar, progressmeter, radio, resizer, scrollbar, scrollbox, spacer, splitter, titlebar, treechildren and treecol.
... resources <!entity % resources-content "(image?,stylesheet?)"> <!element resources %resources-content;> <!attlist property id id #implied > used for inclusion of image elements, to cache them for later use, and for inclusion of stylesheet elements.
... image <!element image empty> <!attlist image id id #implied src uri #required > declares an image resource used by the binding.
...And 4 more matches
Additional Navigation - Archive of obsolete content
to look closer, here is the data network after only the member has been evaluated: (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/obselisk.jpg) when evaluating the triple, the template builder will iterate over the three potential results found so far.
... for the first result, the value of the ?photo variable 'http://www.xulplanet.com/ndeakin/images/t/palace.jpg' will be used as the subject, the predicate will be 'http://purl.org/dc/elements/1.1/title', and the object will be 'canal'.
...the resulting data will look like the following: (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg) here is the example.
...And 4 more matches
listitem - Archive of obsolete content
attributes accesskey, checked, command, crop, current, disabled, image, label, preference, selected, tabindex, type, value properties accesskey, accessible, checked, control, crop, current, disabled, image, label, selected, tabindex, value style classes listitem-iconic examples <listbox id="thelist"> <listitem label="ruby"/> <listitem label="emerald"/> <listitem label="sapphire" selected="true"/> <listitem label="diamond"/> </listbox> attrib...
... image type: uri the uri of the image to appear on the element.
... if this attribute is empty or left out, no image appears.
...And 4 more matches
Common Firefox theme issues and solutions - Archive of obsolete content
the following css rules also need to be copied to the proper location in the browser.css file and modified as necessary: /* page proxy icon */ #page-proxy-favicon { width: 16px; height: 16px; margin: 1px 3px; list-style-image: url(chrome://browser/skin/identity-icons-generic.png); -moz-image-region: rect(0, 16px, 16px, 0); } .verifieddomain > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { list-style-image: url(chrome://browser/skin/identity-icons-https.png); } .verifiedidentity > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { list-style-image: url(chrome://browse...
...r/skin/identity-icons-https-ev.png); } #identity-box:hover > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { -moz-image-region: rect(0, 32px, 16px, 16px); } #identity-box:hover:active > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon, #identity-box[open=true] > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { -moz-image-region: rect(0, 48px, 16px, 32px); } #page-proxy-favicon[pageproxystate="invalid"] { opacity: 0.5; } for more information about identity boxes please see the identity box section of the amo editors theme review guidelines no visual clue for disabled url bars there needs to be a visual clue when url bar is disabled.
...this issue is fixed by adding the following css instructions to the file browser/preferences/aboutpermissions.css: .site-favicon { height: 16px; width: 16px; -moz-margin-end: 4px; list-style-image: url("chrome://mozapps/skin/places/defaultfavicon.png"); } web developer tools web developer toolbar {to be added} web console web console buttons do not change appearance on the web console (tools > web developer > web console), the toolbar buttons on the left-hand side do not change their appearance between their toggled on and toggled off status as a result it is not possible to determin...
...And 4 more matches
Theme changes in Firefox 3 - Archive of obsolete content
instead a '-moz-margin-start' property must be added to .tab-drop-indicator-bar, with a value that is half of the width of the indicator image.
... mac os x file description of change browser/themes/pinstripe/browser/tabbrowser/tabdragindicator.png removed superfluous blank pixels from the edges, so that the image is smaller.
... browser/themes/pinstripe/browser/browser.css .tabbrowser-tab[first-tab="true"] > .tab-image-left no longer has a margin-left.
...And 4 more matches
background-size - Archive of obsolete content
user:jürgen jeka 2009-08-04 <hr> is there anyway to have the -moz-border-image only apply if -moz-background-size is not supported?
... i'm guessing not, just asking because having both rules in for 3.6 creates a strange effect: -moz-border-image gets inherited by every element on the page user:robertc 2009-08-08 -moz-border-image should not inherit.
...user:jürgen jeka 2009-08-09 ok, here's a page with both rules - the css is derived from the code on the page here, this is what it looks like in 3.6a2pre on linux, the background image appears on the whole page, and then again behind the main content.
...And 4 more matches
XForms Custom Controls - Archive of obsolete content
for example, you might want to render images that are held inside an instance document or you would like to show a disabled trigger when its bound node becomes irrelevant rather than having it not display (the current default behavior).
...for example, if mediatype='image/*' then the user should see the image that the bytes represent rather than just the byte sequence.
... xf|output[mediatype^="image"] { -moz-binding: url('chrome://xforms/content/xforms-xhtml.xml#xformswidget-output-mediatype-anyuri'); } custom data types if you define a new schema data type or you use a built-in data type and find the current xforms control for this type to be insufficient, then you should write a new custom control.
...And 4 more matches
Load the assets and print them on screen - Game development
loading the ball sprite loading images and printing them on our canvas is a lot easier using phaser than using pure javascript.
... to load the asset, we will use the game object created by phaser, executing its load.image() method.
... game.load.image('ball', 'img/ball.png'); } the first parameter we want to give the asset is the name that will be used across our game code — for example, in our ball variable name — so we need to make sure it is the same.
...And 4 more matches
CSS and JavaScript accessibility best practices - Learn web development
the following image shows the highlight in both firefox (a dotted outline) and chrome (a blue outline): you can be creative with link styles, as long as you keep giving users feedback when they interact with the links.
... simple content and functionality is arguably easy to make accessible — for example text, images, tables, forms and push button that activate functions.
...alt text for images.
...And 4 more matches
Fundamental CSS comprehension - Learn web development
starting point to get this assessment started, you should: go and grab the html file for the exercise, and the associated image file, and save them in a new directory on your local computer.
... if you want to use your own image file and fill your own name in, you are welcome to — just make sure the image is square.
...you could paste the html and fill in the css into one of these online editors, and use this url to point the <img> element to the image file.
...And 4 more matches
Test Your Skills: Fundamental layout comprehension - Learn web development
project brief you have been provided with some raw html, basic css, and images — now you need to create a layout for the design, which should look just like the image below.
... basic setup you can download the html, css, and a set of six images here.
... save the html document and stylesheet into a directory on your computer, and add the images into a folder named images.
...And 4 more matches
What will your website look like? - Learn web development
we'll start by creating a simple webpage with a heading, an image, and a few paragraphs.
...write a title and a few paragraphs and think of an image you'd like to show on your page.
... images to choose an image, go to google images and search for something suitable.
...And 4 more matches
imgIDecoder
modules/libpr0n/public/imgidecoder.idlscriptable base class for a decoder that reads an image from an input stream and sends it to an imgiloader object.
... inherits from: nsisupports last changed in gecko 1.7 this interface is the base class for decoders for specific image formats.
...init() initializes an image decoder.
...And 4 more matches
OffscreenCanvas.convertToBlob() - Web APIs
the offscreencanvas.converttoblob() method creates a blob object representing the image contained in the canvas.
... syntax promise<blob> offscreencanvas.converttoblob(options); parameters optionsoptional you can specify several options when converting your offscreencanvas object into a blob object, for example: const blob = offscreencanvas.converttoblob({ type: "image/jpeg", quality: 0.95 }); options: type: a domstring indicating the image format.
... the default type is image/png.
...And 4 more matches
OffscreenCanvas.convertToBlob() - Web APIs
the offscreencanvas.converttoblob()method creates a blob object representing the image contained in the canvas.
... syntax promise<blob> offscreencanvas.converttoblob(options); parameters optionsoptional you can specify several options when converting your offscreencanvas object into a blob object, for example: const blob = offscreencanvas.converttoblob({ type: "image/jpeg", quality: 0.95 }); options: type: a domstring indicating the image format.
... the default type is image/png.
...And 4 more matches
OffscreenCanvas.convertToBlob() - Web APIs
the offscreencanvas.converttoblob() method creates a blob object representing the image contained in the canvas.
... syntax promise<blob> offscreencanvas.converttoblob(options); parameters options optional you can specify several options when converting your offscreencanvas object into a blob object, for example: const blob = offscreencanvas.converttoblob({ type: "image/jpeg", quality: 0.95 }); options: type: a domstring indicating the image format.
... the default type is image/png.
...And 4 more matches
WebGLRenderingContext - Web APIs
webglrenderingcontext.framebuffertexture2d() attaches a textures image to a webglframebuffer object.
... webglrenderingcontext.compressedteximage2d() specifies a 2d texture image in a compressed format.
... webglrenderingcontext.compressedtexsubimage2d() specifies a 2d texture sub-image in a compressed format.
...And 4 more matches
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
note: most diagrams used in this article to show how the camera moves while performing standard movements was taken from an article on the filmmakeriq web site; namely, from this image which is found all over the web, however, and though we assume these are under a permissive license due to their frequent reuse, ownership is not certain.
...or, if you're happy to let us continue to use the images, please let us know so we can credit you properly!
... when accelerating bitmapped graphics, the renderer would draw the 2d image into a webgl texture's buffer, then redraw the texture to refresh the screen.
...And 4 more matches
XRSession.environmentBlendMode - Web APIs
the xrsession interface's read-only environmentblendmode property identifies if—and to what degree—the computer-generated imagery is overlaid atop the real world.
... this is used to differentiate between fully-immersive vr sessions and ar sessions which render over a pass-through image of the real world, possibly partially transparently.
... syntax blendmode = xrsession.environmentblendmode; value a domstring whose value is one of the strings found in the enumerated type xrenvironmentblendmode, defining if—and if so, how—virtual, rendered content is overlaid atop the image of the real world.
...And 4 more matches
-webkit-box-reflect - CSS: Cascading Style Sheets
<image> describes the mask to be applied to the reflection.
...<image>?where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
... [ <image-src>?
...And 4 more matches
prefix - CSS: Cascading Style Sheets
it may be a <string>, <image>, or <custom-ident>.
... formal definition related at-rule@counter-styleinitial value"" (the empty string)computed valueas specified formal syntax <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
... [ <image-src>?
...And 4 more matches
suffix - CSS: Cascading Style Sheets
it may be a <string>, <image>, or <custom-ident>.
..." (full stop followed by a space)computed valueas specified formal syntax <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
... [ <image-src>?
...And 4 more matches
Box-shadow generator - CSS: Cascading Style Sheets
; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display: none; } .ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height: 1em; background-color: #888; background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); background-position: center center; background-repeat: no-repeat; color: #fff; border-radius: 3px; font-weight: bold; float: left; } .ui-checkbox .text { padding-left: 34px; background-position: center left 10px; } .ui-checkbox .left { padding-right: 34px; padding-left: 1.666em; background-position: center right 10px; } ...
....ui-checkbox > label:hover { cursor: pointer; } .ui-checkbox > input:checked + label { background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); background-color: #379b4a; } /* * box shadow generator tool */ body { max-width: 1000px; height: 800px; margin: 20px auto 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } #container { width: 100%; padding: 2px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* container with shadows stacks */ #stack_container { height: 400px; overflow: hidden; position: relative; border: 1px solid #ccc; borde...
...1.5em; border: 1px solid #ccc; border-radius: 3px; display: block; background-position: center center; background-repeat: no-repeat; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; float: left; } #layer_manager .button:hover { background-color: #3380c4; border: 1px solid #3380c4; cursor: pointer; } #layer_manager [data-type='add'] { background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png"); } #layer_manager [data-type='add']:hover { background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png"); } #layer_manager [data-type='move-up'] { background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png"); margin-left: 5%; margin-right: 5%; } #layer_manager [data-type='move-up']:hover { bac...
...And 4 more matches
mask-border - CSS: Cascading Style Sheets
-width syntax /* source | slice */ mask-border: url('border-mask.png') 25; /* source | slice | repeat */ mask-border: url('border-mask.png') 25 space; /* source | slice | width */ mask-border: url('border-mask.png') 25 / 35px; /* source | slice | width | outset | repeat | mode */ mask-border: url('border-mask.png') 25 / 35px / 12px space alpha; values <'mask-border-source'> the source image.
... <'mask-border-slice'> the dimensions for slicing the source image into regions.
... <'mask-border-repeat'> defines how the edge regions of the source image are adjusted to fit the dimensions of the border mask.
...And 4 more matches
HTML attribute reference - HTML: Hypertext Markup Language
alt <applet>, <area>, <img>, <input> alternative text in case an image can't be displayed.
... background <body>, <table>, <td>, <th> specifies the url of an image file.
...use css background-image instead.
...And 4 more matches
<video>: The Video Embed element - HTML: Hypertext Markup Language
WebHTMLElementvideo
crossorigin this enumerated attribute indicates whether to use cors to fetch the related image.
...if the server does not give credentials to the origin site (by not setting the access-control-allow-origin: http header), the image will be tainted, and its usage restricted.
...if the server does not give credentials to the origin site (through access-control-allow-credentials: http header), the image will be tainted and its usage restricted.
...And 4 more matches
icons - Web app manifests
type array mandatory yes the icons member specifies an array of objects representing image files that can serve as application icons for different contexts.
... examples "icons": [ { "src": "icon/lowres.webp", "sizes": "48x48", "type": "image/webp" }, { "src": "icon/lowres", "sizes": "48x48" }, { "src": "icon/hd_hi.ico", "sizes": "72x72 96x96 128x128 256x256" }, { "src": "icon/hd_hi.svg", "sizes": "72x72" } ] values image objects may contain the following values: member description sizes a string containing space-separated image dimensions.
... src the path to the image file.
...And 4 more matches
Performance fundamentals - Web Performance
text and images reflow automatically, ui elements automatically receive the system theme, and the system provides "built-in" support for some use cases developers may not think of initially, like different-resolution displays or right-to-left languages.
...many years of improvements targeting this content, like parallel html parsing, intelligent scheduling of reflows and image decoding, clever layout algorithms, etc., translate just as well to improving web applications on firefox.
... for example, to paint an application's first frame that comprises visually some html and css to style that html: the html must be parsed the dom for that html must be constructed resources like images in that part of the dom have to be loaded and decoded the css styles must be applied to that dom the styled document has to be reflowed nowhere in that list is "load the js file needed for an uncommon menu"; "fetch and decode the image for the high scores list", etc.
...And 4 more matches
Lazy loading - Web Performance
while image size has increased from ~250kb to ~900kb on desktop and ~100kb to ~850kb on mobile.
... a practical example would be when, you land on the home page of an e-commerce site which has a link to a cart page/section and all its resources (js, css, images...) are downloaded only when the user navigates to that cart page.
... see also: element link images and iframes very often, webpages contain many images that contribute to data-usage and how fast a page can load.
...And 4 more matches
Customizing the download progress bar - Archive of obsolete content
the myextension.css file will look something like this: richlistitem progressmeter { %ifdef xp_win min-height: 17px !important; %else %ifdef xp_macosx -moz-appearance: none !important; background-image: url(chrome://myextension/skin/progress_bg_osx.png) !important; %endif %endif } richlistitem .progress-bar { %ifdef xp_win -moz-appearance: none !important; background-image: url(chrome://myextension/skin/progress_fd_win.png) !important; %else %ifdef xp_macosx background-image: url(chrome://myextension/skin/progress_fd_osx.gif) !important; %endif %endif } note: this file o...
...we are specifying the height of the progress meter on windows and a background image on mac.
... the background image (the first one in the file) should be a segment of whatever you want the unfilled portion of the progress bar to look like.
...And 3 more matches
Using Dependent Libraries In Extension Components - Archive of obsolete content
dependant libraries on the mac must be loaded with a special system function nsaddimage() with the flag nsaddimage_option_match_filename_by_installname.
... instead, we use nsaddimage.
... nsaddimage(path.get(), nsaddimage_option_return_on_error | nsaddimage_option_with_searching | nsaddimage_option_match_filename_by_installname); // 1) we don't care if this failed!
...And 3 more matches
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
the breakdown: 1 master screen media file which imports 4 files: a base file (bulk of formatting) a file for finance/table formatting color file (override colors and background images for specific color scheme) temp file (used for styles associated with temporary features and ad-related pages) 1 print media file 1 aural media file 3 master alternate style sheets which import 1 file each the 3 imported files set alternate font sizes (small, large, larger) how much did the size of a typical wired news page shrink?
... the html went from 32 kb down to 19 kb, but images increased from 8 to 13 kb.
... we've noted that some of the file size comparison's aren't necessarily fair, because we're not comparing apples to apples-- we're comparing an old design using html, tables, and spacer gifs to a new design much richer in imagery and style.
...And 3 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
r any other xml or xhtml mimetype for any "doctype html system" doctype (for example, <!doctype html system "http://www.w3.org/tr/rec-html40/strict.dtd">), except for the ibm doctype for unknown doctypes or doctypes without dtds almost standards mode mozilla introduced almost standards mode for one reason: a section in the css 2 specification breaks designs based on a precise layout of small images in table cells.
... instead of forming one image to the user, each small image ends up with a gap next to it.
...image gap almost standards mode behaves almost exactly as standards mode, except when it comes to an image gap issue.
...And 3 more matches
Extensions - Archive of obsolete content
for instance, if an image was context clicked, you may wish to hide the menu item you have added if the operation it performed wouldn't apply to images.
...this function retrieves the menuitem with the id 'thumbnail-show' that was added by the extension and hides it if an image was not the target of the context menu.
... onimage true if the target is an image.
...And 3 more matches
Multiple Queries - Archive of obsolete content
es="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <queryset> <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="canal"/> </query> <action> <button uri="?photo" image="?photo" label="view" orient="vertical"/> </action> </queryset> <queryset> <query> <content uri="?start"/> <member container="?start" child="?photo"/> </query> <action> <image uri="?photo" src="?photo"/> </action> </queryset> </template> </hbox> this template contains two queries, the first contains a <triple> which matches only...
...in fact, the content for this photo is that of the first query with the button, whereas the content for the other photos are that of the second query with the normal images.
...here are the results that would be generated by the first query above, before any bindings are applied: (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg, then, the builder adds the three results generated from the second query: (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/...
...And 3 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
arch, autocompletesearchparam, completedefaultindex, completeselectedindex,crop, disableautocomplete, disabled, disablekeynavigation, enablehistory, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, nomatch, onchange, oninput, onsearchcomplete, ontextentered, ontextreverted, open, readonly,showcommentcolumn, showimagecolumn, size, tabindex, tabscrolling, timeout, type, value properties accessibletype, completedefaultindex, controller, crop, disableautocomplete, disablekeynavigation, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, label, maxlength, maxrows, minresultsforpopup, open, popup, popupopen, searchcount, searchparam, selectionend, selecti...
...onstart, showcommentcolumn, showimagecolumn,size, tabindex, tabscrolling, textlength, textvalue, timeout, type, value methods getsearchat, onsearchcomplete, ontextentered, ontextreverted, select, setselectionrange examples <textbox type="autocomplete" autocompletesearch="history"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
... showimagecolumn type: boolean if true, an image column appears in the popup.
...And 3 more matches
Writing Skinnable XUL and CSS - Archive of obsolete content
each package has its own skin, css files and images that determine the appearance of that package.
... image chrome urls should never occur in xul.
... any chrome url that references an image in the skin is strictly forbidden in the xul.
...And 3 more matches
button - Archive of obsolete content
attributes accesskey, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, icon, image, label, open, orient, tabindex, type properties accesskey, accessibletype, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, open, orient, tabindex, type examples <button label="press me" oncommand="alert('you pressed me!');"/> attributes accesskey type: character this should be set to a character that is used as a shortcut ...
...this should be used in place of the image attribute.
... image type: uri the uri of the image to appear on the element.
...And 3 more matches
Extentsions FAQ - Archive of obsolete content
"); var replaceme = document.getelementbyid("replaceme"); replaceme.parentnode.replacechild(newnode, replaceme); is it possible to place an image in the window that can be moved to anywhere in the window, and always remain on top of everything else?(similiar to using position:absolute and-index:100000 in html) you can almost do this with a stack: <window ...> <stack flex="1"> <image top="40" left="80"/> <vbox> other content here </vbox> </stack> </window> the only restriction is that your image ca...
... simply position the image and it will no longer be stretched to the size of the stack.
... <image left="0" top="0"> would seem to suffice.
...And 3 more matches
Browser Feature Detection - Archive of obsolete content
true true document.createattribute() true true true document.getelementsbytagname() true true true document.title true true true document.referrer true true true document.domain true true true document.url true true true document.body true true true document.images true true true document.applets true true true document.links true true true document.forms true true true document.anchors true true true document.cookie true true true document.open() true true true document.close() true true true document.write() t...
...lementbyid() true true true document.getelementsbyname() true true true dom css 1 support for properties/methods in document.body.style name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01 background true true true backgroundattachment true true true backgroundcolor true true true backgroundimage true true true backgroundrepeat true true true border true true true borderspacing true false true borderstyle true true true bordertop true true true borderright true true true borderbottom true true true borderleft true true true borde...
...ontfamily true true true fontsize true true true fontstyle true true true fontvariant true true true fontweight true true true height true true true letterspacing true true true lineheight true true true liststyle true true true liststyleimage true true true liststyleposition true true true liststyletype true true true margin true true true margintop true true true marginright true true true marginbottom true true true marginleft true true true padding true true true paddingto...
...And 3 more matches
Explaining basic 3D theory - Game development
texture: a 2d image that the vertex can use to decorate the surface it is part of instead of a simple color.
...the geometry is built from a vertex and the face, while material is a texture, which uses a color or an image.
... rendering pipeline the rendering pipeline is the process by which images are prepared and output onto the screen.
...And 3 more matches
Square tilemaps implementation: Static maps - Game development
note: when writing this article, we assumed previous reader knowledge of canvas basics such as how get a 2d canvas context, load images, etc., which is all explained in the canvas api tutorial, as well as the basic information included in our tilemaps introduction article.
... the tile atlas a tilemap might use one or several atlases — or spritesheets — that contain all of the tile images.
... this is the atlas we will be using as an example, which features five different tiles: to draw a tile from the atlas into the canvas we make use of the drawimage() method in a canvas 2d context.
...And 3 more matches
Plug-in Development Overview - Gecko Plugin API Reference
a mime type is made up of a major type (such as application or image) and a minor type, for example, image/jpeg.
...until your new mime type is registered, preface its name with "x-", for example, image/x-nwim.
...ll should contain the following set of string/value pairs: mimetype: for mime types fileextents: for file extensions fileopenname: for file open template productname: for plug-in name filedescription: for description language: for language in use in the mime types and file extensions strings, multiple values are separated by the "|" character, for example: video/quicktime|audio/aiff|image/jpeg the version stamp will be loaded only if it has been created with the language set to "us english" and the character set to "windows multilingual" in your development environment.
...And 3 more matches
Styling tables - Learn web development
to start with, make a local copy of the sample markup, download both images (noise and leopardskin), and put the three resulting files in a working directory somewhere on your local computer.
...by default, when you set borders on table elements, they will all have spacing between them, as the below image illustrates: this doesn't look very nice (although it might be the look you want, who knows?) with border-collapse: collapse; set, the borders collapse down into one, which looks much better: we've put a border around the whole table, which is needed because we'll be putting some borders round the table header and footer later on — it looks really odd and disjointed when you don't have a bor...
... we've added a background-image to the <thead> and <tfoot>, and changed the color of all the text inside the header and footer to white (and given it a text-shadow) so it is readable.
...And 3 more matches
Positioning - Learn web development
overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width: 500px; margin: 0 auto; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: relative; background: yellow; top: 30px; left: 30px; } cool, huh?
...overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width: 500px; margin: 0 auto; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: absolute; background: yellow; top: 30px; left: 30px; } first of all, note that the gap where th...
...overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width: 500px; margin: 0 auto; position: relative; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: absolute; background: yellow; top: 30px; left: 30px; } the positioned ele...
...And 3 more matches
From object to iframe — other embedding technologies - Learn web development
previous overview: multimedia and embedding next by now you should really be getting the hang of embedding things into your web pages, including images, video and audio.
...most content is copyrighted, offline and online, even content you might not expect (for example, most images on wikimedia commons).
... the <embed> and <object> elements the <embed> and <object> elements serve a different function to <iframe> — these elements are general purpose embedding tools for embedding multiple types of external content, which include plugin technologies like java applets and flash, pdf (which can be shown in a browser with a pdf plugin), and even content like videos, svg and images!
...And 3 more matches
Multimedia and Embedding - Learn web development
this module explores how to use html to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire webpages.
... images in html there are other types of multimedia to consider, but it is logical to start with the humble <img> element used to embed a simple image in a webpage.
... in this article we'll look at how to use it in more depth, including basics, annotating it with captions using <figure>, and how it relates to css background images.
...And 3 more matches
Making asynchronous programming easier with async and await - Learn web development
status: ${response.status}`); } else { return response.blob(); } }) .then(myblob => { let objecturl = url.createobjecturl(myblob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); }) .catch(e => { console.log('there has been a problem with your fetch operation: ' + e.message); }); by now, you should have a reasonable understanding of promises and how they work, but let's convert this to use async/await to see how much simpler it makes things: async function myfetch() { let r...
...status: ${response.status}`); } else { let myblob = await response.blob(); let objecturl = url.createobjecturl(myblob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); } } myfetch() .catch(e => { console.log('there has been a problem with your fetch operation: ' + e.message); }); it makes code much simpler and easier to understand — no more .then() blocks everywhere!
...status: ${response.status}`); } else { return await response.blob(); } } myfetch().then((blob) => { let objecturl = url.createobjecturl(blob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); }).catch(e => console.log(e)); you can try typing in the example yourself, or running our live example (see also the source code).
...And 3 more matches
Introducing asynchronous JavaScript - Learn web development
when you fetch an image from a server, you can't return the result immediately.
... that means that the following (pseudocode) wouldn't work: let response = fetch('myimage.png'); let blob = response.blob(); // display your image blob in the ui somehow that's because you don't know how long the image will take to download, so when you come to run the second line it will throw an error (possibly intermittently, possibly every time) because the response is not yet available.
...let's look at another example that loads a resource via the xmlhttprequest api (run it live, and see the source): function loadasset(url, type, callback) { let xhr = new xmlhttprequest(); xhr.open('get', url); xhr.responsetype = type; xhr.onload = function() { callback(xhr.response); }; xhr.send(); } function displayimage(blob) { let objecturl = url.createobjecturl(blob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); } loadasset('coffee.jpg', 'blob', displayimage); here we create a displayimage() function that simply represents a blob passed to it as an object url, then creates an image to display the url in, appending it to the document's <body>.
...And 3 more matches
Perceived performance - Learn web development
first contentful paint (fcp) reports the time when the browser first rendered anything of signifigance, be that text, foreground or background image, or a canvas or svg; capturing the very beginning of the loading experience.
... to minimize the assets required for initial load, separate interactive functionality from content so that required content -- the text, styles, and images visible at initial load -- can be loaded first.
... don't load images or scripts that aren’t used or visible on the initial page load.
...And 3 more matches
Strategies for carrying out testing - Learn web development
to use a virtual box, you need to: get hold of an installer disk or image (e.g.
...you'll: provide a name for the new virtual machine choose which operating system and version you are installing on it set how much ram should be allocated (we'd recommend something like 2048mb, or 2gb) create a virtual hard disk (choose the default options across the three dialog boxes containing create a virtual hard disk now, vdi (virtual disk image), and dynamically allocated).
...at this point you need to point the dialog box at the installer image/disk, and it will run through the steps to install the os just like on a physical machine.
...And 3 more matches
Embedding API for Accessibility
e); to manually add a pref to your settings, add a line like the following to your prefs.js: user_pref("accessibility.browsewithcaret", true); accessibility prefs reference the following is a description of what accessibility prefs give us (or will give us), for accessibility: functionality implementation works as of images setintpref("network.image.imagebehavior", behavior); /* behavior: 0=accept, 1=accept images from originating server only, 2=no images */ moz 0.8 cookies setintpref("network.cookie.cookiebehavior", behavior); /* behavior: 0=accept, 1=accept cookies f...
...abcdef" /* hex color value */); setcharpref("browser.display.background_color", "#abcdef" /* hex color value */); setboolpref("browser.display.use_system_colors", boolsystemcolors); setboolpref("browser.display.use_document_colors", booluseauthorcolors); /* setting use_document_colors also stops background images from loading */ moz 0.8 link appearance setcharpref("browser.anchor_color", "#abcdef" /* hex color value */); setcharpref("browser.visited_color", "#abcdef" /* hex color value */); setboolpref("browser.underline_anchors", boolunderlinelinks); moz 0.8 ...
...it's a w3c uaag requirement */ setboolpref("browser.selection.use_system_colors", usesystemcolors); no content waiting alerts setcharpref("alert.audio.mail_waiting", pathtosoundfile); setcharpref("alert.audio.background_image_waiting", pathtosoundfile); setcharpref("alert.audio.popup_waiting", pathtosoundfile); setcharpref("alert.audio.applet_waiting", pathtosoundfile); setcharpref("alert.audio.script_waiting", pathtosoundfile); setcharpref("alert.audio.redirect_waiting", pathtosoundfile); setcharpref("al...
...And 3 more matches
Building the WebLock UI
the overlay section, where we discuss how to import scripts, images, and other resources from mozilla into your own ui, is by far the more complicated of the two.
... statusbarpanel#weblock-status { list-style-image: url("chrome://weblock/wlock.gif"); } statusbarpanel#weblock-status[status="locked"] { list-style-image: url("chrome://weblock/wl-lock.gif"); } statusbarpanel#weblock-status[status="unlocked"] { list-style-image: url("chrome://weblock/wl-un.gif"); } the style rules are distinguished by the state of the status attribute on the element in the xul with the id "weblock-status." as you can see...
... above, when the status of the element is set to "locked", the image wl-lock.gif is used to show the state, and when the web locking is unlocked, it uses wl-un.gif.
...And 3 more matches
mozIColorAnalyzer
toolkit/components/places/mozicoloranalyzer.idlscriptable provides methods to analyze colors in an image 1.0 66 introduced gecko 17.0 inherits from: nsisupports last changed in gecko 17.0 (firefox 17.0 / thunderbird 17.0 / seamonkey 2.14) method overview void findrepresentativecolor(in nsiuri imageuri, in mozirepresentativecolorcallback callback); methods findrepresentativecolor() given an image uri, find the most representative color for that image based on the frequency of each color.
...this is intended to be used on favicon images.
... larger images take longer to process, especially those with a larger number of unique colors.
...And 3 more matches
nsITreeView
fer); astring getcellproperties(in long row, in nsitreecolumn col, in nsisupportsarray properties obsolete since gecko 22); astring getcelltext(in long row, in nsitreecolumn col); astring getcellvalue(in long row, in nsitreecolumn col); astring getcolumnproperties(in nsitreecolumn col, in nsisupportsarray properties obsolete since gecko 22); astring getimagesrc(in long row, in nsitreecolumn col); long getlevel(in long index); long getparentindex(in long rowindex); long getprogressmode(in long row, in nsitreecolumn col); astring getrowproperties(in long index, in nsisupportsarray properties obsolete since gecko 22); boolean hasnextsibling(in long rowindex, in long afterindex); boolean iscontainer(i...
...if a column consists only of an image, then the empty string is returned.
... getimagesrc() the image path for a given cell.
...And 3 more matches
Plug-in Development Overview - Plugins
a mime type is made up of a major type (such as application or image) and a minor type, for example, image/jpeg.
...until your new mime type is registered, preface its name with "x-", for example, image/x-nwim.
...ll should contain the following set of string/value pairs: mimetype: for mime types fileextents: for file extensions fileopenname: for file open template productname: for plug-in name filedescription: for description language: for language in use in the mime types and file extensions strings, multiple values are separated by the "|" character, for example: video/quicktime|audio/aiff|image/jpeg the version stamp will be loaded only if it has been created with the language set to "us english" and the character set to "windows multilingual" in your development environment.
...And 3 more matches
CSS Painting API - Web APIs
concepts and usage essentially, the css painting api contains functionality allowing developers to create custom values for paint(), a css <image> function.
... you can then apply these values to properties like background-image to set complex custom backgrounds on an element.
... for example: aside { background-image: paint(mypaintedimage); } the api defines paintworklet, a worklet that can be used to programmatically generate an image that responds to computed style changes.
...And 3 more matches
Optimizing canvas - Web APIs
you can then render the offscreen image to your primary canvas as often as needed, without unnecessarily repeating the steps needed to generate it in the first place.
... mycanvas.offscreencanvas = document.createelement('canvas'); mycanvas.offscreencanvas.width = mycanvas.width; mycanvas.offscreencanvas.height = mycanvas.height; mycanvas.getcontext('2d').drawimage(mycanvas.offscreencanvas, 0, 0); avoid floating-point coordinates and use integers instead sub-pixel rendering occurs when you render objects on a canvas without whole values.
... ctx.drawimage(myimage, 0.3, 0.5); this forces the browser to do extra calculations to create the anti-aliasing effect.
...And 3 more matches
ContentIndex.add() - Web APIs
WebAPIContentIndexadd
homepage article video audio icons: optional an array of image resources, defined as an object with the following data: src: a url string of the source image.
... sizes: optional a string representation of the image size.
... type: optional the mime type of the image.
...And 3 more matches
EXT_texture_compression_rgtc - Web APIs
constants the compressed texture formats are exposed by 4 constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d().
... ext.compressed_red_rgtc1_ext each 4x4 block of texels consists of 64 bits of unsigned red image data.
... ext.compressed_signed_red_rgtc1_ext each 4x4 block of texels consists of 64 bits of signed red image data.
...And 3 more matches
HTMLInputElement - Web APIs
properties that apply only to elements of type image alt string: returns / sets the element's alt attribute, containing alternative text to use when type is image.
... height string: returns / sets the element's height attribute, which defines the height of the image displayed for the button, if the value of type is image.
... src string: returns / sets the element's src attribute, which specifies a uri for the location of an image to display on the graphical submit button, if the value of type is image; otherwise it is ignored.
...And 3 more matches
WEBGL_compressed_texture_s3tc - Web APIs
constants the compressed texture formats are exposed by four constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d().
... ext.compressed_rgb_s3tc_dxt1_ext a dxt1-compressed image in an rgb image format.
... ext.compressed_rgba_s3tc_dxt1_ext a dxt1-compressed image in an rgb image format with a simple on/off alpha value.
...And 3 more matches
WEBGL_compressed_texture_s3tc_srgb - Web APIs
constants the compressed texture formats are exposed by four constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d().
... ext.compressed_srgb_s3tc_dxt1_ext a dxt1-compressed image in an srgb image format.
... ext.compressed_srgb_alpha_s3tc_dxt1_ext a dxt1-compressed image in an srgb image format with a simple on/off alpha value.
...And 3 more matches
WebGLRenderingContext.bufferData() - Web APIs
possible values: gl.static_draw: the contents are intended to be specified once by the application, and used many times as the source for webgl drawing and image specification commands.
... gl.dynamic_draw: the contents are intended to be respecified repeatedly by the application, and used many times as the source for webgl drawing and image specification commands.
... gl.stream_draw: the contents are intended to be specified once by the application, and used at most a few times as the source for webgl drawing and image specification commands.
...And 3 more matches
Compressed texture formats - Web APIs
note that this advantage doesn't translate to network bandwidth: while the formats are better than uncompressed data, they are in general far worse than standard image formats such as png and jpg.
...ext.compressed_rgba_s3tc_dxt1_ext for the webgl_compressed_texture_s3tc extension.) these can then be used with compressedteximage[23]d or compressedtexsubimage[23]d instead of teximage2d calls.
...which formats support texture_2d_array and texture_3d targets (in combination with compressedteximage3d) are noted in the following table.
...And 3 more matches
ARIA Test Cases - Accessibility
expected at behavior: when focus falls on a button, a screen reader speaks the text of the button plus alternative text of any images within the button (the accessible name of the button).
... at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - img tiled image expected at behavior: screen readers should announce the image is a single graphic element along with its associated label, even though it is built from numerous sub-images.
...jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - radiogroup and radiobutton radio example using css background images radio example using img element radio example using aria-activedescendent property dojo nightly build expected at behavior: on initial focus, the screen reader should announce the label of the radio group and the focused radio button, whether it is selected or not, and its position.
...And 3 more matches
Accessibility and Spacial Patterns - Accessibility
the two images below are from nasa research, specifically, from the article, "designing with blue" "spatial localization.
...the phenomenon seems to be especially problematic for symbol/background combinations that differ only in the blue channel." distance between stripes photosensitive seizures may be caused by static images as well as animation.
... stripes and patterns are typical of the kinds of images that create problems, and stripes have been studied most closely.
...And 3 more matches
additive-symbols - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valuen/acomputed valueas specified formal syntax [ <integer> && <symbol> ]#where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
... [ <image-src>?
...)<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>?
...And 3 more matches
negative - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial value"-" hyphen-minuscomputed valueas specified formal syntax <symbol> <symbol>?where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
... [ <image-src>?
...)<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>?
...And 3 more matches
pad - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial value0 ""computed valueas specified formal syntax <integer> && <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
... [ <image-src>?
...)<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>?
...And 3 more matches
CSS values and units - CSS: Cascading Style Sheets
for example, if you wanted to include a background image, you might use either of the following.
... .box { background-image: url("images/my-background.png"); } .box { background-image: url("https://www.exammple.com/images/my-background.png"); } the parameter for url() can be either quoted or unquoted.
...other possible combinations are as follows: <frequency-percentage> <angle-percentage> <time-percentage> special data types (defined in other specs) <color> <image> <position> color the <color> value specifies the color of an element feature (e.g.
...And 3 more matches
Mozilla CSS extensions - CSS: Cascading Style Sheets
b -moz-binding -moz-border-bottom-colors -moz-border-left-colors -moz-border-right-colors -moz-border-top-colors -moz-box-align -moz-box-direction -moz-box-flex -moz-box-ordinal-group -moz-box-orient -moz-box-pack c–i -moz-context-properties -moz-float-edge -moz-force-broken-image-icon -moz-image-region o -moz-orient -moz-osx-font-smoothing -moz-outline-radius -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright overflow-clip-box overflow-clip-box-block overflow-clip-box-inline s–z -moz-stack-sizing :-moz-system-metric(images-in-menus) :-moz-system-metric(mac-graphite-theme) :-m...
...ion-break] -moz-background-sizeobsolete since gecko 2 -moz-border-end [superseded by the standard version border-inline-end] -moz-border-end-color [superseded by the standard version border-inline-end-color] -moz-border-end-style [superseded by the standard version border-inline-end-style] -moz-border-end-width [superseded by the standard version border-inline-end-width] -moz-border-image -moz-border-start [superseded by the standard version border-inline-start] -moz-border-start-color [superseded by the standard version border-inline-start-color] -moz-border-start-style [superseded by the standard version border-inline-start-style] -moz-border-start-width [superseded by the standard version border-inline-start-width] -moz-box-sizing [prefixed version still accept...
...ixed version still accepted] -moz-transition-timing-function [prefixed version still accepted] -moz-user-select values global values -moz-initial -moz-appearance button button-arrow-down button-arrow-next button-arrow-previous button-arrow-up button-bevel checkbox checkbox-container checkbox-label checkmenuitem dialog groupbox listbox menuarrow menucheckbox menuimage menuitem menuitemtext menulist menulist-button menulist-text menulist-textfield menupopup menuradio menuseparator -moz-mac-unified-toolbar -moz-win-borderless-glass -moz-win-browsertabbar-toolbox -moz-win-communications-toolbox -moz-win-glass -moz-win-media-toolbox -moz-window-button-box -moz-window-button-box-maximized -moz-window-button-close -moz-window-button-maximize -moz...
...And 3 more matches
WebKit CSS extensions - CSS: Cascading Style Sheets
ebkit-margin-after-collapse -webkit-margin-after -webkit-margin-before-collapse -webkit-margin-before -webkit-margin-bottom-collapse -webkit-margin-collapse -webkit-margin-end** -webkit-margin-start** -webkit-margin-top-collapse -webkit-marquee-direction -webkit-marquee-increment -webkit-marquee-repetition -webkit-marquee-speed -webkit-marquee-style -webkit-marquee -webkit-mask-box-image-outset -webkit-mask-box-image-repeat -webkit-mask-box-image-slice -webkit-mask-box-image-source -webkit-mask-box-image-width -webkit-mask-box-image -webkit-mask-repeat-x -webkit-mask-repeat-y -webkit-mask-source-type -webkit-max-logical-height -webkit-max-logical-width -webkit-min-logical-height -webkit-min-logical-width n -webkit-nbsp-mode p -webkit-padding-after** -webkit...
...animation-direction -webkit-animation-duration -webkit-animation-fill-mode -webkit-animation-iteration-count -webkit-animation-name -webkit-animation-play-state -webkit-animation-timing-function b -webkit-backface-visibility -webkit-background-clip -webkit-background-origin -webkit-background-size -webkit-border-bottom-left-radius -webkit-border-bottom-right-radius -webkit-border-image -webkit-border-radius -webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-box-decoration-break -webkit-box-shadow -webkit-box-sizing c -webkit-clip-path -webkit-column-count -webkit-column-fill -webkit-column-gap -webkit-column-rule -webkit-column-rule-color -webkit-column-rule-style -webkit-column-rule-width -webkit-column-span -webkit-column-width -webkit...
...t-grid-gap -webkit-grid-row -webkit-grid-row-end -webkit-grid-row-gap -webkit-grid-row-start -webkit-grid-template -webkit-grid-template-areas -webkit-grid-template-columns -webkit-grid-template-rows h-l -webkit-hyphens -webkit-justify-content -webkit-justify-items -webkit-justify-self -webkit-line-break m -webkit-mask -webkit-mask-clip -webkit-mask-composite -webkit-mask-image -webkit-mask-origin -webkit-mask-position -webkit-mask-repeat -webkit-mask-size o-r -webkit-opacity -webkit-order -webkit-perspective -webkit-perspective-origin -webkit-ruby-position s -webkit-scroll-snap-type -webkit-shape-image-threshold -webkit-shape-margin -webkit-shape-outside t -epub-text-decoration -webkit-text-color-decoration -webkit-text-decoration-line -web...
...And 3 more matches
color-adjust - CSS: Cascading Style Sheets
for example, when printing, a browser might opt to leave out all background images and to adjust text colors to be sure the contrast is optimized for reading on white paper.
... exact the element's content has been specifically and carefully crafted to use colors, images, and styles in a thoughtful and/or important way, such that being altered by the browser might actually make things worse rather than better.
... if the output device is a printer, and to save ink, dark or extremely dense background images might be removed.
...And 3 more matches
linear-gradient() - CSS: Cascading Style Sheets
the linear-gradient() css function creates an image consisting of a progressive transition between two or more colors along a straight line.
... its result is an object of the <gradient> data type, which is a special kind of <image>.
... because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used.
...And 3 more matches
mask-border-repeat - CSS: Cascading Style Sheets
the mask-border-repeat css property sets how the edge regions of a source image are adjusted to fit the dimensions of an element's mask border.
... values stretch the source image's edge regions are stretched to fill the gap between each border.
... repeat the source image's edge regions are tiled (repeated) to fill the gap between each border.
...And 3 more matches
mask-mode - CSS: Cascading Style Sheets
WebCSSmask-mode
the mask-mode css property sets whether the mask reference defined by mask-image is treated as a luminance or alpha mask.
... values alpha this keyword indicates that the transparency (alpha channel) values of the mask layer image should be used as the mask values.
... luminance this keyword indicates that the luminance values of the mask layer image should be used as the mask values.
...And 3 more matches
object-position - CSS: Cascading Style Sheets
| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples positioning image content html here we see html that includes two <img> elements, each displaying the mdn logo.
... <img id="object-position-1" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"/> <img id="object-position-2" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"/> css the css includes default styling for the <img> element itself, as well as separate styles for each of the two images.
... img { width: 300px; height: 250px; border: 1px solid black; background-color: silver; margin-right: 1em; object-fit: none; } #object-position-1 { object-position: 10px; } #object-position-2 { object-position: 100% 10%; } the first image is positioned with its left edge inset 10 pixels from the left edge of the element's box.
...And 3 more matches
repeating-linear-gradient() - CSS: Cascading Style Sheets
the repeating-linear-gradient() css function creates an image consisting of repeating linear gradients.
...the function's result is an object of the <gradient> data type, which is a special kind of <image>.
... because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used.
...And 3 more matches
url() - CSS: Cascading Style Sheets
WebCSSurl()
depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet.
... /* simple usage */ url(https://example.com/images/myimg.jpg); url(data:image/png;base64,irxvb0…); url(myfont.woff); url(#idofsvgpath); /* associated properties */ background-image: url("https://mdn.mozillademos.org/files/16761/star.gif"); list-style-image: url('../images/bullet.jpg'); content: url("pdficon.jpg"); cursor: url(mycursor.cur); border-image-source: url(/media/diamonds.png); src: url('fantasticfont.woff'); offset-path: url(#path); mask-image: url("masks.svg#mask1"); /* properties with fallbacks */ cursor: url(pointer.cur), pointer; /* associated short-hand properties */ background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue; border-image: url("/media/diamonds.png") 30 f...
...ill / 30px / 30px space; /* as a parameter in another css function */ background-image: cross-fade(20% url(first.png), url(second.png)); mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* as part of a non-shorthand multiple value */ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); /* at-rules */ @document url("https://www.example.com/") { ...
...And 3 more matches
Preloading content with rel="preload" - HTML: Hypertext Markup Language
for example: resources that are pointed to from inside css, like fonts or images.
... larger images and video files.
... image: image file.
...And 3 more matches
List of default Accept values - HTTP
user agent value comment firefox text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 (since firefox 66) text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 (in firefox 65) text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 (before) in firefox 65 and earlier, this value can be modified using the network.http.accept.default parameter.
... (source) safari, chrome text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 (source) safari 5 text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 this is an improvement over earlier accept headers as it no longer ranks image/png above text/html internet explorer 8 image/jpeg, application/x-ms-application, image/gif, application/xaml+xml, image/pjpeg, application/x-ms-xbap, application/x-shockwave-flash, application/msword, */* see ie and the accept header (ieinternals' msdn blog).
... edge text/html, application/xhtml+xml, image/jxr, */* opera text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1 values for an image when requesting an image, like through an html <img> element, user-agent often sets a specific list of media types to be welcomed.
...And 3 more matches
<mglyph> - MathML
WebMathMLElementmglyph
attributes alt this attribute defines the alternative text describing the image.
... users will see this displayed if the image url is wrong, the image is not in one of the supported formats, or until the image is downloaded.
... height the height of the image.
...And 3 more matches
Web Performance
we cover them in this section: key performance guides animation performance and frame rateanimation on the web can be done via svg, javascript, including <canvas> and webgl, css animation, <video>, animated gifs and even animated pngs and other image types.
... multimedia: images and video the lowest hanging fruit of web performance is often media optimization.
...in this article we discuss the impact video, audio, and image content has on performance, and the methods to ensure that impact is as minimal as possible.
...And 3 more matches
SVG Presentation Attributes - SVG: Scalable Vector Graphics
p clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering cursor direction display dominant-baseline enable-background fill fill-opacity fill-rule filter flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-orientation-horizontal glyph-orientation-vertical image-rendering kerning letter-spacing lighting-color marker-end marker-mid marker-start mask opacity overflow pointer-events shape-rendering solid-color solid-opacity stop-color stop-opacity stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering transform unicode-bidi ...
... value: auto|srgb|linearrgb|inherit; animatable: yes color-profile deprecated since svg 2 it defines which color profile a raster image included through the <image> element should use.
... value: auto|text-bottom|alphabetic|ideographic|middle|central| mathematical|hanging|text-top; animatable: yes enable-background deprecated since svg 2 it tells the browser how to manage the accumulation of the background image.
...And 3 more matches
in - SVG: Scalable Vector Graphics
WebSVGAttributein
fourteen elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <fegaussianblur>, <femergenode>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile> usage notes value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive animatable yes sourcegraphic this keyword represents the graphics elements that were the original input into the <filter> element.
... backgroundimage this keyword represents an image snapshot of the svg document under the filter region at the time that the <filter> element was invoked.
... backgroundalpha same as backgroundimage except only the alpha channel is used.
...And 3 more matches
requiredFeatures - SVG: Scalable Vector Graphics
twentynine elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <circle>, <clippath>, <cursor>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textpath>, <tref>, <tspan>, <use> html, body, svg { height: 100%; } text { fill: white; } <svg viewbox="0 0 250 45" xmlns="http://www.w3.org/2000/svg"> <g> <rect fill="forestgreen" x="10" y="10" height="25" width="230" /> <text x="20" y="27">requiredfeatures supported</text> ...
.../www.w3.org/tr/svg11/feature#svgdom-dynamic http://www.w3.org/tr/svg11/feature#svg-static the browser supports all the following features: http://www.w3.org/tr/svg11/feature#coreattribute http://www.w3.org/tr/svg11/feature#structure http://www.w3.org/tr/svg11/feature#containerattribute http://www.w3.org/tr/svg11/feature#conditionalprocessing http://www.w3.org/tr/svg11/feature#image http://www.w3.org/tr/svg11/feature#style http://www.w3.org/tr/svg11/feature#viewportattribute http://www.w3.org/tr/svg11/feature#shape http://www.w3.org/tr/svg11/feature#text http://www.w3.org/tr/svg11/feature#paintattribute http://www.w3.org/tr/svg11/feature#opacityattribute http://www.w3.org/tr/svg11/feature#graphicsattribute http://www.w3.org/tr/svg11/feature#marker http://ww...
... http://www.w3.org/tr/svg11/feature#containerattribute the browser supports the enable-background attribute http://www.w3.org/tr/svg11/feature#conditionalprocessing the browser supports the <switch> element, and the requiredfeatures, requiredextensions, systemlanguage attributes http://www.w3.org/tr/svg11/feature#image the browser supports the <image> element.
...And 3 more matches
<feConvolveMatrix> - SVG: Scalable Vector Graphics
a convolution combines pixels in the input image with neighboring pixels to produce a resulting image.
... a matrix convolution is based on an n-by-m matrix (the convolution kernel) which describes how a given pixel value in the input image is combined with its neighboring pixel values to produce a resulting pixel value.
... note in the above formulas that the values in the kernel matrix are applied such that the kernel matrix is rotated 180 degrees relative to the source and destination images in order to match convolution theory as described in many computer graphics textbooks.
...And 3 more matches
Creating a Skin for Mozilla - Archive of obsolete content
how to edit images, extract zip files, and how to modify css.
... mozilla uses standard gif, png, and jpeg images for the buttons and css to style everything else in the interface.
...you cannot change what happens when the user right clicks on an image, but you can change the look of the right click menu (make it blue with pink polka dots, for example).
...And 2 more matches
Menu - Archive of obsolete content
ArchiveMozillaJetpackUIMenu
for example, the items of the page's context menu change depending on what the user clicks: images have a context menu, links have a context menu, and so on.
...jetpack.menu.context.page is the set of context menus that appear on the page: the image menu, link menu, and so on.
... for example, jetpack.menu.context.page.on("a[href]") does not match images contained in links.
...And 2 more matches
treecol.src - Archive of obsolete content
« xul reference home src type: uri set this attribute to have the treecol element use an image for the header instead of a label.
... you cannot have both an image and a label displayed in the header.
... set this to the url of an image to appear on the tree column header.
...And 2 more matches
treecol.type - Archive of obsolete content
*/ list-style-image: none; } treechildren::-moz-tree-checkbox(checked) { /* checked checkbox treecells.
... cbox-check.gif isn't available in firefox 1, 2, and 3 in mac os x so you should specify a url to an image in your extension or elsewhere.
... */ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } treechildren::-moz-tree-checkbox(disabled) { /* disabled checkbox treecells.
...And 2 more matches
Multiple Rule Example - Archive of obsolete content
"?photo" predicate="http://purl.org/dc/elements/1.1/description" object="?description"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/date" object="?date"/> </conditions> <action> <hbox uri="?photo" class="box-padded"> <vbox> <label value="?title"/> <image src="?photo"/> </vbox> <groupbox> <caption label="photo details"/> <label value="?description"/> <label value="date: ?date"/> </groupbox> </hbox> </action> </rule> <rule> <conditions> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" ...
... predicate="http://purl.org/dc/elements/1.1/title" object="?phototitle"/> </conditions> <action> <vbox uri="?photo" class="box-padded"> <label value="?phototitle"/> <image src="?photo"/> </vbox> </action> </rule> </template> </vbox> in this example, the first rule matches only those photos with title, description, and date properties.
...the resulting data will be: (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg, ?title = palace from above ?description = view from the top of the tower looking east of the doges palace, ?date = 2005-04-30t14:55:00+01.00) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg, ?phototitle = palace from above) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/...
...And 2 more matches
XUL Structure - Archive of obsolete content
style sheets (css), images, and other technologies are used to control the presentation.
...the extensions are small packages of xul files, javascript, style sheets and images packed together into a single file.
... skin - style sheets, images and other theme specific files style sheets describe details of the appearance of a window.
...And 2 more matches
XUL controls - Archive of obsolete content
<button type="menu-button" label="new"> <menupopup> <menuitem label="new document"/> <menuitem label="new image"/> </menupopup> </button> more information about this type of menu button element.
... <filefield/> filefield reference <image> an image specified by a url.
... <image src="start.png"/> more information about the image element.
...And 2 more matches
caption - Archive of obsolete content
attributes accesskey, crop, image, label, tabindex properties accesskey, crop, image, label, tabindex examples <groupbox> <caption label="my groupbox"/> </groupbox> <groupbox flex="1"> <caption> <checkbox label="a checked groupbox"/> </caption> </groupbox> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } image type: uri the uri of the image to appear on the element.
... if this attribute is empty or left out, no image appears.
...And 2 more matches
menulist - Archive of obsolete content
attributes accesskey, crop, disableautoselect, disabled, editable, focused, image, label, oncommand, open, preference, readonly, sizetopopup, tabindex, value properties accessibletype, crop, description, disableautoselect, disabled, editable, editor, image, inputfield, itemcount, label, menuboxobject, menupopup, open, selectedindex, selecteditem, tabindex, value methods appenditem, contains, getindexofitem, getitematindex, insertitemat, removeallitems, removeitemat, ...
... image type: uri the uri of the image to appear on the element.
... if this attribute is empty or left out, no image appears.
...And 2 more matches
menuseparator - Archive of obsolete content
attributes acceltext, accesskey, allowevents, command, crop, disabled, image, label, selected, tabindex, value properties accessibletype, accesskey, command, control, crop, disabled, image, label, labelelement, parentcontainer, selected, tabindex, value examples <menu label="menu"> <menupopup> <menuitem label="item1"/> <menuseparator/> <menuitem label="item2"/> <menuitem label="item3"/> </menupopup> </menu> attributes acceltext type: string text that appears beside the menu label to indicate the shortcut k...
... image type: uri the uri of the image to appear on the element.
... if this attribute is empty or left out, no image appears.
...And 2 more matches
prefpane - Archive of obsolete content
attributes helpuri, image, label, onpaneload, selected, src properties image, label, preferenceelements, preferences, selected, src examples methods preferenceforelement <prefpane id="panegeneral" label="general" src="chrome://path/to/paneoverlay.xul"/> or <prefpane id="panegeneral" label="general" onpaneload="ongeneralpaneload(event);"> <preferences> <preference id="pref_one" name="ex...
... image type: uri the uri of the image to appear on the element.
... if this attribute is empty or left out, no image appears.
...And 2 more matches
radio - Archive of obsolete content
ArchiveMozillaXULradio
attributes accesskey, command, crop, disabled, focused, group, image, label, selected, tabindex, value properties accesskey, accessibletype, control, crop, disabled, image, label, radiogroup, selected, tabindex, value examples <radiogroup> <radio id="orange" label="red" accesskey="r"/> <radio id="violet" label="green" accesskey="g" selected="true"/> <radio id="yellow" label="blue" accesskey="b" disabled="true"/> </radiogroup> attributes ...
... image type: uri the uri of the image to appear on the element.
... if this attribute is empty or left out, no image appears.
...And 2 more matches
tree - Archive of obsolete content
ArchiveMozillaXULtree
*/ list-style-image: url("") } treechildren::-moz-tree-checkbox(checked) { /* checked checkbox treecells.
... cbox-check.gif isn't available in firefox 1, 2, and 3 in mac os x so you should specify a url to an image in your extension or elsewhere.
... */ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } treechildren::-moz-tree-checkbox(disabled) { /* disabled checkbox treecells.
...And 2 more matches
nsIContentPolicy - Archive of obsolete content
type_image 3 indicates an image (for example, <img> elements).
... type_imageset 21 indicates a request to load an <img> (with the srcset attribute or <picture>.
... reject_server -3 returned from shouldload() or shouldprocess() if the load/process is rejected based on the server it is hosted on or requested from (acontentlocation or arequestorigin), e.g., if you block an image because it is served from goatse.cx (even if you don't necessarily block other types from that server/domain).
...And 2 more matches
Sunbird Theme Tutorial - Archive of obsolete content
to make a theme, you usually need these tools: a jar tool or zip tool an editor for plain text files software for creating and editing images note: some zip tools only work with files whose names have <tt>.zip</tt> at the end.
... modifying your theme to modify your theme, change the css and image files in any way you like.
...you might prefer to do some design work in an image editor first, so that you have a clear design concept to implement.
...And 2 more matches
Texel - MDN Web Docs Glossary: Definitions of Web-related terms
a texel is a single-pixel within a texture map, which is an image that gets used (in whole or in part) as the image presented on a polygon's surface within a 3d rendered image.
...this is one of the main differences between texel’s and pixels, pixels are image data.
... texel components are made up of subjective data, therefore they can be an image as well as a depth map.
...And 2 more matches
Accessible multimedia - Learn web development
previous overview: accessibility next another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users.
... multimedia and accessibility so far in this module we have looked at a variety of content and what needs to be done to ensure its accessibility, ranging from simple text content to data tables, images, native controls such as form elements and buttons, and even more complex markup structures (with wai-aria attributes).
...images, videos, <canvas> elements, flash movies, etc., aren't as easily understood by screenreaders or navigated by the keyboard, and we need to give them a helping hand.
...And 2 more matches
Creating fancy letterheaded paper - Learn web development
save local copies of the top, bottom and logo images in the same directory as your code files.
... add a background declaration to the letter that: fixes the top image to the top of the letter fixes the bottom image to the bottom of the letter adds a semi-transparent gradient over the top of both of the previous backgrounds that gives the letter a bit of texture.
... add another background declaration that just adds the top image to the top of the letter, as a fallback for browsers that don't support the previous declaration.
...And 2 more matches
Test your skills: sizing - Learn web development
try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.
... task three this task has two images in boxes.
... one image is smaller than the box, the other is larger and breaking out of the box.
...And 2 more matches
Test your skills: backgrounds and borders - Learn web development
add a background image (use the url balloons.jpg) and size it so that it covers the box.
... the finished example should look like the image below.
... backgrounds and borders 2 in this task we want you to add background images, a border, and some other styling to a decorative box: give the box a 5px lightblue border, and round the top left corner 20px and the bottom right corner 40px the heading uses the star.png image as a background image, with a single centered star on the left and a repeating pattern of stars on the right.
...And 2 more matches
Styling links - Learn web development
the last rule however is interesting — here we are inserting a custom background image on external links in a similar manner to how we handled custom bullets on list items in the last article — this time however we are using background shorthand instead of the individual properties.
... we set the path to the image we want to insert, specify no-repeat so we only get one copy inserted, and then specify the position as 100% of the way over to the right of the text content, and 0 pixels from the top.
... we also use background-size to specify the size we want the background image to be shown at — it is useful to have a larger icon and then resize it like this as needed for responsive web design purposes.
...And 2 more matches
What do common web layouts contain? - Learn web development
in this example, look at the image (b1) right underneath the header.
... it's related to the main content, but the main content makes sense without it, so you could think of the image either as main content or as side content.
...because the image on the top-right is l-shaped, because b1 looks like a column supporting the shifted main content, and because the "m" and "i" of the mica logo create a vertical line of force.
...And 2 more matches
Choosing the right approach - Learn web development
yes (recursive callbacks) yes (nested callbacks) no code example an example that loads a resource via the xmlhttprequest api (run it live, and see the source): function loadasset(url, type, callback) { let xhr = new xmlhttprequest(); xhr.open('get', url); xhr.responsetype = type; xhr.onload = function() { callback(xhr.response); }; xhr.send(); } function displayimage(blob) { let objecturl = url.createobjecturl(blob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); } loadasset('coffee.jpg', 'blob', displayimage); pitfalls nested callbacks can be cumbersome and hard to read (i.e.
... single delayed operation repeating operation multiple sequential operations multiple simultaneous operations no no yes see promise.all(), below code example the following code fetches an image from the server and displays it inside an <img> element; see it live also, and see also the source code: fetch('coffee.jpg') .then(response => response.blob()) .then(myblob => { let objecturl = url.createobjecturl(myblob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); }) .catch(e => { console.log('there has been a problem with your ...
... on what type of file is being fetched, use the relevant function to decode its contents if(type === 'blob') { return response.blob(); } else if(type === 'text') { return response.text(); } }) .catch(e => { console.log(`there has been a problem with your fetch operation for resource "${url}": ` + e.message); }); } // call the fetchanddecode() method to fetch the images and the text, and store their promises in variables let coffee = fetchanddecode('coffee.jpg', 'blob'); let tea = fetchanddecode('tea.jpg', 'blob'); let description = fetchanddecode('description.txt', 'text'); // use promise.all() to run code only when all three function calls have resolved promise.all([coffee, tea, description]).then(values => { console.log(values); // store each value retu...
...And 2 more matches
Handling common HTML and CSS problems - Learn web development
so for example: mozilla uses -moz- chrome/opera/safari use -webkit- microsoft uses -ms- here's some examples: -webkit-transform: rotate(90deg); background-image: -moz-linear-gradient(left,green,yellow); background-image: -webkit-gradient(linear,left center,right center,from(green),to(yellow)); background-image: linear-gradient(to right,green,yellow); the first line shows a transform property with a -webkit- prefix — this was needed to make transforms work in chrome, etc.
... the third one has no prefix, and shows the final version of the syntax (included in the css image values and replaced content module level 3 spec, which defines this feature).
... resolution is a big issue too — for example, mobile devices are less likely to need big heavy images than desktop computers, and are more likely to have slower internet connections and possibly even expensive data plans that make wasted bandwidth more of a problem.
...And 2 more matches
Software accessibility: Where are we today?
these applications assumed that computer users could: read and react to text and images displayed on the screen.
...screen magnifiers also have some built-in text-to-speech and the ability to filter text and images through various color palettes, such as black on yellow for high contrast, or green on blue for low contrast.
...when the user types something on the keyboard, or when an application displays text or images on the screen, the exact meaning of these actions is determined by the context in which they take place.
...And 2 more matches
Gecko's "Almost Standards" Mode
a common case that this affects is the layout of images inside table cells.
... this means that sliced-images-in-tables layouts are less likely to fall apart in gecko-based browsers based on the rendering engine found in mozilla 1.0.1 or later when in either "quirks" or "almost standards" mode.
... (see the devedge article "images, tables, and mysterious gaps" for a detailed explanation of how such layouts are treated in "standards" mode.) in slightly more detail, what differs in almost-standards mode is roughly this: inline boxes that have no non-whitespace text as a child and have no border, padding, or margin: do not influence the size of the line box (that is, their line-height is ignored) do not get a height (e.g., for their background) larger than that of their descendants, even if their font size is larger (if they have no descendants, they are zero-height positioned at their baseline) other than this one difference, "almost standards" and "standards" modes are exactly the same in terms of layout and other behaviors.
...And 2 more matches
Examples
make user defined promise return after multiple images finish loading (promise.all and promise.defer) this example shows how to use promise.all to wait to create multiple promises with promise.defer() and return at the end of it.
...urce://gre/modules/promise.jsm"); var mypromise = myuserdefinedpromise(); mypromise.then( function(asuccessreason) { alert('mypromise was succesful and reason was = "' + asuccessreason + '"'); }, function(arejectreason) { alert('mypromise failed for reason = "' + uneval(arejectreason) + '"'); } ); function myuserdefinedpromise() { try { var mysubpromises = []; var imagepaths = ['http://www.mozilla.org/media/img/firefox/favicon.png', 'https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png']; [].foreach.call(imagepaths, function(path) { let myimage = new image(); let loadthisimagepromise = promise.defer(); mysubpromises.push(loadthisimagepromise.promise); myimage.onload = function() { loadthisimagepromise.resolve('su...
...ccesfully loaded image at path = "' + path + '" the width of this image is = "' + this.naturalwidth + '".'); if (!this.naturalwidth) { loadthisimagepromise.reject('image loaded but it has 0 width at path = "' + path + '" the naturalwidth was 0'); } } myimage.onerror = function(e) { loadthisimagepromise.reject('an error occured while loading path = "' + path + '".
...And 2 more matches
WebRequest.jsm
the following types are supported: "main_frame" "sub_frame" "stylesheet" "script" "image" "object" "xmlhttprequest" http headers https headers are represented as objects with two properties, name and value: name type description name string header name, for example "content-type" value string header value, for example "image/png" chrome incompatibilities although this api is modeled on chrome's webreq...
...dules/webrequest.jsm", {}); cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern("https:/developer.mozilla.org/*"); webrequest.onbeforerequest.addlistener(logurl, {urls: pattern}); function logurl(e) { console.log("loading: " + e.url); } this listener will be invoked for requests matching any of the three patterns, where the resource type is "stylesheet" or "image": let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern(["https://mozorg.cdn.mozilla.net/*", "https://mdn.mozillademos.org/*", "https://developer.cdn.mozilla.net/*"]); webrequest.onbeforerequest.addlistener(listener, { ...
... urls: pattern, types: ["image", "stylesheet"] }); function listener(e) { console.log("matched: " + e.url); } canceling this example cancels requests to load content from "http://example.org/": let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern("http://example.org/*"); webrequest.onbeforerequest.addlistener(cancelrequest, {urls: pattern}, ["blocking"]); function cancelrequest(e) { console.log("canceling: " + e.url); return {cancel: true}; } this code cancels requests for images that are...
...And 2 more matches
Creating localizable web content
images check that images are not going to be a problem for the audience (cultural references, positionning, mirroring for rtl, text in images...) and spot what sizes/margins can be tweaked by css or have to be fixed for all locales but english don't use text in icons images 1&2.
... bad: image 3.
... good: image 4.
...And 2 more matches
Using the Places favicon service
getting favicon images you can use favicons in the browser ui using special annotation uris.
... nsifaviconservice.getfaviconimageforpage() returns an annotation uri for the favicon for a given page, and nsifaviconservice.getfaviconlinkforicon() returns an annotation uri for the given favicon.
...you should always use nsifaviconservice.getfaviconimageforpage() to get the favicon for a page.
...And 2 more matches
imgIContainerObserver
image/public/imgicontainerobserver.idlscriptable an interface to implement to listen to activities on an imgicontainer object.
... methods native code only!framechanged called when the frame for an image container has changed.
... void framechanged( in imgirequest arequest, in imgicontainer acontainer, [const] in nsintrect adirtyrect ); parameters arequest the image request for which the change occurred.
...And 2 more matches
nsITransferable
kpngimagemime image/png png image.
... kjpegimagemime image/jpeg jpeg image.
... kjpgimagemime image/jpg jpeg image.
...And 2 more matches
nsITreeBoxObject
col, out acstring childelt); void getcoordsforcellitem(in long row, in nsitreecolumn col, in acstring element, out long x, out long y, out long width, out long height); boolean iscellcropped(in long row, in nsitreecolumn col); void rowcountchanged(in long index, in long count); void beginupdatebatch(); void endupdatebatch(); void clearstyleandimagecaches(); attributes attribute type description columns nsitreecolumns readonly: obtain the columns.
... childelt the pseudoelement hit: this can have values of "cell", "twisty", "image", and "text".
...this can have values of "cell", "twisty", "image", and "text".
...And 2 more matches
CanvasRenderingContext2D.createPattern() - Web APIs
the canvasrenderingcontext2d.createpattern() method of the canvas 2d api creates a pattern using the specified image and repetition.
... syntax canvaspattern ctx.createpattern(image, repetition); parameters image a canvasimagesource to be used as the pattern's image.
... it can be any of the following: htmlimageelement (<img>) svgimageelement (<image>) htmlvideoelement (<video>, by using the capture of the video) htmlcanvaselement (<canvas>) imagebitmap offscreencanvas repetition a domstring indicating how to repeat the pattern's image.
...And 2 more matches
Clipboard.read() - Web APIs
WebAPIClipboardread
unlike readtext(), the read() method can return arbitrary data, such as images.
...if it's not a png image, an error message is presented.
... otherwise, an image element referred to using the variable imgelem has its source replaced with the clipboard's contents.
...And 2 more matches
HTMLCanvasElement - Web APIs
htmlcanvaselement.todataurl() returns a data-url containing a representation of the image in the format specified by the type parameter (defaults to png).
... the returned image is in a resolution of 96dpi.
... htmlcanvaselement.toblob() creates a blob object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.
...And 2 more matches
The HTML DOM API - Web APIs
interacting with the contents of 2d images and the context of an html <canvas>, for example to draw on top of them.
... access to lists of elements in the document's <head> block and body, as well as lists of the images, links, scripts, etc.
... htmlaudioelement htmlbrelement htmlbaseelement htmlbodyelement htmlbuttonelement htmlcanvaselement htmldlistelement htmldataelement htmldatalistelement htmldetailselement htmldialogelement htmldirectoryelement htmldivelement htmlelement htmlembedelement htmlfieldsetelement htmlformelement htmlhrelement htmlheadelement htmlheadingelement htmlhtmlelement htmliframeelement htmlimageelement htmlinputelement htmllielement htmllabelelement htmllegendelement htmllinkelement htmlmapelement htmlmediaelement htmlmenuelement htmlmetaelement htmlmeterelement htmlmodelement htmlolistelement htmlobjectelement htmloptgroupelement htmloptionelement htmloutputelement htmlparagraphelement htmlparamelement htmlpictureelement htmlpreelement htmlprogresselement htmlquote...
...And 2 more matches
HTML Drag and Drop API - Web APIs
define the drag image by default, the browser supplies an image that appears beside the pointer during a drag operation.
... however, an application may define a custom image with the setdragimage() method, as shown in the following example.
... function dragstart_handler(ev) { // create an image and then use it for the drag image.
...And 2 more matches
MediaSettingsRange - Web APIs
the mediasettingsrange interface of the the mediastream image capture api provides the possible range and value size of photocapabilities.imageheight and photocapabilities.imagewidth.
... a photocapabilities object can be retrieved by calling imagecapture.photocapabilities().
... example the following example, extracted from chrome's image capture / photo resolution sample, uses the results from getphotocapabilities().imagewidth to modify the size of an input range.
...And 2 more matches
ServiceWorkerRegistration.showNotification() - Web APIs
badge: a usvstring containing the url of an image to represent the notification when there is not enough space to display the notification itself such as for example, the android notification bar.
... on android devices, the badge should accommodate devices up to 4x resolution, about 96 by 96 px, and the image will be automatically masked.
... dir : the direction of the notification; it can be auto, ltr or rtl icon: a usvstring containing the url of an image to be used as an icon by the notification.
...And 2 more matches
WebGL2RenderingContext - Web APIs
webgl2renderingcontext.teximage3d() specifies a three-dimensional texture image.
... webgl2renderingcontext.texsubimage3d() specifies a sub-rectangle of the current 3d texture.
... webgl2renderingcontext.copytexsubimage3d() copies pixels from the current webglframebuffer into an existing 3d texture sub-image.
...And 2 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
the xr hardware then handles ensuring that each eye only sees the portion of that image that is intended for that eye.
...an object containing references to eard loadtexture() loads the image at a given url and creates a webgl texture from it.
... if the image's dimensions aren't both powers of two (see the ispowerof2() function), mipmapping is disabled and wrapping is clamped to the edges.
...And 2 more matches
Using the Web Storage API - Web APIs
the landing page provides controls that can be used to customize the color, font, and decorative image: when you choose different options, the page is instantly updated; in addition, your choices are stored in localstorage, so that when you leave the page and load it again, later on, your choices are remembered.
...for example: function setstyles() { var currentcolor = localstorage.getitem('bgcolor'); var currentfont = localstorage.getitem('font'); var currentimage = localstorage.getitem('image'); document.getelementbyid('bgcolor').value = currentcolor; document.getelementbyid('font').value = currentfont; document.getelementbyid('image').value = currentimage; htmlelem.style.backgroundcolor = '#' + currentcolor; pelem.style.fontfamily = currentfont; imgelem.setattribute('src', currentimage); } here, the first three lines grab the values from l...
...finally, we update the styles/decorative image on the page, so your customization options come up again on reload.
...And 2 more matches
Window - Web APIs
WebAPIWindow
image used for creating an htmlimageelement.
... windoworworkerglobalscope.createimagebitmap() accepts a variety of different image sources, and returns a promise which resolves to an imagebitmap.
...for example, if a script has an execution error or an image can't be found or is invalid.
...And 2 more matches
Accessibility documentation index - Accessibility
a figure is generally considered to be one or more images, code snippets, or other content that puts across information in a different way to a regular flow of text.
... 67 aria: img role aria, aria img, aria role, accessibility, reference, rôle, figure the aria img role can be used to identify multiple elements inside page content that should be considered as a single image.
... these elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner.
...And 2 more matches
Web Accessibility: Understanding Colors and Luminance - Accessibility
"safer" animation means images with less contrast, not more.
... because we do not perceive the color "blue" as well as other colors, for example, some algorithms for compressing image sizes remove the parts of the image with "blue" in them more heavily than other parts of an image.
... the concept of color saturation is a difficult one to understand when only looking at numbers and terminology, so consider looking at the image below to illustrate the concept of saturation in a color.
...And 2 more matches
CSS Backgrounds and Borders - CSS: Cascading Style Sheets
styles in the css backgrounds and borders module allow filling backgrounds with color or an image (clipped or resized), or modifying them in other ways.
... these styles can also decorate borders with lines or images, and make them square or rounded.
... (additionally, element boxes can be decorated with a shadow.) reference css properties background background-attachment background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-style border-top border-top-color border-to...
...And 2 more matches
CSS reference - CSS: Cascading Style Sheets
WebCSSReference
-contentalign-itemsalign-selfall<an-plus-b><angle><angle-percentage>animationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function@annotationannotation()attr()b::backdropbackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-size<basic-shape>::before (:before)bleed (@page)<blend-mode>block-sizeblur()borderborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottombor...
...der-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-end-end-radiusborder-end-start-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-...
...ce)format()fr<frequency><frequency-percentage>:fullscreenggapgrad<gradient>grayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshhzhanging-punctuationheightheight (@viewport)@historical-forms:hoverhsl()hsla()hue-rotate()hyphensi<ident><image>image()image-orientationimage-renderingimage-set()@importin:in-range:indeterminateinheritinitialinline-sizeinsetinset()inset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start<integer>:invalidinvert()isolationjjustify-contentjustify-itemsjustify-selfkkhz@keyframesl:lang:last-child:last-of-typeleader():leftleft@left-bottom<length><length-percentage>letter-spacingli...
...And 2 more matches
<blend-mode> - CSS: Cascading Style Sheets
the effect is like two images printed on transparent film overlapping.
... the effect is like two images shone onto a projection screen.
...a foreground with the inverse color of the backdrop leads to a black final image.
...And 2 more matches
radial-gradient() - CSS: Cascading Style Sheets
the radial-gradient() css function creates an image consisting of a progressive transition between two or more colors that radiate from an origin.
...the function's result is an object of the <gradient> data type, which is a special kind of <image>.
... because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used.
...And 2 more matches
<form> - HTML: Hypertext Markup Language
WebHTMLElementform
this value can be overridden by a formaction attribute on a <button>, <input type="submit">, or <input type="image"> element.
... this value can be overridden by formenctype attributes on <button>, <input type="submit">, or <input type="image"> elements.
... this value is overridden by formmethod attributes on <button>, <input type="submit">, or <input type="image"> elements.
...And 2 more matches
<input type="submit"> - HTML: Hypertext Markup Language
WebHTMLElementinputsubmit
this attribute is also available on <input type="image"> and <button> elements.
... this attribute is also available on <input type="image"> and <button> elements.
... this attribute is also available on <input type="image"> and <button> elements.
...And 2 more matches
Common MIME types - HTTP
.abw abiword document application/x-abiword .arc archive document (multiple files embedded) application/x-freearc .avi avi: audio video interleave video/x-msvideo .azw amazon kindle ebook format application/vnd.amazon.ebook .bin any kind of binary data application/octet-stream .bmp windows os/2 bitmap graphics image/bmp .bz bzip archive application/x-bzip .bz2 bzip2 archive application/x-bzip2 .csh c-shell script application/x-csh .css cascading style sheets (css) text/css .csv comma-separated values (csv) text/csv .doc microsoft word application/msword .docx microsoft word (openxml) application/vnd.openx...
...mlformats-officedocument.wordprocessingml.document .eot ms embedded opentype fonts application/vnd.ms-fontobject .epub electronic publication (epub) application/epub+zip .gz gzip compressed archive application/gzip .gif graphics interchange format (gif) image/gif .htm .html hypertext markup language (html) text/html .ico icon format image/vnd.microsoft.icon .ics icalendar format text/calendar .jar java archive (jar) application/java-archive .jpeg .jpg jpeg images image/jpeg .js javascript text/javascript, per the following specifications: https://html.spec.whatwg.org/multipage/#scriptinglanguages https://html.spec.what...
...t document application/vnd.oasis.opendocument.spreadsheet .odt opendocument text document application/vnd.oasis.opendocument.text .oga ogg audio audio/ogg .ogv ogg video video/ogg .ogx ogg application/ogg .opus opus audio audio/opus .otf opentype font font/otf .png portable network graphics image/png .pdf adobe portable document format (pdf) application/pdf .php hypertext preprocessor (personal home page) application/x-httpd-php .ppt microsoft powerpoint application/vnd.ms-powerpoint .pptx microsoft powerpoint (openxml) application/vnd.openxmlformats-officedocument.presentationml.presentation .rar rar archive appli...
...And 2 more matches
Content Security Policy (CSP) - HTTP
WebHTTPCSP
for example, a page that uploads and displays images could allow images from anywhere, but restrict a form action to a specific endpoint.
...there are specific directives for a wide variety of types of items, so that each type can have its own policy, including fonts, frames, images, audio and video media, scripts, and workers.
...n origin (this excludes subdomains.) content-security-policy: default-src 'self' example 2 a web site administrator wants to allow content from a trusted domain and all its subdomains (it doesn't have to be the same domain that the csp is set on.) content-security-policy: default-src 'self' *.trusted.com example 3 a web site administrator wants to allow users of a web application to include images from any origin in their own content, but to restrict audio or video media to trusted providers, and all scripts only to a specific server that hosts trusted code.
...And 2 more matches
OpenSearch description format
<opensearchdescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/"> <shortname>[snk]</shortname> <description>[search engine full name and summary]</description> <inputencoding>[utf-8]</inputencoding> <image width="16" height="16" type="image/x-icon">[https://example.com/favicon.ico]</image> <url type="text/html" template="[searchurl]"> <param name="[key name]" value="{searchterms}"/> <!-- other params if you need them… --> <param name="[other key name]" value="[parameter value]"/> </url> <url type="application/x-suggestions+json" template="[suggestionurl]"/> <moz:searchform>[ht...
... image uri of an icon for the search engine.
... when possible, include a 16×16 image of type image/x-icon (such as /favicon.ico) and a 64×64 image of type image/jpeg or image/png.
...And 2 more matches
Progressive web app structure - Progressive web apps (PWAs)
structure of our example application the js13kpwa website structure is quite simple: it consists of a single html file (index.html) with basic css styling (style.css), and a few images, scripts, and fonts.
...tf-8"> <title>js13kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kgames"></a></p> </header> <main>...
...the <body> is split into the <header> (containing linked image), <main> page (with title, description and place for a content), and <footer> (copy and links).
...And 2 more matches
Structural overview of progressive web apps - Progressive web apps (PWAs)
also included are a few images, scripts, and fonts.
...tf-8"> <title>js13kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kgames"></a></p> </header> <main>...
...the <body> is split into the <header> (which displays an image) and the body of the app, which is found inside a <main> element.
...And 2 more matches
height - SVG: Scalable Vector Graphics
WebSVGAttributeheight
twenty five elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <pattern>, <rect>, <svg>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- with a height of 0 or less, nothing will be rendered --> <rect y="0" x="0" width="90" height="0"/> <rect y="0" x="100" width="90" height="60"/> <rect y="0" x="200" width="90" height="100%"/> </svg> ...
... value <length> | <percentage> default value 100% animatable yes feimage for <feimage>, height defines the vertical length for the rendering area of the primitive.
... image for <image>, height defines the vertical length for the image.
...And 2 more matches
width - SVG: Scalable Vector Graphics
WebSVGAttributewidth
twenty five elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <pattern>, <rect>, <svg>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <!-- with a width of 0 or less, nothing will be rendered --> <rect x="0" y="0" width="0" height="90"/> <rect x="0" y="100" width="60" height="90"/> <rect x="0" y="200" width="100%" height="90"/> </svg> ...
... value <length> | <percentage> default value 100% animatable yes feimage for <feimage>, width defines the horizontal length for the rendering area of the primitive.
... image for <image>, width defines the horizontal length for the image.
...And 2 more matches
x - SVG: Scalable Vector Graphics
WebSVGAttributex
thirty seven elements are using this attribute: <altglyph>, <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="60" height="60" /> <rect x="120" y="20" width="60" height="6...
... value <length> | <percentage> default value 0% animatable yes feimage for <feimage>, x defines the minimum x coordinate for the rendering area of the primitive.
... animatable yes image for <image>, x defines the x coordinate of the uper left corner of the image.
...And 2 more matches
xChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" xchannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" sc...
...r> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">some displaced text</text> <text x="10" y="120" font-size="50" filter="url(#displacementfilter2)">some displaced text</text> </svg> usage notes value r | g | b | a default value a animatable yes r this keyword specifies that the red color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the x-axis.
... g this keyword specifies that the green color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the x-axis.
...And 2 more matches
y - SVG: Scalable Vector Graphics
WebSVGAttributey
thirty seven elements are using this attribute: <altglyph>, <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <rect y="20" x="20" width="60" height="60" /> <rect y="120" x="20" width="60" height="6...
... value <length> | <percentage> default value 0% animatable yes feimage for <feimage>, y defines the minimum y coordinate for the rendering area of the primitive.
... value <number> default value none animatable yes image for <image>, y defines the y coordinate of the uper left corner of the image.
...And 2 more matches
yChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" ychannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" sc...
...r> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">some displaced text</text> <text x="10" y="120" font-size="50" filter="url(#displacementfilter2)">some displaced text</text> </svg> usage notes value r | g | b | a default value a animatable yes r this keyword specifies that the red color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the y-axis.
... g this keyword specifies that the green color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the y-axis.
...And 2 more matches
Other content in SVG - SVG: Scalable Vector Graphics
« previousnext » apart from graphic primitives like rectangles and circles, svg offers a set of elements to embed other types of content in images as well.
... embedding raster images much like the img element in html svg has an image element to serve the same purpose.
... you can use it to embed arbitrary raster (and vector) images.
...And 2 more matches
SVG: Scalable Vector Graphics
WebSVG
as such, it's a text-based, open web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other web standards including css, dom, javascript, and smil.
... svg images and their related behaviors are defined in xml text files, which means they can be searched, indexed, scripted, and compressed.
... compared to classic bitmapped image formats such as jpeg or png, svg-format vector images can be rendered at any size without loss of quality and can be easily localized by updating the text within them, without the need of a graphical editor to do so.
...And 2 more matches
Mixed content - Web security
for example, an attacker could replace an image served over http with an inappropriate image or message to the user.
... the attacker could also infer information about the user's activities by watching which images are served to the user; often images are only served on a specific page within a website.
... if the attacker observes http requests to certain images, they could determine which webpage the user is visiting.
...And 2 more matches
tabs - Archive of obsolete content
it has one of four possible values: "uninitialized": the tab's document is not yet loading "loading": the tab's document is still in the process of loading "interactive": the tab's document has loaded and is parsed, but resources such as images and stylesheets may still be loading "complete": the tab's document and all resources are fully loaded once a tab's readystate has entered "interactive", you can retrieve properties such as the document's url.
...at this point the document itself is fully loaded and parsed, but resources such as stylesheets and images may still be loading.
...at this point the document and its resources, such as images and stylesheets, have finished loading.
... this event can be used for pages that do not have a domcontentloaded event, like images.
Examples and demos from articles - Archive of obsolete content
[article] image preview before upload [html] the filereader.prototype.readasdataurl() method is useful, for example, to get a preview of an image before uploading it.
...for a full compatibility code, see also our crossbrowser possible solution for image preview.
....[article] pure-css web gallery based on the :hover pseudoclass [zip] you can use the :hover pseudo-class in order to build an image gallery with full-size images shown only when mouse goes over previews.
... .[article] pure-css web gallery based on the :checked pseudoclass [zip] you can also use the :checked pseudo-class applied to hidden radioboxes in order to build, for example, an image gallery with full-size images shown only when mouse clicks on previews.
Adding menus and submenus - Archive of obsolete content
it's best to show an item with a throbber image (see chrome://global/skin/icons/loading_16.png) so the user knows there's something going on, and asynchronously fill its contents.
... menus with images to add an icon to a menu or menuitem, set its class to "menu-iconic" or "menuitem-iconic" respectively, and set the image attribute or the list-style-image css property.
... images in menu items may not appear, showing only a narrow segment of the image instead.
... this seems to happen when remote images are used.
Custom XUL Elements with XBL - Archive of obsolete content
as explained earlier, xul is really just boxes, text and images.
... <content> <xul:hbox> <xul:image class="xulshoolhello-person-image" xbl:inherits="src=image" /> <xul:vbox flex="1"> <xul:label xbl:inherits="value=name" /> <xul:description xbl:inherits="value=greeting" /> </xul:vbox> <xul:vbox> <xul:button label="&xulshoolhello.remove.label;" accesskey="&xulshoolhello.remove.accesskey;" oncommand="document.getbindingparent(this).remove(event);" /> ...
... </xul:vbox> </xul:hbox> </content> our element is very simple, displaying an image, a couple of text lines and a button.
...so, if you have this: <xshelloperson name="pete" greeting="good morning" image="" />, then those attribute values are "inherited" to the content nodes that have this special attribute.
Frequently Asked Questions - Archive of obsolete content
when servers send user agents an svg file they must tell the user agent that the file has the mime type "image/svg+xml", and if the svg file is stored gzipped they must tell the browser that too.
...for example, webpages that embed svg using the <object> or <embed> tags must have a 'type' attribute assigned with the correct svg mime type of "image/svg+xml".
... if the mime type specified is wrong (for example image/svg-xml) mozilla won't recognise it.
...the svg mime type is image/svg+xml (not image/svg-xml or anything else for that matter).
Creating XPI Installer Modules - Archive of obsolete content
the barley package the barley package is a simple xul window with a couple of buttons and an image element.
...the barley package ui is a single xul window with an accompanying image: <?xml version="1.0"?> <?xml-stylesheet href="chrome://communicator/skin/" type="text/css"?> <window title="barley window" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul" width="175" height="375" x="20" y="20" persist="width height x y" orient="vertical" autostretch="always"> <script src="barley.js"/> <image src="barley.gif"...
...the javascript file barley.js contains a single function, bar(), defined as follows: function bar() { alert("aphids"); } if you want to use the same gif image that is used in the barley package, it can be grabbed from here.
...though mozilla will not display the file as a separate window (much less interpret it as a separate package), you ought to be able to see the image and the javascript function working as defined in barley.js (provided that both all three files are in the same working directory).
validate - Archive of obsolete content
« xul reference home validate type: one of the values below this attribute indicates whether to load the image from the cache or not.
... this would be useful if the images are stored remotely or you plan on swapping the image frequently.
... the following values are accepted, or leave out the attribute entirely for default handling: always the image is always checked to see whether it should be reloaded.
... never the image will be loaded from the cache if possible.
MenuButtons - Archive of obsolete content
an arrow appears on the button next to the label or image indicating to the user that a menu is present.
...in the example below a toolbarbutton with an image has a menu associated with it.
... <toolbarbutton type="menu" image="cookies.png"> <menupopup> <menuitem label="block cookies" type="checkbox"/> <menuitem label="clear cookies"/> </menupopup> </toolbarbutton> the 'menu-button' button the 'menu-button' type of button is used when you want to attach a menu to a button but want to have a default action carried out when the button is pressed by itself.
... this is accomplished by dividing the button into two parts, one with the label and image to carry out the default command and the second to show the menu.
listcell-iconic - Archive of obsolete content
« xul reference home listcell-iconic use this class to have an image appear on the listcell.
... specify the image using the image attribute.
... note that both an image and a label are added when this style is set.
...if it is desired to center the image, use css to hide the label.
Actions - Archive of obsolete content
here is the [example], and an image of what it looks like: the template builder iterates through the three results, processing the body of the action for each one in turn.
...in the image, you can see that the label for the first button does indeed have this value.
...?relateditem" label="?relateditem"/> </action> </template> <button id="http://www.xulplanet.com/rdf/b" label="http://www.xulplanet.com/rdf/b"/> <button id="http://www.xulplanet.com/rdf/c" label="http://www.xulplanet.com/rdf/c"/> <button id="http://www.xulplanet.com/rdf/d" label="http://www.xulplanet.com/rdf/d"/> </vbox> since the template tag is hidden, the effect will be like in the image, three buttons with the labels of the data in the datasource.
...here is an image of [this example] (note: see the next section for an explanation of why there are extra buttons here.) « previousnext » ...
RDF Modifications - Archive of obsolete content
for instance, an assert call looks like the following: var source = rdf.getresource("http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg"); var predicate = rdf.getresource("http://purl.org/dc/elements/1.1/description"); var target = rdf.getliteral("one of the thirty or so egyptian obelisks"); datasource.assert(source, predicate, target, true); the assert call adds a new triple to the rdf datasource.
... subject: http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg predicate: http://purl.org/dc/elements/1.1/description object: one of the thirty or so egyptian obelisks the template builder will be notified through the rdf observer mechanism of the change.
... (?photo = http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg, ?description = 'one of the thirty or so egyptian obelisks') next, the builder works its way backwards through the statements, in order to fill in the remaining variables.
...now, the potential result so far is: (?photo = http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg, ?description = 'one of the thirty or so egyptian obelisks', ?start = http://www.xulplanet.com/rdf/myphotos, ?title = 'obelisk') as you can see, the result looks to have all the information necessary to create a new item in the output.
Simple Query Syntax - Archive of obsolete content
here is what it might look like: <template> <vbox class="box-padded" uri="rdf:*"> <image src="rdf:*"/> <label value="rdf:http://purl.org/dc/elements/1.1/title"/> </vbox> </template> there is no <query> or <action> element used.
...after the default query statements are evaluated, the data network will look something like this: (?1 = http://www.xulplanet.com/rdf/myphotos, ?2 = http://www.xulplanet.com/ndeakin/images/t/palace.jpg) (?1 = http://www.xulplanet.com/rdf/myphotos, ?2 = http://www.xulplanet.com/ndeakin/images/t/canal.jpg) (?1 = http://www.xulplanet.com/rdf/myphotos, ?2 = http://www.xulplanet.com/ndeakin/images/t/obselisk.jpg) the numbers are used here for the variable names, but they are really just randomly generated so you can't refer to them in any way.
...you can see in the example that the value 'rdf:*' is used in two places, the uri attribute on the hbox and as the src attribute for the image.
...for example, to filter for photos with a specific country: <hbox id="photoslist" datasources="template-guide-photos4.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:r="http://www.xulplanet.com/rdf/"> <template> <rule r:country="http://www.daml.org/2001/09/countries/iso#it"> <vbox class="box-padded" uri="rdf:*"> <image src="rdf:*"/> <label value="rdf:http://purl.org/dc/elements/1.1/title"/> </vbox> </rule> </template> </hbox> this example shows how a single attribute may be used to filter for only those results that have a country set to 'http://www.daml.org/2001/09/countries/iso#it'.
Complete - Archive of obsolete content
in this extension, the only things that depend on the theme are the icon images on the buttons and the css style rules.
...how a button gets themed when you look at button 1 in seamonkey, you see an image or style that depends on your theme.
...the css stylesheet uses the corresponding selector #all-custom-1 to provide the appropriate image: button-1.png file structure in the new file structure, there is a skin directory for all the themes.
...the allcustom directory contains the icon images and the css stylesheet.
Custom Tree Views - Archive of obsolete content
rowcount : 10000, getcelltext : function(row,column){ if (column.id == "namecol") return "row "+row; else return "february 18"; }, settree: function(treebox){ this.treebox = treebox; }, iscontainer: function(row){ return false; }, isseparator: function(row){ return false; }, issorted: function(){ return false; }, getlevel: function(row){ return 0; }, getimagesrc: function(row,col){ return null; }, getrowproperties: function(row,props){}, getcellproperties: function(row,col,props){}, getcolumnproperties: function(colid,col,props){} }; the functions in the example not described above do not need to perform any action, but they must be implemented as the tree calls them to gather additional information.
...rowcount : 10000, getcelltext : function(row,column){ if (column.id == "namecol") return "row "+row; else return "february 18"; }, settree: function(treebox){ this.treebox = treebox; }, iscontainer: function(row){ return false; }, isseparator: function(row){ return false; }, issorted: function(){ return false; }, getlevel: function(row){ return 0; }, getimagesrc: function(row,col){ return null; }, getrowproperties: function(row,props){}, getcellproperties: function(row,col,props){}, getcolumnproperties: function(colid,col,props){} }; function setview(){ document.getelementbyid('my-tree').view = treeview; } </script> <tree id="my-tree" flex="1"> <treecols> <treecol id="namecol" label="name" flex="1"/> <treecol id="datecol" l...
...abel="date" flex="1"/> </treecols> <treechildren/> </tree> </window> in the image, you can see two columns, each with data taken from the getcelltext() function.
...in the image, only seven rows are displayed, the last only partially, so getcelltext() will be called only 14 times, one for each row and column.
Element Positioning - Archive of obsolete content
in the image, the first two buttons have been given a suitable size to hold their text.
...the following example demonstrates this: example 2 : source view <window orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox> <button label="yes" flex="1"/> <button label="no"/> <button label="i really don't know one way or the other"/> </hbox> </window> the window will initially appear like in the image earlier.
...the width of the box will be set to the initial total width of all three buttons (around 430 pixels in the image).
...notice in the image that the text input has grown to extend to the full size of the window.
notification - Archive of obsolete content
attributes image, label, priority, persistence, type, value properties accessibletype, control, image, label, priority, persistence, type, value methods close examples <notification label="this is a warning"/> attributes image type: uri the uri of the image to appear on the element.
... if this attribute is empty or left out, no image appears.
... the position of the image is determined by the dir and orient attributes.
... image type: image url gets and sets the value of the image attribute.
Gecko Compatibility Handbook - Archive of obsolete content
images are laid out without intervening blank areas in interent explorer but display blank areas between the images in gecko browsers.
... invalid use of spaces in name attributes (such as image maps) many authors seem to be infected by a penchant to use spaces in names.
...this can cause problems with gecko-based browsers, especially in image maps.
...gecko browsers require that the server specifies the correct mime type to match the content type: html - text/html css - text/css (related article) xml - text/xml svg - image/svg+xml faulty implementations of http several web servers incorrectly implement the http protocol which can result in problems for netscape 6.
Visual JS GE - Game development
resource js objects used for adding images for animation purposes.
...you need to put your images in a folder, for example test_res/ , inside project_instance/res/.
... resource objects contain the path data for all your images.
... the actual image objects will be created after you add animation to the game objects.
Gecko FAQ - Gecko Redirect 1
basically, a layout engine takes content (such as html, xml, image files, applets, and so on) and formatting information (such as cascading style sheets, presentational html tags, etc.) and displays the formatted content on the screen.
...0: full support, except for processing to manipulate default attributes rdf: full support, except for abouteach, abouteachprefix, and parsetype javascript 1.5, including ecma-262 edition 3 (ecmascript) compliance, except for date.todatestring and date.totimestring, which are not implemented transfer protocols: http 1.1 (including gzip compression), ftp ssl unicode oji (open java interface) image formats png gif jpeg, pjpeg does "full support" mean that gecko has zero bugs today or will have zero bugs at some point in the future?
...anding issues with html 4.01 compliance css: style system component (see also bug reports marked with the css1, css2, and css3 keywords) dom: see dom0, dom1, dom2 and event handling components xml rdf core javascript language interpreter (javascript engine) http 1.1 compliance bugs should generally be found on the networking, networking - general, and networking: cache components oji imagelib image library (see also jpeg image handling and png image handling) ssl-related bugs are filed on the crypto component for information about the known bugs of a specific commercial product based on gecko, see that product's release notes.
... gecko includes the following components: document parser (handles html and xml) layout engine with content model style system (handles css, etc.) javascript runtime (spidermonkey) image library networking library (necko) platform-specific graphics rendering and widget sets for win32, x, and mac user preferences library mozilla plug-in api (npapi) to support the navigator plug-in interface open java interface (oji), with sun java 1.2 jvm rdf back end font library security library (nss) original document information author(s): angus other contributors: ekrock, vidur...
Handling different text directions - Learn web development
for example, you can float an image left to cause text to wrap round the image.
... change the writing mode on this example to vertical-rl to see what happens to the image.
...if you are using google chrome or microsoft edge, you may find that the image did not float.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Organizing your CSS - Learn web development
you may have used a css property in a specific way to get around older browser incompatibilities, for example: .box { background-color: red; /* fallback for older browsers that don't support gradients */ background-image: linear-gradient(to right, #ff0000, #aa0000); } perhaps you followed a tutorial to achieve something, and the css is a little non-obvious.
...this is a pattern with a fixed size image, video or other element on one side, and flexible content on the other.
...the differences between these two components is that the list-item has a bottom border, and images in comments have a border whereas list-item images do not.
... previous overview: building blocks in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Test your skills: Writing Modes and Logical Properties - Learn web development
your example should look like the image below.
...your end result should look like the image below.
... try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.
...you can see how this should look in the image below.
Using CSS generated content - Learn web development
you modify your stylesheet to add text content or images.
...you can specify text or image content within a stylesheet when that content is closely linked to the document's structure.
... this issue does not arise if the content you specify consists of symbols or images that apply in all languages and cultures.
... image content to add an image before or after an element, you can specify the url of an image file in the value of the content property.
create fancy boxes - Learn web development
its background properties: background, background-color, background-image, background-position, background-size, etc.
... backgrounds can be either solid colors or images: solid color always fills the whole surface but images can be scaled and positioned.
... as you will notice, color gradients are considered to be images and can be manipulated as such */ background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%), linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%), linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%), linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%), linear-gradient(175deg, rgba(0,...
...background-color: #ffc; padding: 2rem; text-align: center; max-width: 200px; } .fancy::before { content: ""; position : absolute; z-index : -1; bottom : 15px; right : 5px; width : 50%; top : 80%; max-width: 200px; box-shadow: 0px 13px 10px black; transform: rotate(4deg); } what's next in many ways, making a fancy box is mostly about adding color and images within the background, so it could worth digging into managing colors and images.
How much does it cost to do something on the Web? - Learn web development
image editors your system likely includes a simple image editor, or viewer: paint on windows, eye of gnome on ubuntu, preview on mac.
...most of the images on the internet are copyrighted, so it is better to check the license of the file before you use it.
... sites like pixabay provide images under cc0 license, so you can use, edit and publish them even with modification for commercial use.
... isp access make sure that you have sufficient bandwidth: low-bandwidth access may be adequate to support a 'simple' website: reasonably-sized images, texts, some css and javascript.
Getting started with HTML - Learn web development
for example, the <img> element embeds an image file onto a page: <img src="https://udn.realityripple.com/samples/d5/2be21e0477.png"> this would output the following: note: empty elements are sometimes called void elements.
...this contains all the content that displays on the page, including text, images, videos, games, playable audio tracks, or whatever else.
... add an image to your document.
...earn bonus points if you manage to link to a different image (either locally on your computer, or somewhere else on the web).
Test your skills: Links - Learn web development
links 2 in this task we want you to fill in the four links so that they link to the appropriate places: the first link should link to an image called blue-whale.jpg, which is located in a directory called blue inside the current directory.
... the second link should link to an image called narwhal.jpg, which is located in a directory called narwhal, which is located one directory level above the current directory.
... the third link should link to the uk google image search.
... the base url is https://www.google.co.uk, and the image search is located in a subdirectory called imghp.
Video and audio content - Learn web development
previous overview: multimedia and embedding next now that we are comfortable with adding simple images to a webpage, the next step is to start adding video and audio players to your html documents!
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, familiarity with html fundamentals (as covered in getting started with html) and images in html.
... video and audio on the web web developers have wanted to use video and audio on the web for a long time, ever since the early 2000s when we started to have bandwidth fast enough to support any kind of video (video files are much larger than text or even images.) in the early days, native web technologies such as html didn't have the ability to embed video and audio on the web, so proprietary (or plugin-based) technologies like flash (and later, silverlight) became popular for handling such content.
... poster the url of an image which will be displayed before the video is played.
Multimedia: video - Learn web development
previous overview: performance next as we learned in the previous section, media, namely images and video, account for over 70% of the bytes downloaded for the average website.
... we have already taken a look at optimizing images.
... similar to responsive images, the correct size video is delivered to the browser, ensuring fast video startup, low buffering, and optimized playback.
... measuring performance multimedia: images multimedia: video javascript performance best practices.
Handling common JavaScript problems - Learn web development
as an example, the fetch api (a modern equivalent to xmlhttprequest) uses promises to fetch resources across the network and make sure that the response has been returned before they are used (for example, displaying an image inside an <img> element).
... to get started, make a local copy of our fetch-polyfill.html example and our nice image of some flowers in a new directory.
... we are going to write code to fetch the flowers image and display it in the page.
... apply the polyfill scripts to the page using the following code — place these above the existing <script> element so they will be available on the page already when we start trying to use fetch: <script src="es6-promise.js"></script> <script src="fetch.js"></script> inside the original <script>, add the following code: const myimage = document.queryselector('.my-image'); fetch('flowers.jpg').then(function(response) { response.blob().then(function(myblob) { let objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); }); now if you load it in a browser that doesn't support fetch (safari and ie are obvious candidates), you should still see the flower image appear — cool!
Storage access policy: Block cookies from trackers
browser caches: the http cache, the image cache, and the alternative services (alt-svc) cache are all partitioned for tracking resources, such that each top-level origin will have a separate partition and tracking resources on different top-level origins will be cached separate from each other.
... embedding tracker.example resource storage access an image is loaded from tracker.example and embedded in the main context of example.com.
...that <iframe> goes on to load an image from tracker.example.
...in the sample image below, trackertest.org is classified as a tracking resource, while the request to example.com is not.
CustomizableUI.jsm
if (aarea == customizableui.area_panel) { useicon = 'chrome://branding/content/icon32.png'; } else { useicon = 'chrome://branding/content/icon16.png'; } var myinstances = customizableui.getwidget('noida').instances; for (var i=0; i<myinstances.length; i++) { myinstances[i].node.setattribute('image', useicon); } }, onwidgetdestroyed: function(awidgetid) { console.log('a widget destroyed so removing listener, arguments:', arguments); if (awidgetid != 'noida') { return } console.log('my widget destoryed'); customizableui.removelistener(mywidgetlistener); } } customizableui.
...get //start - use style sheet service to style our widget to give it an icon cu.import('resource://gre/modules/services.jsm'); var sss = cc['@mozilla.org/content/style-sheet-service;1'].getservice(ci.nsistylesheetservice); var css = ''; css += '@-moz-document url("chrome://browser/content/browser.xul") {'; css += ' #id_of_my_widget_within_customizableui_and_dom {'; css += ' list-style-image: url("chrome://branding/content/icon16.png")'; //a 16px x 16px icon for when in toolbar css += ' }'; css += ' #id_of_my_widget_within_customizableui_and_dom[cui-areatype="menu-panel"],'; css += ' toolbarpaletteitem[place="palette"] > #id_of_my_widget_within_customizableui_and_dom {'; css += ' list-style-image: url("chrome://branding/content/icon32.png");'; //a 32px x 32px icon...
... customizableui.createwidget({ id: 'navigator-throbber', //id in cui.jsm // should match id of that in dom (line #11) type: 'custom', defaultarea: customizableui.area_navbar, onbuild: function(adocument) { var toolbaritem = adocument.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbaritem'); var image = adocument.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'image'); image.setattribute('src', 'chrome://branding/content/icon16.png'); var props = { id: 'navigator-throbber', //id in dom // should match id of that in cui.jsm (line #2) title: 'activity indicator', align: 'center', pack: 'center', ...
... mousethrough: 'always', removable: 'true', sdkstylewidget: 'true', overflows: false }; for (var p in props) { toolbaritem.setattribute(p, props[p]); } toolbaritem.appendchild(image); return toolbaritem; } }); when you want to remove this widget run this code: customizableui.destroywidget('navigator-throbber-id-within-customizableui-object'); custom type - involved the browser uses type custom for its zoom controls and edit controls in the panel.
OS.File for the main thread
a, outfile, chunksize) { return task.spawn(function() { let view = new uint8array(data); let pos = 0; while (pos < view.bytelength) { pos += yield outfile.write(view.subarray(pos, chunksize)); } outfile.close(); }).then( null, function onfailure(reason) { outfile.close(); throw reason; } ); } example: save canvas to disk this exmaple uses image to load an image from a path (note: if your path is a file on disk you must use local file; this is accomplished with os.path.tofileuri, which accepts a string).
... after image loads it then draws it to canvas, makes it a blob, and uses filereader to turn it into arraybuffer(view), then uses os.file.writeatomic to save to disk.
... var img = new image(); img.onload = function() { var canvas = document.createelementns('http://www.w3.org/1999/xhtml', 'canvas'); canvas.width = img.naturalwidth; canvas.height = img.naturalheight; var ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); (canvas.toblobhd || canvas.toblob).call(canvas, function(b) { var r = cc['@mozilla.org/files/filereader;1'].createinstance(ci.nsidomfilereader); //new filereader(); r.onloadend = function() { // r.result contains the arraybuffer.
... var writepath = os.path.join(os.constants.path.desktopdir, 'savedimage.png'); var promise = os.file.writeatomic(writepath, new uint8array(r.result), { tmppath: writepath + '.tmp' }); promise.then( function(aval) { console.log('successfully saved image to disk'); }, function(areason) { console.log('writeatomic failed for reason:', areason); } ); }; r.readasarraybuffer(b); }, 'image/png'); }; //var path = os.path.tofileuri(os.path.join(os.contants.path.desktopdir, 'my.png')); //do it like this for images on disk var path = 'https://mozorg.cdn.mozilla.net/media/img/firefox/channel/toggler-beta.png?2013-06'; //do like this for i...
Mozilla Quirks Mode Behavior
prior to gecko 36, it also applied to images, and form controls but the quirk has been adapted to match the behavior of other browser (bug 783213).
... images (img elements) without alt attributes sometimes display placeholder icons in quirks mode.
... there are a bunch of quirks to get percentage heights on images, tables, objects, and applets (etc.?) to "work" (the way they did in netscape navigator 4), even though css says that percentage heights should behave like 'auto' heights when the parent element doesn't have a fixed height.
... maybe (firefox 3) when computing the minimum intrinsic width of an inline flow directly in a table cell (no blocks in between), it is assumed that it is not possible to break before and after an image (when otherwise it would be).
nsIAccessibleRole
role_chart 17 represents a graphical image used to represent data.
...is is used for xul:image, html:img.
... role_diagram 53 represents a graphical image used to diagram data.
... role_combobox_option 115 a item of list that is shown by combobox; role_image_map 116 an image map -- has child links representing the areas.
nsIAlertsService
implemented by: @mozilla.org/alerts-service;1 as a service: var alertsservice = components.classes["@mozilla.org/alerts-service;1"] .getservice(components.interfaces.nsialertsservice); method overview void showalertnotification(in astring imageurl, in astring title, in astring text, [optional] in boolean textclickable, [optional] in astring cookie, [optional] in nsiobserver alertlistener, [optional] in astring name, [optional] in astring dir, [optional] in astring lang, [optional] in astring data, [optional] in nsiprincipal principal,[optional] in boolean inprivatebrowsing); void closealert([optional] in astring name, [optional...
... void showalertnotification( in astring imageurl, in astring title, in astring text, in boolean textclickable, optional in astring cookie, optional in nsiobserver alertlistener, optional in astring name, optional in astring dir, optional in astring lang, optional in astring data, optional in nsiprincipal principal, optional in boolean inprivatebrowsing, optional ); parameters imageurl a url identifying the image to display in the notification alert.
... inprivatebrowsing optional controls the image loading behavior.
... if true, the image url will be loaded in private browsing mode.
Accessibility Inspector - Firefox Developer Tools
in the following example, you can see that the image has been highlighted and its role, graphic, name, "road, asphalt, sky, clouds, fall", and the color contrast ratio, 3.46, appears in the information bar above it.
... for example: the color contrast in the image above is 2.86, so potentially not enough contrast to make it easy to read.
... as of firefox 65, viewing this information for some foreground text that has a complex background image (e.g.
...for a start, you can investigate items that don't have a proper text equivalent — images without alt text and form elements without proper labels have a name property of null, for example.
Taking screenshots - Firefox Developer Tools
by default, the image file will be named screen shot yyy-mm-dd at hh.mm.ss.png.
...values above 1 yield "zoomed-in" images, whereas values below 1 create "zoomed-out" images.
... note: if you capture an image to a filename like test.png, and then you capture to that same filename, the new image will overwrite the old image.
... so if you’re using the up-arrow history scroll to capture images in quick succession, be careful — you need to remember to change the filename for each new capture.
Basic usage of canvas - Web APIs
the element can be sized arbitrarily by css, but during rendering the image is scaled to fit its layout size: if the css sizing doesn't respect the ratio of the initial canvas, it will appear distorted.
... the <canvas> element can be styled just like any normal image (margin, border, background…).
... for example, we could provide a text description of the canvas content or provide a static image of the dynamically rendered content.
... this can look something like this: <canvas id="stockgraph" width="150" height="150"> current stock price: $3.15 + 0.15 </canvas> <canvas id="clock" width="150" height="150"> <img src="images/clock.png" width="150" height="150" alt=""/> </canvas> telling the user to use a different browser that supports canvas does not help users who can't read the canvas at all, for example.
Document.execCommand() - Web APIs
for example, insertimage requires the url of the image to insert.
... enableobjectresizing enables or disables the resize handles on images, tables, and absolutely-positioned elements and other resizable objects.
...(not supported by internet explorer.) insertimage inserts an image at the insertion point (deletes selection).
... requires a url string for the image's src as a value argument.
Document - Web APIs
WebAPIDocument
document.imagesread only returns a list of the images in the current document.
... document.mozsyntheticdocument returns a boolean that is true only if this document is synthetic, such as a standalone image, video, audio file, or the like.
... document.mozsetimageelement() allows you to change the element being used as the background image for a specified element id.
... load & unload events domcontentloaded fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
EXT_texture_compression_bptc - Web APIs
constants the compressed texture formats are exposed by 4 constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d().
...each 4x4 block of texels consists of 128 bits of rgba or image data.
...each 4x4 block of texels consists of 128 bits of srgb_alpha or image data.
... examples var ext = gl.getextension('ext_texture_compression_bptc'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgba_bptc_unorm_ext, 128, 128, 0, texturedata); specifications specification status ext_texture_compression_bptc community approved ...
HTMLCanvasElement.getContext() - Web APIs
"bitmaprenderer" which will create an imagebitmaprenderingcontext which only provides functionality to replace the content of the canvas with a given imagebitmap.
...if set to false, the browser now knows that the backdrop is always opaque, which can speed up drawing of transparent content and images.
...this will force the use of a software (instead of hardware accelerated) 2d canvas and can save memory when calling getimagedata() frequently.
... return value a renderingcontext which is either a canvasrenderingcontext2d for "2d", webglrenderingcontext for "webgl" and "experimental-webgl", webgl2renderingcontext for "webgl2" or imagebitmaprenderingcontext for "bitmaprenderer".
HTMLCanvasElement.mozFetchAsStream() - Web APIs
the htmlcanvaselement.mozfetchasstream() internal method used to create a new input stream that, when ready, would provide the contents of the canvas as image data.
... type optional a domstring indicating the image format.
... the default type is image/png.
...; } }; } var mfascallback = function(iconname) { return function(instream) { var file = fileutils.getfile('desk', [iconname + '.ico']); var outstream = fileutils.openfileoutputstream(file); cu.import('resource://gre/modules/netutil.jsm'); netutil.asynccopy(instream, outstream, netutilcallback()); } } canvas.mozfetchasstream(mfascallback('myicon'), 'image/vnd.microsoft.icon'); specifications not part of any specification.
LargestContentfulPaint - Web APIs
the largestcontentfulpaint interface of the largest contentful paint api provides details about the largest image or text paint before user input on a web page.
...may not be available if the element is a cross-origin image loaded without the timing-allow-origin header.
... largestcontentfulpaint.url if the element is an image, the request url of the image.
...(note: `rendertime` may not be available on // image elements loaded cross-origin without the `timing-allow-origin` header.) lcp = lastentry.rendertime || lastentry.loadtime; }); po.observe({type: 'largest-contentful-paint', buffered: true}); // send data to the server.
MediaStreamTrack.applyConstraints() - Web APIs
the advanced property further specifies that an image size of 1920 by 1280 is the preferred or an aspect ratio of 1.333 if that is not available.
...nst constraints = { width: {min: 640, ideal: 1280}, height: {min: 480, ideal: 720}, advanced: [ {width: 1920, height: 1280}, {aspectratio: 1.333} ] }; navigator.mediadevices.getusermedia({ video: true }) .then(mediastream => { const track = mediastream.getvideotracks()[0]; track.applyconstraints(constraints) .then(() => { // do something with the track such as using the image capture api.
... mediastream image capturethe definition of 'applyconstraints()' in that specification.
... working draft adds image constraints.
OffscreenCanvas.getContext() - Web APIs
"bitmaprenderer" creates a imagebitmaprenderingcontext which only provides functionality to replace the content of the canvas with a given imagebitmap.
...if set to false, the browser now knows that the backdrop is always opaque, which can speed up drawing of transparent content and images then.
...this will force the use of a software (instead of hardware accelerated) 2d canvas and can save memory when calling getimagedata() frequently.
... return value a renderingcontext which is either a canvasrenderingcontext2d for "2d", webglrenderingcontext for "webgl" and "experimental-webgl", webgl2renderingcontext for "webgl2" and "experimental-webgl2" , or imagebitmaprenderingcontext for "bitmaprenderer".
PaintWorklet - Web APIs
the paintworklet interface of the css painting api programmatically generates an image where a css property expects a file.
... paintworklet.registerpaint() registers a class programmatically generate an image where a css property expects a file.
... <style> textarea { background-image: url(checkerboard); background-image: paint(checkerboard); } </style> <textarea></textarea> you can also use the @supports at-rule.
... @supports (background: paint(id)) { background-image: paint(checkerboard); } specifications specification status comment css painting api level 1the definition of 'paintworkletglobalscope' in that specification.
WebGL2RenderingContext.framebufferTextureLayer() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image.
... texture a webgltexture object whose image to attach.
... level a glint specifying the mipmap level of the texture image to attach.
... layer a glint specifying the layer of the texture image to attach.
WebGLRenderingContext.activeTexture() - Web APIs
the value is a gl.texturei where i is within the range from 0 to gl.max_combined_texture_image_units - 1.
... exceptions if texture is not one of gl.texturei, where i is within the range from 0 to gl.max_combined_texture_image_units - 1, a gl.invalid_enum error is thrown.
... gl.activetexture(gl.texture1); the number of texture units is implementation dependent, you can get this number with the help of the max_combined_texture_image_units constant.
... gl.getparameter(gl.max_combined_texture_image_units); to get the active texture, query the active_texture constant.
WebGLRenderingContext.getRenderbufferParameter() - Web APIs
possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal format.
...possible values: gl.renderbuffer_width: returns a glint indicating the width of the image of the currently bound renderbuffer.
... gl.renderbuffer_height: returns a glint indicating the height of the image of the currently bound renderbuffer.
... when using a webgl 2 context, the following value is available additionally: gl.renderbuffer_samples: returns a glint indicating the number of samples of the image of the currently bound renderbuffer.
Animating textures in WebGL - Web APIs
using the video frames as a texture the next change is to inittexture(), which becomes much simpler, since it no longer needs to load an image file.
... const level = 0; const internalformat = gl.rgba; const width = 1; const height = 1; const border = 0; const srcformat = gl.rgba; const srctype = gl.unsigned_byte; const pixel = new uint8array([0, 0, 255, 255]); // opaque blue gl.teximage2d(gl.texture_2d, level, internalformat, width, height, border, srcformat, srctype, pixel); // turn off mips and set wrapping to clamp to edge so it // will work regardless of the dimensions of the video.
...e); gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.linear); return texture; } here's what the updatetexture() function looks like; this is where the real work is done: function updatetexture(gl, texture, video) { const level = 0; const internalformat = gl.rgba; const srcformat = gl.rgba; const srctype = gl.unsigned_byte; gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, level, internalformat, srcformat, srctype, video); } you've seen this code before.
... it's nearly identical to the image onload function in the previous example — except when we call teximage2d(), instead of passing an image object, we pass in the <video> element.
WebXR Device API - Web APIs
webxr is a group of standards which are used together to support rendering 3d scenes to hardware designed for presenting virtual worlds (virtual reality, or vr), or for adding graphical imagery to the real world, (augmented reality, or ar).
... webxr-compatible devices include fully-immersive 3d headsets with motion and orientation tracking, eyeglasses which overlay graphics atop the real world scene passing through the frames, and handheld mobile phones which augment reality by capturing the world with a camera and augment that scene with computer-generated imagery.
...each of these two images is rendered into a single framebuffer, with the left eye's rendered image on the left and the right eye's viewpoint rendered into the right half of the buffer.
... xrrenderstate provides a set of configurable properties which change how the imagery output by an xrsession is composited.
WindowOrWorkerGlobalScope.fetch() - Web APIs
since we are fetching an image, we run body.blob() on the response to give it the proper mime type so it will be handled properly, then create an object url of it and display it in an <img> element.
... const myimage = document.queryselector('img'); let myrequest = new request('flowers.jpg'); fetch(myrequest) .then(function(response) { if (!response.ok) { throw new error(`http error!
... status: ${response.status}`); } return response.blob(); }) .then(function(response) { let objecturl = url.createobjecturl(response); myimage.src = objecturl; }); in the fetch with init then request example (see fetch request init live), we do the same thing except that we pass in an init object when we invoke fetch(): const myimage = document.queryselector('img'); let myheaders = new headers(); myheaders.append('content-type', 'image/jpeg'); const myinit = { method: 'get', headers: myheaders, mode: 'cors', cache: 'default' }; let myrequest = new request('flowers.jpg'); fetch(myrequest, myinit).then(function(response) { // ...
... const myinit = { method: 'get', headers: { 'content-type': 'image/jpeg' }, mode: 'cors', cache: 'default' }; let myrequest = new request('flowers.jpg', myinit); specifications specification status comment fetchthe definition of 'fetch()' in that specification.
XREnvironmentBlendMode - Web APIs
values opaque the rendered image is drawn without allowing any pass-through imagery.
...the alpha values specified in the xrsession's renderstate property's baselayer field are ignored since the alpha values for the rendered imagery are all treated as being 1.0 (fully opaque).
...all the device can do is add more light to the image; it can't make things get darker.
...since the real world is being digitally presented, the brightness of each pixel can be controlled, whether it's reality or the rendered xr image, the user's environment can be blended with the virtual environment with each pixel having its color and brightness precisely controlled.
XRSession - Web APIs
WebAPIXRSession
with xrsession methods, you can poll the viewer's position and orientation (the xrviewerpose), gather information about the user's environment, and present imagery to the user.
... environmentblendmode read only returns this session's blend mode which denotes how much of the real-world environment is visible through the xr device and how the device will blend the device imagery with it.
... renderstate read only an xrrenderstate object which contains options affecting how the imagery is rendered.
... visibilitystate read only a domstring whose value is one of those found in the xrvisibilitystate enumerated type, indicating whether or not the session's imagery is visible to the user, and if so, if it's being visible but not currently the target for user events.
WAI-ARIA Roles - Accessibility
a figure is generally considered to be one or more images, code snippets, or other content that puts across information in a different way to a regular flow of text.aria: form rolethe form landmark role can be used to identify a group of elements on a page that provide equivalent functionality to an html form.aria: grid rolethe grid role is for a widget that contains one or more rows of cells.
...to give the page more structure, a level should also be provided to indicate relationships between sections.aria: img rolethe aria img role can be used to identify multiple elements inside page content that should be considered as a single image.
... these elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner.aria: list rolethe aria list role can be used to identify a list of items.
... it is normally used in conjunction with the listitem role, which is used to identify a list item contained inside the list.aria: listbox rolethe listbox role is used for lists from which a user may select one or more items which are static and, unlike html <select> elements, may contain images.aria: listitem rolethe aria listitem role can be used to identify an item inside a list of items.
-webkit-mask-attachment - CSS: Cascading Style Sheets
if a -webkit-mask-image is specified, -webkit-mask-attachment determines whether the mask image's position is fixed within the viewport, or scrolls along with its containing block.
... values */ -webkit-mask-attachment: scroll; -webkit-mask-attachment: fixed; -webkit-mask-attachment: local; /* multiple values */ -webkit-mask-attachment: scroll, local; -webkit-mask-attachment: fixed, local, scroll; /* global values */ -webkit-mask-attachment: inherit; -webkit-mask-attachment: initial; -webkit-mask-attachment: unset; syntax values scroll if scroll is specified, the mask image scrolls within the viewport along with the block that contains the mask image.
... fixed if fixed is specified, the mask image does not scroll with its containing element, instead remaining stationary within the viewport.
... formal definition initial valuescrollapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <attachment>#where <attachment> = scroll | fixed | local examples fixing a mask image to the viewport body { -webkit-mask-image: url('images/mask.png'); -webkit-mask-attachment: fixed; } specifications not part of any standard.
-webkit-mask-position-x - CSS: Cascading Style Sheets
the -webkit-mask-position-x css property sets the initial horizontal position of a mask image.
...obal values */ -webkit-mask-position-x: inherit; -webkit-mask-position-x: initial; -webkit-mask-position-x: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete syntax values <length-percentage> a length indicating the position of the left edge of the image relative to the box's left padding edge.
...that means, a value of 0% means the left edge of the image is aligned with the box's left padding edge and a value of 100% means the right edge of the image is aligned with the box's right padding edge.
... formal definition initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete formal syntax [ <length-percentage> | left | center | right ]#where <length-percentage> = <length> | <percentage> examples horizontally positioning a mask image .exampleone { -webkit-mask-image: url(mask.png); -webkit-mask-position-x: right; } .exampletwo { -webkit-mask-image: url(mask.png); -webkit-mask-position-x: 25%; } specifications not part of any standard.
-webkit-mask-position-y - CSS: Cascading Style Sheets
the -webkit-mask-position-y css property sets the initial vertical position of a mask image.
...lobal values */ -webkit-mask-position-y: inherit; -webkit-mask-position-y: initial; -webkit-mask-position-y: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete syntax values <length-percentage> a length indicating the position of the top side of the image relative to the box's top padding edge.
...a value of 0% means the top edge of the image is aligned with the box's top padding edge and a value of 100% means the bottom edge of the image is aligned with the box's bottom padding edge.
... formal definition initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete formal syntax [ <length-percentage> | top | center | bottom ]#where <length-percentage> = <length> | <percentage> examples vertically positioning a mask image .exampleone { -webkit-mask-image: url(mask.png); -webkit-mask-position-y: bottom; } .exampletwo { -webkit-mask-image: url(mask.png); -webkit-mask-position-y: 25%; } specifications not part of any standard.
Shorthand properties - CSS: Cascading Style Sheets
for instance, the css background property is a shorthand property that's able to define the values of background-color, background-image, background-repeat, and background-position.
...therefore: background-color: red; background: url(images/bg.gif) no-repeat left top; will not set the color of the background to red but to background-color's default, transparent, as the second rule has precedence.
... background-color: #000; background-image: url(images/bg.gif); background-repeat: no-repeat; background-position: left top; ...
... can be shortened to just one declaration: background: #000 url(images/bg.gif) no-repeat left top; (the shorthand form is actually the equivalent of the longhand properties above plus background-attachment: scroll and, in css3, some additional properties.) see background for more detailed information, including css3 properties.
animation - CSS: Cascading Style Sheets
WebCSSanimation
<div class="animation a3"></div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box; } pre { margin-bottom: 0; } svg { width: 1.5em; height: 1.5em; } button { width: 27px; height: 27px; background-size: 16px; background-position: center; background-repeat: no-repeat; border-radius: 3px; cursor: pointer; } button.play { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l...
...11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#play'); } button.pause { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%2...
...0l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#pause'); } button.restart { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#restart'); } .grid ...
... jump-both | start | end examples cylon eye <div class="view_port"> <div class="polling_message"> listening for dispatches </div> <div class="cylon_eye"></div> </div> .polling_message { color: white; float: left; margin-right: 2%; } .view_port { background-color: black; height: 25px; width: 100%; overflow: hidden; } .cylon_eye { background-color: red; background-image: linear-gradient(to right, rgba(0, 0, 0, .9) 25%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .9) 75%); color: white; height: 100%; width: 20%; -webkit-animation: 4s linear 0s infinite alternate move_eye; animation: 4s linear 0s infinite alternate move_eye; } @-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; } } @keyframes mo...
background-attachment - CSS: Cascading Style Sheets
the background-attachment css property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.
...</p> css p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); background-attachment: fixed; } result multiple background images this property supports multiple background images.
...each image is matched with the corresponding attachment type, from first specified to last.
...</p> css p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'background-attachment' in that ...
list-style - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: list-style-image list-style-position list-style-type syntax /* type */ list-style: square; /* image */ list-style: url('../img/shape.png'); /* position */ list-style: inside; /* type | position */ list-style: georgian inside; /* type | image | position */ list-style: lower-roman url('../img/shape.png') outside; /* keyword value */ list-style: none; /* global values */ list-style: inherit; list-style: i...
...if list-style-type and list-style-image are both set, then list-style-type is used as a fallback if the image is unavailable.
... list-style-image see list-style-image.
... ul { list-style: none; } ul li::before { content: "\200b"; } voiceover and list-style-type: none – unfettered thoughts mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.1 | w3c understanding wcag 2.0 formal definition initial valueas each of the properties of the shorthand:list-style-type: disclist-style-position: outsidelist-style-image: noneapplies tolist itemsinheritedyescomputed valueas each of the properties of the shorthand:list-style-image: none or the image with its uri made absolutelist-style-position: as specifiedlist-style-type: as specifiedanimation typediscrete formal syntax <'list-style-type'> | <'list-style-position'> | <'list-style-image'> examples setting list style type and position html list 1 <ul class="...
object-fit - CSS: Cascading Style Sheets
formal definition initial valuefillapplies toreplaced elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax fill | contain | cover | none | scale-down examples setting object-fit for an image html <section> <h2>object-fit: fill</h2> <img class="fill" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="fill narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <h2>object-fit: contain</h2> <img class="contain" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="co...
...} img { width: 150px; height: 100px; border: 1px solid #000; } .narrow { width: 100px; height: 150px; margin-top: 10px; } .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; } result specifications specification status comment css images module level 4the definition of 'object-fit' in that specification.
... working draft css images module level 3the definition of 'object-fit' in that specification.
... see also other image-related css properties: object-position, image-orientation, image-rendering, image-resolution.
paint() - CSS: Cascading Style Sheets
WebCSSpaint
the paint() css function defines an <image> value generated with a paintworklet.
...in this example, we passed two arguments: whether the background-image on a group of list items is filled or just has a stroke outline, and the width of that outline: <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> <li>item 10</li> <li>item 11</li> <li>item 12</li> <li>item 13</li> <li>item 14</li> <li>item 15</li> <li>item 16</li> <li>item 17</li> <li>item 18</li> <li>item 1...
...9</li> <li>item 20</li> </ul> css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/hilite.js'); li { --boxcolor: hsla(55, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 2px); } li:nth-of-type(3n) { --boxcolor: hsla(155, 90%, 60%, 1.0); background-image: paint(hollowhighlights, filled, 3px); } li:nth-of-type(3n+1) { --boxcolor: hsla(255, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 1px); } we've included a custom property in the selector block defining a boxcolor.
... no support nosamsung internet android full support 9.2legend full support full support no support no support see also paintworklet css painting api using the css painting api <image> canvas ...
repeating-radial-gradient() - CSS: Cascading Style Sheets
the repeating-radial-gradient() css function creates an image consisting of repeating gradients that radiate from an origin.
...the function's result is an object of the <gradient> data type, which is a special kind of <image>.
... because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used.
... specifications specification status comment css images module level 3the definition of 'repeating-radial-gradient()' in that specification.
Creating a cross-browser video player - Developer guides
x-shockwave-flash" data="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576"> <param name="movie" value="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <param name="allowfullscreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <img alt="tears of steel poster image" src="img/poster.jpg" width="1024" height="428" title="no video playback possible, please download the video from the link below" /> </object> <!-- offer download --> <a href="video/tears-of-steel-battle-clip-medium.mp4">download mp4</a...
... a poster image is defined for the video, and the preload attribute is set to metadata, which informs the browser that it should initially only attempt to load the metadata from the video file rather than the entire video file.
...most browsers interpret the presence of a poster attribute to mean that the specified image is to be displayed until the user chooses to play the video.
... ie9 will only use the specified poster image in this way if preload="none" is set; otherwise, it will take the first still of the video and display that instead.
Audio and Video Delivery - Developer guides
if the browser doesn't support playback of any of the provided formats natively, either present a still image or use a fallback technology to present the video.
... for further info see cross browser audio basics (html5 audio in detail) html video <video controls width="640" height="480" poster="initialimage.png" autoplay muted> <source src="videofile.mp4" type="video/mp4"> <!-- fallback for browsers that don't support mp4 --> <source src="videofile.webm" type="video/webm"> <!-- specifying subtitle files --> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="english"> <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="norwegian"> <!-- fallback for brow...
...sers that don't support video tag --> <a href="videofile.mp4">download video</a> </video> the code above creates a video player of dimensions 640x480 pixels, displaying a poster image until the video is played.
...then you can replace the video with its fallback content: <video controls> <source src="dynamicsearch.mp4" type="video/mp4"></source> <a href="dynamicsearch.mp4"> <img src="dynamicsearch.jpg" alt="dynamic app search in firefox os"> </a> <p>click image to play a video demo of dynamic app search</p> </video> var v = document.queryselector('video'), sources = v.queryselectorall('source'), lastsource = sources[sources.length-1]; lastsource.addeventlistener('error', function(ev) { var d = document.createelement('div'); d.innerhtml = v.innerhtml; v.parentnode.replacechild(d, v); }, false); audio/video javascript libraries a numbe...
Challenge solutions - Developer guides
solution the following values are reasonable approximations of the named colors: strong { color: #f00; /* red */ background-color: #ddf; /* pale blue */ font: 200% serif; } .carrot { color: #fa0; /* orange */ } .spinach { color: #080; /* dark green */ } p { color: #00f; /* blue */ } content add an image challenge add a one rule to your stylesheet so that it displays the image at the start of each line.
... solution the following rule achieves this effect: ul { border: 10px solid lightblue; width: 100px; } layout default image position fixed image position challenge change your sample document, doc2.html, adding this tag to it near the end, just before </body>: <img id="fixed-pin" src="yellow-pin.png" alt="yellow map pin"> predict where the image will appear in your document.
... solution the image appears to the right of the second list.
... challenge add a rule to your stylesheet that places the image in the top right of your document.
Graphics on the Web - Developer guides
websites and applications often need to present graphics, such as images.
... static images can easily be displayed using the <img> element, or by setting the background of html elements using the background-image property.
... you can also construct graphics on-the-fly, or manipulate images after the fact.
...with vectors, you can create images that scale cleanly to any size.
A hybrid approach - Developer guides
for example, an often-criticized point about responsive web design is that full-resolution images are sent to all devices, including phones that show the images scaled down anyway.
... one such technique for dealing with this issue uses server-side user-agent detection along with the wurfl device capability library to send a properly sized image for the user’s device.
...but even if it does not work, it is no worse with respect to performance than only using fluid images.
... future plans include exploring serving images based on user-agent.
<link>: The External Resource Link element - HTML: Hypertext Markup Language
WebHTMLElementlink
for example, a link to the site's favicon: <link rel="icon" href="favicon.ico"> there are a number of other icon rel values, mainly used to indicate special icon types for use on various mobile platforms, e.g.: <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png"> the sizes attribute indicates the icon size, while the type contains the mime type of the resource being linked.
... font css @font-face image <img> and <picture> elements with srcset or imageset attributes, svg <image> elements, css *-image rules object <object> elements script <script> elements, worker importscripts style <link rel=stylesheet> elements, css @import track <track> elements video <video> elements worker worker, sharedworke...
...cors-enabled images can be reused in the <canvas> element without being tainted.
...it may have the following values: any, meaning that the icon can be scaled to any size as it is in a vector format, like image/svg+xml.
HTML: Hypertext Markup Language
WebHTML
html uses "markup" to annotate text, images, and other content for display in a web browser.
... multimedia and embedding this module explores how to use html to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.
... use html to solve common problems provides links to sections of content explaining how to use html to solve very common problems when creating a web page: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.
... advanced topics cors enabled image the crossorigin attribute, in combination with an appropriate cors header, allows images defined by the <img> element to be loaded from foreign origins and used in a <canvas> element as if they were being loaded from the current origin.
Compression in HTTP - HTTP
for images, gif or png are using loss-less compression.
... video formats on the web are lossy; the jpeg image format is also lossy.
...for images, an image generated by a tool could be not optimized enough for the web; it is recommended to use tools that will compress as much as possible with the required quality.
... as compression brings significant performance improvements, it is recommended to activate it for all files, but already compressed ones like images, audio files and videos.
Accept - HTTP
WebHTTPHeadersAccept
browsers set adequate values for this header depending on the context where the request is done: when fetching a css stylesheet a different value is set for the request than when fetching an image, video or a script.
... syntax accept: <mime_type>/<mime_subtype> accept: <mime_type>/* accept: */* // multiple types, weighted with the quality value syntax: accept: text/html, application/xhtml+xml, application/xml;q=0.9, image/webp, */*;q=0.8 directives <mime_type>/<mime_subtype> a single, precise mime type, like text/html.
...image/* will match image/png, image/svg, image/gif and any other image types.
... examples accept: text/html accept: image/* // general default accept: */* // default for navigation requests accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8 specifications specification title rfc 7231, section 5.3.2: accept hypertext transfer protocol (http/1.1): semantics and context ...
HTTP headers - HTTP
WebHTTPHeaders
content-dpr a number that indicates the ratio between physical pixels over css pixels of the selected image response.
...intrinsic size of an image).
...it is a structured header whose value is a token with possible values audio, audioworklet, document, embed, empty, font, image, manifest, object, paintworklet, report, script, serviceworker, sharedworker, style, track, video, worker, xslt, and nested-document.
... x-dns-prefetch-control controls dns prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as urls for items referenced by the document, including images, css, javascript, and so forth.
Web media technologies
this includes using local cameras and microphones to capture video, audio, and still images.
... guide to media types and formats on the web a guide to the file types and codecs available for images, audio, and video media on the web.
... the canvas api the canvas api lets you draw into an <canvas>, manipulating and changing the contents of an image.
...through a canvas, this can be used to add 3d imagery to media content.
Mobile first - Progressive web apps (PWAs)
the second one sets the width of the content at 600px and centers it in the space available, then adds in a gradient and a nice background image for the wider layout.
... this is a key point - the background image is 126kb, and not ideal for narrow layouts.
... having it included in the "600 pixels or wider" media query means that narrow screen devices won't read that media query, so they will not waste their time and bandwidth downloading that image.
...for example, the modernizr in our example app is testing for multiple background image and rgba support.
in2 - SVG: Scalable Vector Graphics
WebSVGAttributein2
feblend for <feblend>, in2 defines the second input image to the blending operation.
... value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive animatable yes fecomposite for <fecomposite>, in2 defines the second input image to the compositing operation.
... value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive animatable yes fedisplacementmap for <fedisplacementmap>, in2 defines the second input image, which is used to displace the pixels in the image defined in the in attribute.
... value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive animatable yes specifications specification status comment filter effects module level 1the definition of 'in2 for <fedisplacementmap>' in that specification.
preserveAspectRatio - SVG: Scalable Vector Graphics
because the aspect ratio of an svg image is defined by the viewbox attribute, if this attribute isn't set, the preserveaspectratio attribute has no effect (with one exception, the <image> element, as described below).
... elements seven elements are using this attribute: <svg>, <symbol>, <image>, <feimage>, <marker>, <pattern>, and <view>.
... feimage for <feimage>, preserveaspectratio defines how the referenced image should fit in the rectangle define by the <feimage> element.
... default value xmidymid meet animatable yes image for <image>, preserveaspectratio defines how the referenced image should fit in the rectangle define by the <image> element.
<feDiffuseLighting> - SVG: Scalable Vector Graphics
the <fediffuselighting> svg filter primitive lights an image using the alpha channel as a bump map.
... the resulting image, which is an rgba opaque image, depends on the light color, light position and surface geometry of the input bump map.
... the light map produced by this filter primitive can be combined with a texture image using the multiply term of the arithmetic operator of the <fecomposite> filter primitive.
... multiple light sources can be simulated by adding several of these light maps together before applying it to the texture image.
<feSpecularLighting> - SVG: Scalable Vector Graphics
the resulting image is an rgba image based on the light color.
...the resulting image depends on the light color, light position and surface geometry of the input bump map.
... this filter primitive produces an image which contains the specular reflection part of the lighting calculation.
...multiple light sources can be simulated by adding several of these light maps before applying it to the texture image.
SVG element reference - SVG: Scalable Vector Graphics
WebSVGElement
« svg / svg attribute reference » svg drawings and images are created using a wide array of elements which are dedicated to the construction, drawing, and layout of vector images and diagrams.
... a <a> <animate> <animatemotion> <animatetransform> c <circle> <clippath> <color-profile> d <defs> <desc> <discard> e <ellipse> f <feblend> <fecolormatrix> <fecomponenttransfer> <fecomposite> <feconvolvematrix> <fediffuselighting> <fedisplacementmap> <fedistantlight> <fedropshadow> <feflood> <fefunca> <fefuncb> <fefuncg> <fefuncr> <fegaussianblur> <feimage> <femerge> <femergenode> <femorphology> <feoffset> <fepointlight> <fespecularlighting> <fespotlight> <fetile> <feturbulence> <filter> <foreignobject> g <g> h <hatch> <hatchpath> i <image> l <line> <lineargradient> m <marker> <mask> <mesh> <meshgradient> <meshpatch> <meshrow> <metadata> <mpath> p <path> <pattern> <polygon> <polyline> r <rad...
... <a>, <defs>, <g>, <marker>, <mask>, <missing-glyph>, <pattern>, <svg>, <switch>, <symbol>, <unknown> descriptive elements <desc>, <metadata>, <title> filter primitive elements <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>,<fefunca>, <fefuncb>, <fefuncg>, <fefuncr>,<fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence> font elements <font>, <font-face>, <font-face-format>, <font-face-name>, <font-face-src>, <font-face-uri>, <hkern>, <vkern> gradient elements <lineargradient>, <meshgradient>, <radialgradient>, <stop> graphics elements <circle>, <ellipse>, <image>, <line>, <mesh>, <path>, <polygon>, <polyl...
...ht>, <fepointlight>, <fespotlight> never-rendered elements <clippath>, <defs>, <hatch>, <lineargradient>, <marker>, <mask>, <meshgradient>, <metadata>, <pattern>, <radialgradient>, <script>, <style>, <symbol>, <title> paint server elements <hatch>, <lineargradient>, <meshgradient>, <pattern>, <radialgradient>, <solidcolor> renderable elements <a>, <circle>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <unknown>, <use> shape elements <circle>, <ellipse>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect> structural elements <defs>, <g>, <svg>, <symbol>, <use> text content elements <altglyph>, <altglyphdef>, <altglyphitem>, <glyph>, <glyphref>, <textpath>, <text>, <tref>, <ts...
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
indexed property for list interfaces implementation status unknown <script> element in content model of all elements implementation status unknown initialize(), appenditem(), replaceitem(), and insertitembefore() on list objects making a copy of any list item being inserted that is already in another list implementation status unknown crossorigin attribute for <image> and <script> elements not implemented yet (at least for <image>; bug 1240357) rendering model change notes svg root and <foreignobject> not overflow:hidden in ua style sheet implementation status unknown allow overflow: auto; to clip and show scroll bars implementation status unknown allow overflow: scroll; to show scroll bars on <svg> ...
...ent to svggeometryelement implemented (bug 1239100) document structure change notes svgsvgelement.suspendredraw(), svgsvgelement.unsuspendredraw(), and svgsvgelement.unsuspendredrawall() deprecated turned into no-ops (bug 734079) externalresourcesrequired attribute removed implementation status unknown auto value for width and height in <image> implementation status unknown referencing entire document with <use> implementation status unknown lang attribute on <desc> and <title> implemented (bug 721920) css transforms on outermost <svg> not affecting svgsvgelement.currentscale or svgsvgelement.currenttranslate implementation status unknown rootelement attribute deprecated implementation...
...known defer keyword removed from preserveaspectratio attribute removed (bug 1280425) added non-scaling-size, non-rotation and fixed-position keywords for vector-effect property not implemented yet (bug 1318208) vector-effect has no effect within 3d rendering context implementation status unknown consider clip and overflow on svg document referenced by <image> implementation status unknown paths change notes b and b path commands implementation status unknown z and z path commands to add path coordinate data to previous command implementation status unknown not render <path>, <polygon> and <polyline> with no data implementation status unknown svgpathseg*, svganimatedpathdata and r...
... of zero-length subpaths depends on stroke-linecap attribute implementation status unknown markers on all shapes implementation status unknown <marker> element display defined in ua style sheet implementation status unknown only single paints for fills and strokes implementation status unknown color change notes color managed images implementation status unknown rgba, hsl, lab, icc named colors and device colors implementation status unknown color-profile removed implementation status unknown <color-profile> removed implementation status unknown paint servers change notes <solidcolor> (renamed solidcolor) not implemented (bug 1177032) fr att...
package.json - Archive of obsolete content
icon the path to an image file containing the icon for the add-on.
...(if you test this, please add the result here.) this can also be an object with the image size as key and the (absolute) location of the image as value.
... the path to an image containing the large icon for the add-on.
Downloading Files - Archive of obsolete content
downloading images sample function for fetching an image file from a url.
... // this function is for fetching an image file from a url.
... function getimagefromurl(url) { var ioserv = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var channel = ioserv.newchannel(url, 0, null); var stream = channel.open(); if (channel instanceof components.interfaces.nsihttpchannel && channel.responsestatus != 200) { return ""; } var bstream = components.classes["@mozilla.org/binaryinputstream;1"] .createinstance(components.interfaces.nsibinaryinputstream); bstream.setinputstream(stream); var size = 0; var file_data = ""; while(size = bstream.available()) { file_data += b...
SVG General - Archive of obsolete content
hopefully, enough to get you creating some svg images.
...svg image also requires the use of xlink for the href attribute, which can be tricky to remember, especially when you're mixing svg with html or xul.
...here are some examples of using it: var circle = makesvg("circle", {id: "circle1", cx: "60", cy: "60", r: "50"}); var img = makesvg("image", {id: "img1", x: "110", y: "110", width: "100", height: "100", svghref: "bubbles.png"}); var text = makesvg("text", {id: "text1", x: "60", y: "60"}); text.textcontent = "hello world"; ...
How to convert an overlay extension to restartless - Archive of obsolete content
the big culprits are jsm files and locale files (namely property files), though in some situations this is true for dynamically loaded image files too.
...ndow(unloadfromwindow); services.wm.removelistener(windowlistener); mymodule.shutdown(); // do whatever shutdown stuff you need to do on addon disable components.utils.unload("chrome://myaddon/content/mymodule.jsm"); // same url as above // hack warning: the addon manager does not properly clear all addon related caches on update; // in order to fully update images and locales, their caches need clearing here services.obs.notifyobservers(null, "chrome-flush-caches", null); } function install(data,reason) { } function uninstall(data,reason) { } function loadintowindow(window) { /* call/move your ui construction function here */ } function unloadfromwindow(window) { /* call/move your ui tear down function here */ } function foreachopenwindow(todo) // ap...
...as mentioned in the previous section, you'll need to clear the chrome caches on add-on shutdown, namely for chrome images and properties files.
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
the skin package this is used to include source files used as visual elements in the gui, including style sheets and images.
...lines 1–3 define the icon image to use with full-sized icons, and lines 4–6 define the icon image to use when small toolbar icons have been selected.
... listing 12: content for overlay.css #helloworldbutton { list-style-image: url(chrome://helloworld/skin/icon.png); } toolbar[iconsize="small"] #helloworldbutton { list-style-image: url(chrome://helloworld/skin/icon-small.png); } operations check since we have edited the chrome manifest, as we did in phase 3, we need to relaunch firefox.
Signing an XPI - Archive of obsolete content
image obtaining a valid software developer code-signing certificate warning: currently firefox expects xpi files to be signed with certificates that conform to the older object signing convention, rather than the newer code signing convention.
...i have hi-resolution scanned images of my passport and drivers license for these situations so i placed them on my web-server temporarily in a hidden location and emailed unizeto certum with the details and location of the files.
... within a few hours i received a confirmation email from a human accepting the id images and giving me a hyperlink to the certifcate download area.
Search Extension Tutorial (Draft) - Archive of obsolete content
cu.import("resource://gre/modules/services.jsm"); // the details of the engine to add const engine_details = { name: "example engine", iconurl: "data:image/png;base64,...", alias: "example-engine", description: "an example search engine", method: "get", // the http request method url: "https://www.example.com/?q=_searchterms_" }; // keep track of whether this is the first run.
...search.xml <?xml version="1.0" encoding="utf-8"?> <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>example engine</shortname> <description>example search engine</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16" type="image/png">data:image/png;base64, ...
... </image> <url type="application/x-suggestions+json" template="https://api.example.com/suggestions"> <param name="q" value="{searchterms}"/> </url> <url type="text/html" method="get" template="https://www.example.com/search"> <param name="q" value="{searchterms}"/> <param name="source" value="search-box"/> </url> <url type="application/x-moz-keywordsearch" method="get" template="https://www.example.com/search"> <param name="q" value="{searchterms}"/> <param name="source" value="keyword"/> </url> <searchform>https://www.example.com/search</searchform> </searchplugin> bootstrap.js const { classes: cc, interfaces: ci, utils: cu, results: cr } = components; // import the services module.
List of Mozilla-Based Applications - Archive of obsolete content
font management tool firecast digital signage and interactive kiosk tools also used in firecast easystart mozilla firefox web browser web browser usage stats from global stats fossamail email client for windows platform, based on mozilla thunderbird developed by moonchild productions, creator of the pale moon web browser flickr uploadr image upload tool see flickr uploadr: open source and powered by xulrunner foxkeh clock clock frizione javascript development, testing and deployment environment uses mozilla rhino geckofx embeddable gecko gjs javascript bindings for gnome globalmojo browser that raises money for your favorite causes gluescript ...
... this is separate from the javascript library jslib) joybidder ebay auction tool standalone version uses xulrunner just (fr) audio a tool for setting temporal tags in audio documents jsdoc toolkit documentation tool uses mozilla rhino k-meleon gecko-based web browser for windows embeds gecko in mfc kairo.at mandelbrot creates images of mandelbrot sets xulrunner application kazehakase gecko-based web browser for unix kirix strata data browser kiwix offline version of wikipedia kneemail prayer, praise, and journal application komodo and komodo edit and open komodo development tools mozilla-based application (pre-xulrunner style), xul ui ...
...ymous web browser xbusiness create and send branded invoices, quotes or estimates xdf billing and quotes software xiphos bible study software xmldbeditor database editor xpud linux desktop xpud: linux with an xul interface, 10 second boot time xrap xulrunner application packager xul daim image tool xul explorer development tool xulrunner application xuljet javascript framework uses xulrunner xulmine game standalone version yahoo!
Source code directories overview - Archive of obsolete content
it can be used to draw rectangles, lines, images, etc.
... ipc contains jpeg contains c code for reading/writing jpeg images.
...it contains code for handling various image formats (e.g.
Mozilla Application Framework in Detail - Archive of obsolete content
themes are simply collections of images and css which can augment or replace your current ui elements.
...you could easily create xml elements such as <chessboard> or <chesspiece> and via xbl map these to images and application logic.
...supported standards and features include data transport protocols, multilingual character data, image data, java and plugins.
checkbox.src - Archive of obsolete content
« xul reference home src type: uri set this to an uri pointing to an image to appear in the checkbox.
... if this attribute is left out, no image appears.
... you can have both an image and a label.
mousethrough - Archive of obsolete content
in the following example, the image appears above the button, yet the mousethrough attribute specified on the image causes mouse events to be ignored on the image and instead fall through to the button.
... if the mousethrough attribute was not used, the image would receive all mouse events and the button could not be pressed with the mouse.
... <stack> <button label="below"/> <image src="happy.png" mousethrough="always"/> </stack> ...
treecell.src - Archive of obsolete content
« xul reference home src type: uri set this to the uri of an image to appear in the tree cell.
... if this attribute is left out, no image appears.
... you can have both an image and a label.
appendNotification - Archive of obsolete content
« xul reference home appendnotification( label , value , image , priority , buttons, eventcallback ) return type: element create a new notification and display it.
... value - value used to identify the notification image - url of image to appear on the notification.
... popup: null }; buttons.push(button2); //appendnotification( label , value , image (url) , priority , buttons, eventcallback ) notifybox.appendnotification("my notification text", "test notification unique id", "chrome://browser/content/aboutrobots-icon.png", notifybox.priority_info_high, buttons, testnotificationcallback); } ...
statusbarpanel-iconic-text - Archive of obsolete content
« xul reference home statusbarpanel-iconic-text use this class to have an image appear on the statusbarpanel as well as a text label.
... specify the image using the src attribute.
...the image will appear before the label.
statusbarpanel-iconic - Archive of obsolete content
« xul reference home statusbarpanel-iconic use this class to have an image appear on the statusbarpanel.
... specify the image using the src attribute.
... the image will appear instead of the label.
statusbarpanel-menu-iconic - Archive of obsolete content
« xul reference home statusbarpanel-menu-iconic use this class to have an image appear on the statusbarpanel, and also allow a popup menu.
... specify the image using the src attribute, and place a menupopup element inside the statusbarpanel.
... the image will appear instead of the label.
Bindings - Archive of obsolete content
<rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg" dc:title="palace from above"/> dc:description="view from the top of the tower looking east of the doges palace"/> if you try a full example based on this data, you will notice that only one result has been generated.
...(?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg, ?title = 'palace from above') (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg, ?title = 'canal') (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg, ?title = 'obelisk') the second triple will add a ?description for the first photo, adding a fourth variable-value pair to the existing data.
...(?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg, ?title = 'palace from above', ?description = 'view from the top of the tower looking east of the doges palace') thus, only one match exists, so only one set of content is generated.
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
let button = doc.createelement("toolbarbutton"); button.setattribute("id", button_id); button.setattribute("label", "replace bookmark"); button.setattribute("class", "toolbarbutton-1 chromeclass-toolbar-additional"); button.setattribute("tooltiptext", "replace an existing bookmark"); button.style.liststyleimage = "url(" + icon + ")"; button.addeventlistener("command", main.action, false); toolbox.palette.appendchild(button); this code is thanks to dgutov and is seen in full context at his repository here at github: dgutov / bmreplace / bootstrap.js.
...to attach an image to the button we use standard mozilla skinning facilities.
...the dimensions of the icons in various applications for both modes are summarized in the following table (feel free to add information about other applications): application (theme name) big icon size small icon size firefox 1.0 (winstripe) 24x24 16x16 thunderbird 1.0 (qute) 24x24 16x16 the stylesheet to set the image for your toolbar button, use the following css rules: /* skin/toolbar-button.css */ #myextension-button { list-style-image: url("chrome://myextension/skin/btn_large.png"); } toolbar[iconsize="small"] #myextension-button { list-style-image: url("chrome://myextension/skin/btn_small.png"); } applying the stylesheet remember to attach the stylesheet you created to both the overlay file a...
Skinning XUL Files by Hand - Archive of obsolete content
in xul, skins are created with cascading style sheets and images.
...to keep your xul looking consistent and to avoid breaking skins altogether (when your styles have some dependency on a part of the global skin that changes, such as an image), use the style rules in the global skin by importing it into your stylesheet with the following instruction: @import url("chrome://global/skin/"); refer to the document writing skinnable xul and css for guidelines on how to make your skins friendly to the global skin, to xul, and to mozilla.
... here is a very short (but complete!) cascading stylesheet that might be referenced and used by a xul file: toolbar.nav-bar { background-image: url("chrome://navigator/skin/navbar-bg.gif"); padding: 0px; padding-bottom: 2px; } box#navbar { background-color: lightblue; } a:link { color: #fa8072; } this stylesheet exhibits three of the different types of style definitions described above.
Splitters - Archive of obsolete content
this image shows the 4 panels with the splitter in a collapsed state.
... this image shows the 4 panels with the splitter resized to the right.
...as the images below show, when the grippy is clicked, the iframe is collapsed and the buttons shuffle up.
Styling a Tree - Archive of obsolete content
::-moz-tree-image: the image for a cell.
... you can set the image with the list-style-image property.
... ::-moz-tree-checkbox: the image to use for checkbox columns.
The Box Model - Archive of obsolete content
you can see in the image that each label and textbox is oriented horizontally.
... aligning textboxes if you look closely at the image of the login dialog, you can see that the two textboxes are not aligned with each other horizontally.
...as you see in the image below, the label and text input are placed side by side.
Trees - Archive of obsolete content
ArchiveMozillaXULTutorialTrees
however, listboxes may contain any type of content, whereas trees may only contain text and images.
... in fact, apart from some tree specific attributes, the only attributes that will have any effect will be the label attribute to set a text label for a cell and the src attribute to set an image.
...="2"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joe@somewhere.com"/> <treecell label="top secret plans"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="mel@whereever.com"/> <treecell label="let's do lunch"/> </treerow> </treeitem> </treechildren> </tree> as can be seen in the image, the tree has been created with two rows of data.
XBL Attribute Inheritance - Archive of obsolete content
here is another example: xul: <box class="okcancel" oktitle="ok" canceltitle="cancel" image="happy.png"/> css: box.okcancel { -moz-binding: url('chrome://example/skin/example.xml#okcancel'); } xbl: <binding id="okcancel"> <content> <xul:button xbl:inherits="label=oktitle,image"/> <xul:button xbl:inherits="label=canceltitle"/> </content> </binding> the value of the oktitle attribute is mapped to the label attribute of the first button.
...the first button also inherits the image attribute.
... the result is as follows: <box class="okcancel" oktitle="ok" canceltitle="cancel" image="happy.png"> <button label="ok" image="happy.png"/> <button label="cancel"/> </box> note that the attributes are duplicated on the inner (anonymous) content.
XUL Reference - Archive of obsolete content
« xul reference « alphabetical list of all xul elements action arrowscrollbox assign bbox binding bindings box broadcaster broadcasterset button browser checkbox caption clicktoscroll colorpicker column columns commandset command conditions content datepicker deck description dialog dialogheader dropmarker editor grid grippy groupbox hbox iframe image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale scrip...
... wizard wizardpage categorical list of all xul elements « xul reference « windows window wizard wizardpage titlebar window structure --- menus and popups --- toolbars toolbar toolbarbutton toolbargrippy toolbaritem toolbarpallete toolbarseperator toolbarspring tabs and grouping tab tabbox tabpanel tabpanels tabs controls --- text and images label caption image lists --- trees --- layout --- templates --- scripting --- helper elements other xul lists dialog overlay page window wizard wizardpage preference preferences prefpane prefwindow browser tabbrowser editor iframe titlebar resizer statusbar statusbarpanel dialogheader notification notificationbox menubar m...
...toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button checkbox colorpicker datepicker menulist progressmeter radio radiogroup scale splitter textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker description label image listbox listitem listcell listcol listcols listhead listheader richlistbox richlistitem tree treecell treechildren treecol treecols treeitem treerow treeseparator box hbox vbox bbox deck stack grid columns column rows row scrollbox action assign binding bindings conditions content member param query queryset rule template textnode triple where script ...
checkbox - Archive of obsolete content
src type: uri set this to an uri pointing to an image to appear in the checkbox.
... if this attribute is left out, no image appears.
... you can have both an image and a label.
menu - Archive of obsolete content
ArchiveMozillaXULmenu
attributes acceltext, accesskey, allowevents, command, crop, disabled, image, label, menuactive, open, sizetopopup, tabindex, value properties accessibletype, accesskey, command, control, crop, disabled, image, itemcount, label, labelelement, menupopup, open, parentcontainer, selected, tabindex, value methods appenditem, getindexofitem, getitematindex, insertitemat, removeitemat style classes menu-iconic example <menubar id="sample-menubar"> <menu id="fil...
... style classes menu-iconic use this class to have an image appear on the menu.
... specify the image using the image attribute.
panel - Archive of obsolete content
ArchiveMozillaXULpanel
<panel id="thepanel"> <hbox align="start"> <image src="warning.png"/> <vbox> <description value="you have 6 new messages."/> <hbox> <button label="read mail"/> <button label="new message"/> </hbox> </vbox> </hbox> </panel> <description value="6 new messages" popup="thepanel"/> attributes backdrag type: boolean setting the backdrag attribute on a xul panel lets the user move the panel by clickin...
... in this image, the panel has flip="slide" and has a width which is greater than the distance from the anchor to the right of the screen (or window), so the panel extends past the left of the anchor, and the arrow slides towards the middle of the panel such that it is still aligned with the anchor.
... drag specify this for a panel that's being used as a drag image for a drag and drop operation.
treecell - Archive of obsolete content
src type: uri set this to the uri of an image to appear in the tree cell.
... if this attribute is left out, no image appears.
... you can have both an image and a label.
Windows and menus in XULRunner - Archive of obsolete content
we can add images to the toolbar buttons through the css file.
... we could hard-code the images in the xul file itself, but css is a better practice.
... here’s the css file: /* global skin --------------------------------------------------- */ @import url(chrome://global/skin/); /* toolbar ------------------------------------------------------- */ #open { list-style-image: url(chrome://basicapp/skin/open.png); -moz-box-orient: vertical; } #save { list-style-image: url(chrome://basicapp/skin/save.png); -moz-box-orient: vertical; } of course, you need to make sure the png files are included in the application.
title - Archive of obsolete content
it is used to specify thetitle of a <channel>, an <image>, an <item>, or a <textinput>.
...tscape rss 0.91 revision 3 example <?xml version="1.0"?> <!doctype rss system "http://my.netscape.com/publish/formats/rss-0.91.dtd"> <rss version="0.91"> <channel> <title>advogato</title> <link>http://www.advogato.org/article/</link> <description>recent advogato articles</description> <language>en-us</language> <image> <link>http://www.advogato.org/</link> <title>advogato</title> <url>http://www.advogato.org/image/tinyadvogato.png</url> </image> <item> <title>why can i not get any tang?!</title> <link>http://www.advogato.org/article/10101.html</link> <description>seriously.
... <tr> <th>name</td> <th>tag</td> <th>0.90</td> <th>n 0.91 r1</td> <th>n 0.91 r3</td> <th>u 0.91</td> <th>0.92</td> <th>0.93</td> <th>0.94</td> <th>1.0</td> <th>2.0</td> </tr> <tr> <td>rss channel element</td> <td><channel></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td>rss image element</td> <td><image></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td>rss item element</td> <td><item></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td>rss text input element</td> <td><textinput></td> <td>✔</td> <td>✔</td> <td>✔</td>...
Table Reflow Internals - Archive of obsolete content
e to size based on the final cell height in paginated mode when there is a height on the table, the table doesn't allocate extra height to rows until after it does a pass 2 reflow and then it is too late this can be fixed by doing a special 3rd pass reflow special reflow example <table border=2 width=300> <tr> <td> this cell's width is constrained by the table and image widths.
... </td> <td> <img src=raptor.jpg width=200 height=100%> </td> </tr> </table> this cell's width is constrained by the table and image widths.
... the image needs to be as high as the cell.
Creating a Skin for Firefox - Archive of obsolete content
introduction in order to create a skin for firefox, there are three things you need to know: how to edit images, how to extract zip files, and how to modify css.
... firefox uses standard gif, png, and jpeg images for the buttons and css to style everything else in the interface.
...you can't change what happens when the user right clicks on an image, but you can change the look of the right click menu (make it blue with pink polka dots, for example).
Making sure your theme works with RTL locales - Archive of obsolete content
example toolbar[iconsize="large"][mode="icons"] #back-button { -moz-image-region: rect(0px 396px 34px 360px); } toolbar[iconsize="large"][mode="icons"] #back-button:-moz-locale-dir(rtl) { -moz-image-region: rect(0px 516px 34px 480px); } this specifies the default, left-to-right version of the button, then offers an override if the user's interface is being rendered in right-to-left mode.
... toolbar[iconsize="large"][mode="icons"] #back-button { -moz-image-region: rect(0px 398px 34px 360px); } toolbar[iconsize="large"][mode="icons"] #back-button[chromedir="rtl"] { -moz-image-region: rect(0px 516px 34px 478px); } this way, if chromedir is "rtl", the second rule will override the first, and the theme will work in rtl.
... */ #a > #b > #c { /* normal rules */ } #a[chromedir="rtl"] > #b > #c { /* rtl rules */ } tip: sometimes, like in the back and forward arrows, you don't really need new versions of the images.
XForms Output Element - Archive of obsolete content
image - if the instance node contains an image, then an output element can be used in combination with the mediatype element to display the image (fx 3.0 only, xhtml/xul).
... image if the bound instance node contains an image then you are free to use this representation to show the image instead of the byte sequence of the image data (fx 3.0 only, xhtml/xul).
... characteristics the bound instance node is of type xsd:anyuri, xsd:base64binary or a type derived from it either the mediatype attribute is present and contains the image's mimetype or the output element contains a mediatype element which specifies the image's mimetype (for example, image/*).
Index - Game development
27 crisp pixel art look with image-rendering 2d, 3d, css, canvas, games, javascript, webgl, image-rendering, pixel this article discusses a useful technique for giving your canvas/webgl games a crisp pixel art look, even on high definition monitors.
... 35 tiles and tilemaps overview 2d, canvas, games, javascript, static, webgl, tilemap, tiles tilemaps are a very popular technique in 2d game development, consisting of building the game world or level map out of small, regular-shaped images called tiles.
... this results in performance and memory usage gains — big image files containing entire level maps are not needed, as they are constructed by small images or image fragments multiple times.
Mobile touch controls - Game development
implementation the easiest way to add an interactive object that will listen for user input is to create a button: var buttonenclave = this.add.button(10, 10, 'logo-enclave', this.clickenclave, this); this one is formed in the mainmenu state — it will be placed ten pixels from the top left corner of the screen, use the logo-enclave image, and execute the clickenclave() function when it is touched.
...from a design point of view, it is better to make the field of activity bigger without covering half of the screen with button images.
... for example, tapping on the right side of the screen will fire the weapon: this.buttonshoot = this.add.button(this.world.width*0.5, 0, 'button-alpha', null, this); this.buttonshoot.oninputdown.add(this.goshootpressed, this); this.buttonshoot.oninputup.add(this.goshootreleased, this); the code above will create a new button using a transparent image that covers the right half of the screen.
Player paddle and controls - Game development
rendering the paddle from the framework point of view the paddle is very similar to the ball — we need to add a variable to represent it, load the relevant image asset, and then do the magic.
... loading the paddle first, add the paddle variable we will be using in our game, right after the ball variable: var paddle; then, in the preload function, load the paddle image by adding the following new load.image() call: function preload() { // ...
... game.load.image('ball', 'img/ball.png'); game.load.image('paddle', 'img/paddle.png'); } adding the paddle graphic just so we don't forget, at this point you should grab the paddle graphic from github, and save it in your /img folder.
Speculative parsing - MDN Web Docs Glossary: Definitions of Web-related terms
the html parser starts speculative loads for scripts, style sheets and images it finds ahead in the stream and runs the html tree construction algorithm speculatively.
... the upside is that when a speculation succeeds, there's no need to reparse the part of the incoming file that was already scanned for scripts, style sheets and images.
... to make speculative loads of linked scripts, style sheets and images successful, avoid document.write.
Test your skills: HTML accessibility - Learn web development
html accessibility 4 in our final html accessibility task, you are given a simple image gallery, which has some accessibility problems.
... the header image has an accessiiblity issue, and so do the gallery images.
... you could take the header image further and implement it using css for arguably better accessibility.
Test your skills: Overflow - Learn web development
task two in this task an image is in the box, it is bigger than the dimensions of the box so overflows visibly.
... change it so that any image outside of the box is hidden.
... try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.
Test your skills: values and units - Learn web development
try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.
... task three in this task you need move the background image so that it is centered horizontally, and 20% from the top of the box.
... try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.
CSS building blocks - Learn web development
from adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in css.
... images, media, and form elements in this lesson we will take a look at how certain special elements are treated in css.
... images, other media, and form elements behave a little differently in terms of your ability to style them with css than regular boxes.
Floats - Learn web development
previous overview: css layout next originally for floating images inside blocks of text, the float property became one of the most commonly used tools for creating multiple column layouts on webpages.
... the background of floats the float property was introduced to allow web developers to implement simple layouts involving an image floating inside a column of text, with the text wrapping around the left or right of it.
... but web developers quickly realized that you can float anything, not just images, so the use of float broadened, for example to fun layout effects such as drop-caps.
Test your skills: floats - Learn web development
the text should then appear between the two boxes as in the image below.
...you can see the desired result in this image.
...use the most up to date method available to cause the box background to extend to below the float as in the image.
Test your skills: Grid Layout - Learn web development
by editing the css rules for the two child elements, cause them to span over several grid tracks each; the second item should overlay the first as in the image below.
...use the grid-area and grid-template-areas properties to lay the items out as shown in the image.
... grid and flex layout 4 you will need to use both grid layout and flexbox to recreate the example as seen in the image.
What are browser developer tools? - Learn web development
in the following image, the highlight on the number 18 shows that the line has a breakpoint set.
... in the image, the first section, watch expressions, shows that the listitems variable has been added.
...for example, in the image below, you can see the objects available to the code in the additemclick function.
Creating hyperlinks - Learn web development
note: a url can point to html files, text files, images, text documents, video and audio files, or anything else that lives on the web.
...if you have an image you want to make into a link, use the <a> element and reference the image file with the <img> element.
... <a href="https://www.mozilla.org/"> <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"> </a> note: you'll find out more about using images on the web in a future article.
Structuring a page of content - Learn web development
images that are used on the page.
... a main content area containing two columns — a main block to contain the welcome text, and a sidebar to contain image thumbnails.
... you need to add a suitable wrapper for: the header the navigation menu the main content the welcome text the image sidebar the footer you should also: apply the provided css to the page by adding another <link> element just below the existing one provided at the start.
What’s in the head? Metadata in HTML - Learn web development
in the mdn web docs sourcecode, you'll find this: <meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> <meta property="og:description" content="the mozilla developer network (mdn) provides information about open web technologies including html, css, and apis for both web sites and html5 apps.
... it also documents mozilla products, like firefox os."> <meta property="og:title" content="mozilla developer network"> one effect of this is that when you link to mdn web docs on facebook, the link appears along with an image and description: a richer experience for users.
...an be added to your page by: saving it in the same directory as the site's index page, saved in .ico format (most browsers will support favicons in more common formats like .gif or .png, but using the ico format will ensure it works as far back as internet explorer 6.) adding the following line into your html's <head> block to reference it: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> here is an example of a favicon in a bookmarks panel: there are lots of other icon types to consider these days as well.
Structuring the web with HTML - Learn web development
html is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.
... multimedia and embedding this module explores how to use html to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.
... solving common html problems use html to solve common problems provides links to sections of content explaining how to use html to solve very common problems when creating a webpage: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.
General asynchronous programming concepts - Learn web development
consider the following thread diagrams: main thread: task a --> task b in this case, let's say task a is doing something like fetching an image from the server and task b then does something to the image like applying a filter to it.
... if you start task a running and then immediately try to run task b, you'll get an error, because the image won't be available yet.
...the fetching of an image from the server), and then wait until the result has returned before running another operation: main thread: task a task b promise: |__async operation__| since the operation is happening somewhere else, the main thread is not blocked while the async operation is being processed.
HTML performance features - Learn web development
elements & attributes impacting performance the <picture> element the <video> element the <source> element the <img> srcset attribute responsive images preloading content with rel="preload" - (https://w3c.github.io/preload/ ) async / defer attributes <iframe> <object> <script> rel attribute conclusion previous overview: performance next in this module the "why" of web performance what is web performance?
... measuring performance multimedia: images multimedia: video javascript performance best practices.
... html performance features css performance features fonts and performance mobile performance focusing on performance see also the <picture> element the <video> element the <source> element the <img> srcset attribute responsive images preloading content with rel="preload" - (https://w3c.github.io/preload/ ) ...
JavaScript performance - Learn web development
previous overview: performance next while images and video account for over 70% of the bytes downloaded for the average website, byte per byte, javascript has a greater negative impact on performance.
... similar to images and video, the best way to improve performance is to omit what is not, in fact, necessary.
... measuring performance multimedia: images multimedia: video javascript performance best practices.
Client-Server Overview - Learn web development
ient+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev http/1.1 host: developer.mozilla.org connection: keep-alive pragma: no-cache cache-control: no-cache upgrade-insecure-requests: 1 user-agent: mozilla/5.0 (windows nt 10.0; wow64) applewebkit/537.36 (khtml, like gecko) chrome/52.0.2743.116 safari/537.36 accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 referer: https://developer.mozilla.org/ accept-encoding: gzip, deflate, sdch, br accept-charset: iso-8859-1,utf-8;q=0.7,*;q=0.7 accept-language: en-us,en;q=0.8,es;q=0.6 cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zipujsazv6pcgcbjscj1zu6pqzbfmuat; dwf_section_edit=false; dwf_sg_task_completion=false; _gat=1; _ga=ga1.2.1688886003.1471911953; ffo=true the first and...
...per.mozilla.org connection: keep-alive content-length: 432 pragma: no-cache cache-control: no-cache origin: https://developer.mozilla.org upgrade-insecure-requests: 1 user-agent: mozilla/5.0 (windows nt 10.0; wow64) applewebkit/537.36 (khtml, like gecko) chrome/52.0.2743.116 safari/537.36 content-type: application/x-www-form-urlencoded accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 referer: https://developer.mozilla.org/profiles/hamishwillee/edit accept-encoding: gzip, deflate, br accept-language: en-us,en;q=0.8,es;q=0.6 cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; _gat=1; csrftoken=zipujsazv6pcgcbjscj1zu6pqzbfmuat; dwf_section_edit=false; dwf_sg_task_completion=false; _ga=ga1.2.1688886003.1471911953; ffo=true csrfmiddlewaretoken=zipujsazv6pcgcbjscj1z...
... understanding how static sites work is nevertheless useful when learning server-side programming, because dynamic sites handle requests for static files (css, javascript, static images, etc.) in exactly the same way.
Introduction to the server side - Learn web development
a new html page, or an image, etc...), which could then be displayed by the web browser.
... requests for static resources are handled in the same way as for static sites (static resources are any files that don't change —typically: css, javascript, images, pre-created pdf files etc).
...pdfs, images, etc.).
Mozilla's Section 508 Compliance
when an image represents a program element, the information conveyed by the image must also be available in text.
... (e) when bitmap images are used to identify controls, status indicators, or other programmatic elements, the meaning assigned to those images shall be consistent throughout an application's performance.
...mozilla's preferences under privacy & security - images contain options for making animated images still.
Accessible Toolkit Checklist
for example, lists of checkboxes are implemented in windows with images of checked and unchecked checkboxes.
...this can be supported through spi_getkeyboardcues and spi_getmenuunderlines simple widgets buttons tab, arrow, unmodified letter mnemonics require and support text labels for buttons with images, can be same as tooltip space key activates button enter key activates focused button (thus current button, not default button shows dark border when a different button is focused) when button has a popup available by clicking on it, the enter key or space bar should also activate the popup toolbars and toolbar buttons are not focusable, but we should expose the tooltip.
... space bar toggles checkboxes the enter key should activate an item if double clicking would do so msaa support, including accessible selection, exposing current level and position in list, alternative text for informative or interactive images, selectable, multiselectable and extselectable states, statechange events for expanding/collapsing and toggling of checkbox children.
Creating MozSearch plugins
the following xml is the bundled firefox 2 search plugin for searching using yahoo!: <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>yahoo</shortname> <description>yahoo search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,r0lgodlheaaqajecap8aaaaaap///waaach5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> <url type="application/x-suggestions+json" method="get" template="http://ff.search.yahoo.com/gossip?output=fxjson&amp;command={searchterms}" /> <url type="text/html" method="get" template="http://search.yahoo.com/sear...
... <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>mdc</shortname> <description>mozilla developer center search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8%2f9haaaabgdbtueaak%2finwwk6qaaabl0rvh0u29mdhdhcmuaqwrvymugsw1hz2vszwfkexhjztwaaahwsurbvhjayvz%2f%2fz8djqaggjiqoe%2ffv2fv7oz8rays%2fn%2bvkfg%2fiynjfyd%2f1%2brvq7ffu3dpfpsbaaheahibcj85c8bn2nj4vwsdw%2f8zqlwkio8ccroqu0dxqlwrdshuwzbaaigjmtnnpgya9j8uqhfelwpxf2mideirksn9fwsjorkaeeam0dd4dzmaypi%2fg%2bqky4hh5waxgf8pd...
...ycbuigtdvkhdbia%2bcuotgaccued3tdqn75d4xmavcok9armhbzaw0aecibhkalc0mdy7x9abna3obazxiaa6ikecglmvqhwwyjyul2d4v2cpg8vzswx7ghyaaak7aoif7saboqcmn4ha3ahfsidtgpq%2fvlz8p4mskj2w9h8ggbjevxvhdo4fquqg%2fkdypqcg4h8luiacnq%2fsobmyi8basajfpcj1aaeejwvqqlpabxmh5bjjqi0gi9dtaagdbbccavlkgmq7ykczxpcqxquzhaeccj4xgml493ug21zd%2badaxh0wlm4a9mzpxjkjiiawtar5pqmalacabquulttbgccagcnnzgabbgamj5thwgvjlaaaaabjru5erkjggg%3d%3d</image> <url type="text/html" method="get" template="http://developer.mozilla.org/en/docs/special:search?search={searchterms}"/> <searchform>http://developer.mozilla.org/en/docs/special:search</searchform> </searchplugin> notice in this case that instead of using <param> to define parameters to the search engine, they're simply embedded inside the template url.
Experimental features in Firefox
nightly 62 no developer edition 62 no beta 62 no release 62 no preference name media.mediasource.experimental.enabled avif (av1 image file format) support with this feature enabled, firefox supports the av1 image file (avif) format.
... this is a still image file format that leverages the capabilities of the av1 video compression algorithms to reduce image size.
... nightly 77 no developer edition 77 no beta 77 no release 77 no preference name image.avif.enabled av1 support for firefox on android this feature allows firefox on android to use av1 format media.
HTMLIFrameElement.getScreenshot()
the image will be cropped if necessary but will not be distorted vertically or horizontally.
... mimetype optional a mime type specifying the format of the image to be returned; if not specified, the default used is image/jpeg.
... use image/png to capture the alpha channel of the rendered result by returning a png-format image.
How Mozilla determines MIME Types
also, for images loaded via <img src>, mozilla's image library will do content sniffing (never extension sniffing) to find out the real type of the image.
... the image library will be asked for the mime type given the content.
... this should allow reliable detection of all image types mozilla supports.
Using the viewport meta tag to control layout on mobile browsers
their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution.
... to get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using css or viewport properties.
... for web developers, this means that the size of a page is much smaller than the actual pixel count and browsers may size their layouts and images accordingly.
about:memory
m/, id=20) │ ├──12.85 mb (06.69%) ++ top(http://arstechnica.com/, id=14) │ ├───6.40 mb (03.33%) ++ top(chrome://browser/content/browser.xul, id=3) │ └───3.59 mb (01.87%) ++ (4 tiny) ├───45.74 mb (23.84%) ++ js-non-window ├───33.73 mb (17.58%) ── heap-unclassified ├───22.51 mb (11.73%) ++ heap-overhead ├────6.62 mb (03.45%) ++ images ├────5.82 mb (03.03%) ++ workers/workers(chrome) ├────5.36 mb (02.80%) ++ (16 tiny) ├────4.07 mb (02.12%) ++ storage ├────2.74 mb (01.43%) ++ startup-cache └────2.16 mb (01.12%) ++ xpconnect some expertise is required to understand the full details here, but there are various things worth pointing out.
... there are measurements for other content such as images and workers, and for browser subsystems such as the startup cache and xpconnect.
...ixels 5.38 mb ── gfx-surface-xlib 0.00 mb ── gfx-textures 0.00 mb ── gfx-tiles-waste 0 ── ghost-windows 109.22 mb ── heap-allocated 164 ── heap-chunks 1.00 mb ── heap-chunksize 114.51 mb ── heap-committed 164.00 mb ── heap-mapped 4.84% ── heap-overhead-ratio 1 ── host-object-urls 0.00 mb ── imagelib-surface-cache 5.27 mb ── js-main-runtime-temporary-peak 0 ── page-faults-hard 203,349 ── page-faults-soft 274.99 mb ── resident 251.47 mb ── resident-unique 1,103.64 mb ── vsize some measurements of note are as follows.
Patches and pushes
<searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>yahoo</shortname> <description>yahoo search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,r0lgodlheaaqajecap8aaaaaap///waaach5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> ***this tag is optional***<url type="application/x-suggestions+json" method="get" template="http://ff.search.yahoo.com/gossip?output=fxjson&amp;command={searchterms}" />*** <url type="text/html" method="get" template=...
... each plugin has an icon image which is linked within the xml file as an uri id.
... upload your plugins icon image to data kitchen to obtain its uri id and add to the xml file within the image tag.
Gecko Roles
role_chart represents a graphical image used to represent data.
... role_diagram represents a graphical image used to diagram data.
... role_combobox_option a item of list that is shown by combobox role_image_map an image map -- has child links representing the areas role_option an option in a listbox role_rich_option a rich option in a listbox, it can have other widgets as children role_listbox a list of options editor's note: use template role_ to get reference on accessible role.
nsIAccessibleHyperLink
with an image map, reflects the actual areas within the map.
...note: in the case of an image map there is more than one link represented by this accessible.
... remarks anchors, image maps, xul:labels with class="text-link" implement this interface.
nsIHTMLEditor
used primarily to supply new element for various insert element dialogs (image, link, table, and horizontalrule are the only returned elements as of 9/12/18); namedanchor was removed in firefox 63.
... getselectedelement() return an element only if it is the only node selected, such as an image, horizontal rule, and so on.
... void setparagraphformat( in astring aparagraphformat ); parameters aparagraphformat "p", "h1" to "h6", "address", "pre", or "blockquote" updatebaseurl() set the baseurl for the document to the current url but only if the page doesn't have a <base> tag this should be done after the document url has changed, such as after saving a file this is used as base for relativizing link and image urls.
nsIIOService
for example for an image load, it's the document in which the image will be loaded.
...for example for an image load, it's the document in which the image will be loaded.
...for example for an image load, it's the document in which the image will be loaded.
nsIMsgCustomColumnHandler
you must implement: nsitreeview.iseditable() nsitreeview.getcellproperties() nsitreeview.getimagesrc() nsitreeview.getcelltext() nsitreeview.cyclecell() nsimsgcustomcolumnhandler.getsortstringforrow() nsimsgcustomcolumnhandler.getsortlongforrow() nsimsgcustomcolumnhandler.isstring() and optionally: nsitreeview.getrowproperties() from c++ you must implement all of nsitreeview and nsimsgcustomcolumnhandler.
...n that does nothing: var columnhandler = { iseditable: function(arow, acol) {return false;}, cyclecell: function(arow, acol) { }, getcelltext: function(arow, acol) { }, getsortstringforrow: function(ahdr) { return ""; }, isstring: function() {return true;}, getcellproperties: function(arow, acol, aprops) { }, getrowproperties: function(arow, aprops) { }, getimagesrc: function(arow, acol) {return null;}, getsortlongforrow: function(ahdr) {return 0;} } to attach it use the nsimsgdbview.addcolumnhandler() method (recall gdbview is the global nsimsgdbview in thunderbird): gdbview.addcolumnhandler("newcolumn", columnhandler); after which it can be retrieved using the nsimsgdbview.getcolumnhandler() method: var handler = gdbview.getcolumnhandler...
...getimagesrc is used to determine what to display.
XPCOM Interface Reference
component; nsiprefbranchextensionmanager (toolkit)iaccessible2iaccessibleactioniaccessibleapplicationiaccessiblecomponentiaccessibleeditabletextiaccessiblehyperlinkiaccessiblehypertextiaccessibleimageiaccessiblerelationiaccessibletableiaccessibletable2iaccessibletablecelliaccessibletextiaccessiblevalueidispatchijsdebuggeramiinstallcallbackamiinstalltriggeramiwebinstallinfoamiwebinstalllisteneramiwebinstallpromptamiwebinstallerimgicacheimgicontainerimgicontainerobserverimgidecoderimgidecoderobserverimgiencoderimgiloaderimgirequestinidomutilsjsdistackframemoziasyncfaviconsmoziasynchistorymozicoloranalyzermozijssubscriptloadermozipersonaldictionarymoziplaceinfomoziplacesautocompletemoziregistrymozirepresentative...
...tmozistoragevaluearraymozitxttohtmlconvmozithirdpartyutilmozivisitinfomozivisitinfocallbackmozivisitstatuscallbacknsiabcardnsiaboutmodulensiabstractworkernsiaccelerometerupdatensiaccessnodensiaccessibilityservicensiaccessiblensiaccessiblecaretmoveeventnsiaccessiblecoordinatetypensiaccessibledocumentnsiaccessibleeditabletextnsiaccessibleeventnsiaccessiblehyperlinknsiaccessiblehypertextnsiaccessibleimagensiaccessibleprovidernsiaccessiblerelationnsiaccessibleretrievalnsiaccessiblerolensiaccessiblescrolltypensiaccessibleselectablensiaccessiblestatechangeeventnsiaccessiblestatesnsiaccessibletablensiaccessibletablecellnsiaccessibletablechangeeventnsiaccessibletextnsiaccessibletextchangeeventnsiaccessibletreecachensiaccessiblevaluensiaccessiblewin32objectnsialertsservicensiannotationobservernsiannotat...
...ntrynsishistorynsishistorylistenernsisockssocketinfonsisslerrorlistenernsisslsocketcontrolnsiscreennsiscreenmanagernsiscripterrornsiscripterror2nsiscriptableionsiscriptableinputstreamnsiscriptableunescapehtmlnsiscriptableunicodeconverternsiscrollablensisearchenginensisearchsubmissionnsisecuritycheckedcomponentnsiseekablestreamnsiselectionnsiselection2nsiselection3nsiselectioncontrollernsiselectionimageservicensiselectionprivatensiserversocketnsiserversocketlistenernsiservicemanagernsisessionstartupnsisessionstorensisimpleenumeratornsismsdatabaseservicensismsrequestmanagernsismsservicensisocketprovidernsisocketproviderservicensisockettransportnsisockettransportservicensisoundnsispeculativeconnectnsistackframensistandardurlnsistreamconverternsistreamlistenernsistringbundlensistringbundleoverriden...
Using the clipboard
for other types of data, such as urls or images, you will need to use a more complex method.
...this is needed because you can put anything on the clipboard from text to images.
...for example, a textbox would accept "text/unicode" (or "text/plain") while a composer window might accept html and image data.
Creating a Custom Column
from nsitreeview: getcellproperties(row, col, props): optionally modify the props array getrowproperties(row, props): optionally modify the props array getimagesrc(row, col): return a string (or null) getcelltext(row, col): return a string representing the actual text to display in the column from nsimsgcustomcolumnhandler: getsortstringforrow(hdr): return the string value that the column will be sorted by getsortlongforrow(hdr): return the long value that the column will be sorted by isstring(): return true / false warning!
... the message's header so that we can extract the reply to field var hdr = gdbview.getmsghdrat(row); return hdr.getstringproperty("replyto"); }, getsortstringforrow: function(hdr) {return hdr.getstringproperty("replyto");}, isstring: function() {return true;}, getcellproperties: function(row, col, props){}, getrowproperties: function(row, props){}, getimagesrc: function(row, col) {return null;}, getsortlongforrow: function(hdr) {return 0;} } basically, all we are doing here is making sure that both the text that is displayed to the user (getcelltext()) and the string we sort according to (when the user decided to sort the view by our custom column) are identical.
... don't forget that columns aren't restricted to text - they can also load images (via getimagesrc()) so that your extension can display a new visual cue to the user.
Plug-in Basics - Plugins
embedded plug-ins are commonly used for multimedia images relating to text in the page, such as the adobe flash plug-in.
...it embeds a variety of object types in an html page, including plug-ins, java components, activex controls, applets, and images.
...plug-ins are embedded in much the same way as gif or jpeg images are, except that a plug-in can be live and respond to user events, such as mouse clicks.
Console messages - Firefox Developer Tools
if the resource is an image, the image will be opened in a new tab.
... blocked loading mixed display content the page contained mixed display content: that is, the main page was served over https, but asked the browser to load "display content", such as images, over http.
... loading mixed (insecure) display content on a secure page the page contained mixed display content: that is, the main page was served over https, but asked the browser to load "display content", such as images, over http.
Body.body - Web APIs
WebAPIBodybody
example in our simple stream pump example we fetch an image, expose the response's stream using response.body, create a reader using readablestream.getreader(), then enqueue that stream's chunks into a second, custom readable stream — effectively creating an identical copy of the image.
... const image = document.getelementbyid('target'); // fetch the original image fetch('./tortoise.png') // retrieve its body as readablestream .then(response => response.body) .then(body => { const reader = body.getreader(); return new readablestream({ start(controller) { return pump(); function pump() { return reader.read().then(({ done, value }) => { // when no more data needs to be consumed, close the stream if (done) { controller.close(); return; } // enqueue the next data chunk into our target stream controller.enqueue(value); return pump(); }); } } }) }) .then(stream => new response(stream)) .then(response => response.blob()) .then(blob => url.createobject...
...url(blob)) .then(url => console.log(image.src = url)) .catch(err => console.error(err)); specifications specification status comment fetchthe definition of 'body' in that specification.
Body - Web APIs
WebAPIBody
examples the example below uses a simple fetch call to grab an image and display it in an <img> tag.
... you'll notice that since we are requesting an image, we need to run body.blob() (response implements body) to give the response its correct mime type.
... html content <img class="my-image" src="https://udn.realityripple.com/samples/46/29059a2b39.png"> js content const myimage = document.queryselector('.my-image'); fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/delete_key1.jpg') .then(res => res.blob()) .then(res => { const objecturl = url.createobjecturl(res); myimage.src = objecturl; }); specifications specification status comment fetchthe definition of 'body' in that specification.
CanvasRenderingContext2D.filter - Web APIs
a value under 100% darkens the image, while a value over 100% brightens it.
... a value of 0% will create an image that is completely black, while a value of 100% leaves the input unchanged.
... html <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(9px 9px 2px #e81)'; ctx.drawimage(image, 10, 10, 180, 120); }); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.filter' in that specification.
ClipboardItem() - Web APIs
note: image format support varies by browser.
... examples the below example requests a png image using the fetch api, and in turn, the responses' blob() method, to create a new clipboarditem and write it to the clipboard, using the clipboard api.
... async function writeclipimg() { try { const imgurl = '/myimage.png'; const data = await fetch(imgurl); const blob = await data.blob(); await navigator.clipboard.write([ new clipboarditem({ [blob.type]: blob }) ]); console.log('fetched image copied.'); } catch(err) { console.error(err.name, err.message); } } specifications specification status comment clipboard api and eventsthe definition of 'clipboarditem' in that specification.
ContentIndex.getAll() - Web APIs
homepage article video audio icons: optional an array of image resources, defined as an object with the following data: src: a url string of the source image.
... sizes: optional a string representation of the image size.
... type: optional the mime type of the image.
Examples of web and XML development using the DOM - Web APIs
example 1: height and width the following example shows the use of the height and width properties alongside images of varying dimensions: <!doctype html> <html lang="en"> <head> <title>width/height example</title> <script> function init() { var arrimages = new array(3); arrimages[0] = document.getelementbyid("image1"); arrimages[1] = document.getelementbyid("image2"); arrimages[2] = document.getelementbyid("image3"); var objoutput = document.getelementbyid("output"); var strhtml = "<ul>"; for (var i = 0; i < arrimages.length; i++) { strhtml += "<li>image" + (...
...i+1) + ": height=" + arrimages[i].height + ", width=" + arrimages[i].width + ", style.height=" + arrimages[i].style.height + ", style.width=" + arrimages[i].style.width + "<\/li>"; } strhtml += "<\/ul>"; objoutput.innerhtml = strhtml; } </script> </head> <body onload="init();"> <p>image 1: no height, width, or style <img id="image1" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif"> </p> <p>image 2: height="50", width="500", but no style <img id="image2" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" height="50" width="500"> </p> <p>image 3: no height, width, but style="height: 50px; width: 500px;" <img id="image3" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.
...gif" style="height: 50px; width: 500px;"> </p> <div id="output"> </div> </body> </html> example 2: image attributes <!doctype html> <html lang="en"> <head> <title>modifying an image border</title> <script> function setborderwidth(width) { document.getelementbyid("img1").style.borderwidth = width + "px"; } </script> </head> <body> <p> <img id="img1" src="image1.gif" style="border: 5px solid green;" width="100" height="100" alt="border test"> </p> <form name="formname"> <input type="button" value="make border 20px-wide" onclick="setborderwidth(20);" /> <input type="button" value="make border 5px-wide" onclick="setborderwidth(5);" /> </form> </body> </html> example 3: manipulating styles in this simple example, some basic style properties of an html ...
Element: error event - Web APIs
for example, if a script has an execution error or an image can't be found or is invalid.
... examples live example html <div class="controls"> <button id="img-error" type="button">generate image error</button> <img class="bad-img" /> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none;...
... } label, button { display: block; } button { height: 2rem; margin: .5rem; } img { width: 0; height: 0; } js const log = document.queryselector('.event-log-contents'); const badimg = document.queryselector('.bad-img'); badimg.addeventlistener('error', (event) => { log.textcontent = log.textcontent + `${event.type}: loading image\n`; console.log(event) }); const imgerror = document.queryselector('#img-error'); imgerror.addeventlistener('click', () => { badimg.setattribute('src', 'i-dont-exist'); }); result specifications specification status ui events working draft ...
File.type - Web APIs
WebAPIFiletype
syntax var name = file.type; value a string, containing the media type(mime) indicating the type of the file, for example "image/png" for png images example <input type="file" multiple onchange="showtype(this)"> function showtype(fileinput) { var files = fileinput.files; for (var i = 0; i < files.length; i++) { var name = files[i].name; var type = files[i].type; alert("filename: " + name + " , type: " + type); } } note: based on the current implementation, browsers won't actually read the bytestream of a file to determine its media type.
... it is assumed based on the file extension; a png image file renamed to .txt would give "text/plain" and not "image/png".
... moreover, file.type is generally reliable only for common file types like images, html documents, audio and video.
FileReader.readAsDataURL() - Web APIs
example html <input type="file" onchange="previewfile()"><br> <img src="" height="200" alt="image preview..."> javascript 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); } } live...
...ipt function previewfiles() { var preview = document.queryselector('#preview'); var files = document.queryselector('input[type=file]').files; function readandpreview(file) { // make sure `file.name` matches our extensions criteria if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { var reader = new filereader(); reader.addeventlistener("load", function () { var image = new image(); image.height = 100; image.title = file.name; image.src = this.result; preview.appendchild( image ); }, false); reader.readasdataurl(file); } } if (files) { [].foreach.call(files, readandpreview); } } note: the filereader() constructor was not supported by internet explorer for versions before 10.
... for a full compatibility code you can see our crossbrowser possible solution for image preview.
FileSystemEntry.toURL() - Web APIs
example if you have a filesystemfileentry corresponding to an image file in a file system available to your web site or app, you can call tourl() to get its url for use in html.
... if your site is located at http://my-awesome-website.woot, and you have a temporary file system that contains an image file named awesomesauce.jpg, the url returned by tourl() might be (depending on the browser's implementation) something like "filesystem:http://my-awesome-website.woot/temporary/awesomesauce.jpg".
... code that makes use of this might look like this: let img = document.createelement("img"); img.src = imagefileentry.tourl(); document.body.appendchild(img); assuming the scenario mentioned before the code, the result would be html that looks like this being appended to the end of the document: <img src="filesystem:http://my-awesome-website.woot/temporary/awesomesauce.jpg"> browser compatibility the compatibility table on this page is generated from structured data.
HTMLSourceElement - Web APIs
htmlsourceelement.sizes is a domstring representing image sizes between breakpoints htmlsourceelement.src is a domstring reflecting the src html attribute, containing the url for the media resource.
... htmlsourceelement.srcset is a domstring reflecting the srcset html attribute, containing a list of candidate images, separated by a comma (',', u+002c comma).
... a candidate image is a url followed by a 'w' with the width of the images, or an 'x' followed by the pixel density.
Using IndexedDB - Web APIs
</td> </tr> <tr> <td> <label for="pub-year"> year: </label> </td> <td> <input type="number" id="pub-year" name="pub-year" /> </td> </tr> </tbody> <tbody> <tr> <td> <label for="pub-file"> file image: </label> </td> <td> <input type="file" id="pub-file"/> </td> </tr> <tr> <td> <label for="pub-file-url"> online-file image url:<br/> <span class="note">(same origin url)</span> </label> </td> <td> <input t...
... if (blob.type == 'text/html') { var reader = new filereader(); reader.onload = (function(evt) { var html = evt.target.result; iframe.load(function() { $(this).contents().find('html').html(html); }); }); reader.readastext(blob); } else if (blob.type.indexof('image/') == 0) { iframe.load(function() { var img_id = 'image-' + key; var img = $('<img id="' + img_id + '"/>'); $(this).contents().find('body').html(img); var obj_url = window.url.createobjecturl(blob); $(this).contents().find('#' + img_id).attr('src', obj_url); window.url.revokeobjecturl(obj_url); }); } else if (blob.t...
...').css('cursor', 'auto'); }); iframe.attr('src', obj_url); window.url.revokeobjecturl(obj_url); } else { iframe.load(function() { $(this).contents().find('body').html("no view available"); }); } }); } /** * @param {string} biblioid * @param {string} title * @param {number} year * @param {string} url the url of the image to download and store in the local * indexeddb database.
Media Session API - Web APIs
dictionaries mediaimage a mediaimage object contains information describing an image associated with the media.
...it then instantiates a metadata object for the session, and adds event handlers for the user control actions: if ('mediasession' in navigator) { navigator.mediasession.metadata = new mediametadata({ title: 'unforgettable', artist: 'nat king cole', album: 'the ultimate collection (remastered)', artwork: [ { src: 'https://dummyimage.com/96x96', sizes: '96x96', type: 'image/png' }, { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' }, { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' }, { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' }, { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' }, ...
... { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' }, ] }); navigator.mediasession.setactionhandler('play', function() { /* code excerpted.
Notification - Web APIs
notification.badge read only the url of the image used to represent the notification when there is not enough space to display the notification itself.
... notification.icon read only the url of the image used as an icon of the notification as specified in the constructor's options parameter.
... notification.image read only the url of an image to be displayed as part of the notification, as specified in the constructor's options parameter.
OVR_multiview2.framebufferTextureMultiviewOVR() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image.
... texture a webgltexture object whose image to attach.
... level a glint specifying the mipmap level of the texture image to be attached.
PaintWorklet.registerPaint - Web APIs
the paintworklet.registerpaint() method of the paintworklet interface registers a class programmatically generate an image where a css property expects a file.
...to use it, you register it with the css.paintworklet.addmodule() method: <script> css.paintworklet.addmodule('checkboardworklet.js'); </script> you can then use the paint() css function in your css anywhere an <image> value is valid.
... li { background-image: paint(checkerboard); } specifications specification status comment css painting api level 1the definition of 'paintworklet.registerpaint' in that specification.
Request() - Web APIs
WebAPIRequestRequest
since we are fetching an image, we run body.blob on the response to give it the proper mime type so it will be handled properly, then create an object url of it and display it in an <img> element.
... var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { return response.blob(); }).then(function(response) { var objecturl = url.createobjecturl(response); myimage.src = objecturl; }); in our fetch request with init example (see fetch request init live) we do the same thing except that we pass in an init object when we invoke fetch(): var myimage = document.queryselector('img'); var myheaders = new headers(); myheaders.append('content-type', 'image/jpeg'); var myinit = { method: 'get', headers: myheaders, mode: 'cors', cache: 'default' }; var myrequest = new request('flowers.jpg',myinit); fetch(myrequest).then(function(response) { ...
... var myinit = { method: 'get', headers: { 'content-type': 'image/jpeg' }, mode: 'cors', cache: 'default' }; var myrequest = new request('flowers.jpg', myinit); you may also pass a request object to the request() constructor to create a copy of the request (this is similar to calling the clone() method.) var copy = new request(myrequest); note: this last usage is probably only useful in serviceworkers.
Request.context - Web APIs
WebAPIRequestcontext
the deprecated context read-only property of the request interface contains the context of the request (e.g., audio, image, iframe).
... the context of a request is only relevant in the serviceworker api; a service worker can make decisions based on whether the url is for an image, or an embeddable object such as a <video>, iframe, etc.
... example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the request context in a variable: var myrequest = new request('flowers.jpg'); var mycontext = myrequest.context; // returns the empty string by default ...
Request - Web APIs
WebAPIRequest
request.context read only contains the context of the request (e.g., audio, image, iframe, etc.) request.credentials read only contains the credentials of the request (e.g., omit, same-origin, include).
... examples in the following snippet, we create a new request using the request() constructor (for an image file in the same directory as the script), then return some property values of the request: const request = new request('https://www.mozilla.org/favicon.ico'); const url = request.url; const method = request.method; const credentials = request.credentials; you could then fetch this request by passing the request object in as a parameter to a windoworworkerglobalscope.fetch() call, for example...
...: fetch(request) .then(response => response.blob()) .then(blob => { image.src = url.createobjecturl(blob); }); in the following snippet, we create a new request using the request() constructor with some initial data and body content for an api request which need a body payload: const request = new request('https://example.com', {method: 'post', body: '{"foo": "bar"}'}); const url = request.url; const method = request.method; const credentials = request.credentials; const bodyused = request.bodyused; note: the body type can only be a blob, buffersource, formdata, urlsearchparams, usvstring or readablestream type, so for adding a json object to the payload you need to stringify that object.
Response - Web APIs
WebAPIResponse
examples in our basic fetch example (run example live) we use a simple fetch() call to grab an image and display it in an <img> element.
... you'll notice that since we are requesting an image, we need to run body.blob (response implements body) to give the response its correct mime type.
... const image = document.queryselector('.my-image'); fetch('flowers.jpg').then(function(response) { return response.blob(); }).then(function(blob) { const objecturl = url.createobjecturl(blob); image.src = objecturl; }); you can also use the response.response() constructor to create your own custom response object: const response = new response(); specifications specification status comment fetchthe definition of 'response' in that specification.
Using the Screen Capture API - Web APIs
both of these implementations of startcapture() return the mediastream containing the captured display imagery.
...generally, the browser will provide an image which obscures the hidden portion of the logical display surface in some way, such as by blurring or replacing with a color or pattern.
... setup first, some constants are set up to reference the elements on the page to which we'll need access: the <video> into which the captured screen contents will be streamed, a box into which logged output will be drawn, and the start and stop buttons that will turn on and off capture of screen imagery.
Storage.removeItem() - Web APIs
example the following function creates three data items inside local storage, then removes the image data item.
... function populatestorage() { localstorage.setitem('bgcolor', 'red'); localstorage.setitem('font', 'helvetica'); localstorage.setitem('image', 'mycat.png'); localstorage.removeitem('image'); } we can do the same for the session storage.
... function populatestorage() { sessionstorage.setitem('bgcolor', 'red'); sessionstorage.setitem('font', 'helvetica'); sessionstorage.setitem('image', 'mycat.png'); sessionstorage.removeitem('image'); } note: to see this used within a real world example, see our web storage demo.
WebGLRenderingContext.getParameter() - Web APIs
gl.green_bits glint gl.implementation_color_read_format glenum gl.implementation_color_read_type glenum gl.line_width glfloat gl.max_combined_texture_image_units glint gl.max_cube_map_texture_size glint gl.max_fragment_uniform_vectors glint gl.max_renderbuffer_size glint gl.max_texture_image_units glint gl.max_texture_size glint gl.max_varying_vectors glint gl.max_vertex_attribs glint gl.max_vertex_texture_image_units gl...
... gl.unpack_image_height glint see pixelstorei.
... gl.unpack_skip_images glint see pixelstorei.
Starting up and shutting down a WebXR session - Web APIs
there are three options: immersive-vr a fully-immersive virtual reality session using a headset or similar device that fully replaces the world around the user with the images you present.
... immersive-ar an augmented reality session in which images are added to the real world using a headset or similar apparatus.
... inline an on-screen presentation of the xr imagery within the context of the document window.
Basic concepts behind Web Audio API - Web APIs
note: audio resampling is very similar to image resizing.
... say you've got a 16 x 16 image, but you want it to fill a 32x32 area.
...the result has less quality (it can be blurry or edgy, depending on the resizing algorithm), but it works, with the resized image taking up less space.
XRWebGLLayer.getNativeFramebufferScaleFactor() static method - Web APIs
this can happen for display environments which use superscaling or anti-aliasing techniques to improve perceived image quality.
... the recommended webgl frame buffer resolution is the best possible estimate of the resolution necessary to contain all of fthe xrviews needed by the device while at the same time providing typical applications an acceptable balance of image quality and performance.
...consider a frame buffer which at full size looks like this: if, on this device, it's determined that due to gpu limitations the browser needs to reduce image quality in order to improve performance to an acceptable level, it might choose to halve the resolution.
ARIA: figure role - Accessibility
a figure is generally considered to be one or more images, code snippets, or other content that puts across information in a different way to a regular flow of text.
... <div role="figure" aria-labelledby="caption"> <img src="image.png" alt="full alternative image description"> <p id="caption">figure 1: the caption</p> </div> in the above example, we have a figure that consists of two separate content items — an image and a caption.
... description any content that should be grouped together and consumed as a figure (which could include images, video, audio, code snippets, or other content) can be identified as a figure using role="figure".
Accessibility: What users can do to browse more safely - Accessibility
personalization and accessibility settings from the article, "understanding success criterion 2.3.1: three flashes or below threshold" "flashing can be caused by the display, the computer rendering the image or by the content being rendered.
...19 article revisiting prefers-reduced-motion, the reduced motion media query, "while microsoft edge does not have support for prefers-reduced-motion, it will become chrome under the hood soon." safari 10.1 and above (desktop) do not enable auto-play (does not work for gifs) ios safari 10.3 and above (mobile and tablet) select the "reduce motion option" in os accessibility settings for apple (image source: developers.google.com from thomas steiner's article "move ya!
...using firefox as an example, it explains that by changing the value the image.animation_mode from "normal" to "none", all animated images will be blocked.
-webkit-print-color-adjust - CSS: Cascading Style Sheets
the -webkit-print-color-adjust property is a non-standard css extension that can be used to force printing of background colors and images in browsers based on the webkit engine.
... background colors and images are only printed if the user explicitly allows it in their browser's print settings dialog.
... exact background colors and images of the element to which this rule is applied are always printed, user's print settings are overridden.
:-moz-loading - CSS: Cascading Style Sheets
the :-moz-loading css pseudo-class is a mozilla extension that matches elements that can't be displayed because they have not started loading, such as images that haven't started to arrive yet.
... note that images that are in the process of loading are not matched by this pseudo-class.
... syntax :-moz-loading examples setting a background for images that are loading :-moz-loading { background-color: #aaa; background-image: url(loading-animation.gif) center no-repeat; } specifications not part of any standard.
::first-letter (:first-letter) - CSS: Cascading Style Sheets
the ::first-letter css pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).
...ont, font-style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-synthesis, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-variant-position, font-weight, font-size, font-size-adjust, line-height and font-family all background properties : background, background-color, background-image, background-clip, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode all margin properties: margin, margin-top, margin-right, margin-bottom, margin-left all padding properties: padding, padding-top, padding-right, padding-bottom, padding-left all border properties: the shorthands border, border-style, border-color, borde...
...r-width, border-radius, border-image, and the longhands properties the color property the text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (when appropriate), line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (only if float is none) css properties syntax /* css3 syntax */ ::first-letter /* css2 syntax */ :first-letter examples simple drop cap in this example we will use the ::first-letter pseudo-element to create a simple drop cap effect on the first letter of the paragraph coming right after the <h2>.
@counter-style - CSS: Cascading Style Sheets
symbols can contain string, images or custom identifiers.
... the below @counter-style rule uses images instead of character symbols.
... image values for symbols is currently an 'at risk' feature, and is not implemented in any browser.
Border-radius generator - CSS: Cascading Style Sheets
; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display: none; } .ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height: 1em; background-color: #888; background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); background-position: center center; background-repeat: no-repeat; color: #fff; border-radius: 3px; font-weight: bold; float: left; } .ui-checkbox .text { padding-left: 34px; background-position: center left 10px; } .ui-checkbox .left { padding-right: 34px; padding-left: 1.666em; background-position: center right 10px; } ...
....ui-checkbox > label:hover { cursor: pointer; } .ui-checkbox > input:checked + label { background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); background-color: #379b4a; } body { max-width: 1000px; margin: 0 auto; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } #container { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /******************************************************************************/ /******************************************************************************/ /* * preview area */ #preview {...
...h: 50px; height: 20px; marign: 0; padding: 0 0 0 10px; background: #555; border: 1px solid #555; border: none; color: #fff; float: left; } #unit-selection select option { background: #fff; color: #333; } #unit-selection select:hover { cursor: pointer; } #unit-selection .dropdown:before { content: ""; width: 18px; height: 20px; display: block; background-color: #555; background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png"); background-position: center center; background-repeat: no-repeat; top: 0px; right: 0px; position: absolute; z-index: 1; pointer-events: none; } #unit-selection .unit-top-left { top: 0; left: 0; display: none; } #unit-selection .unit-top-left-w { top: -22px; left: 30px; } #unit-selection .unit-top-left-h { top: 20px; le...
Using multiple backgrounds - CSS: Cascading Style Sheets
that is, the following background properties can be specified as a list, one per background: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.
... example in this example, three backgrounds are stacked: the firefox logo, an image of bubbles, and a linear gradient: html <div class="multi-bg-example"></div> css .multi-bg-example { width: 100%; height: 400px; background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; } result (if image does not appear in codepen, click the 'tidy' button in the css section) as you can see here, the firefox logo (listed first within background-image) is on top, directly above the bubbles graphic, followed by...
... the gradient (listed last) sitting underneath all previous 'images'.
Introduction to the CSS basic box model - CSS: Cascading Style Sheets
the content area, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player.
...it often has a background color or background image.
...when there is a background (background-color or background-image) set on a box, it extends to the outer edge of the border (i.e.
Handling Overflow in Multicol - CSS: Cascading Style Sheets
for example, the situation could happen when an image in a column is wider than the column-width value or the width of the column based on the number of columns declared with column-count.
...you can see an example of this below, with an image of the expected rendering as, at the time of writing, browsers deal with this differently.
... if you want an image to size down to fit the column box, the standard responsive images solution of setting max-width: 100% will achieve that for you.
background-blend-mode - CSS: Cascading Style Sheets
the background-blend-mode css property sets how an element's background images should blend with each other and with the element's background color.
... blending modes should be defined in the same order as the background-image property.
... if the blending modes' and background images' list lengths are not equal, it will be repeated and/or truncated until lengths match.
box-decoration-break - CSS: Cascading Style Sheets
the specified value will impact the appearance of the following properties: background border border-image box-shadow clip-path margin padding syntax /* keyword values */ box-decoration-break: slice; box-decoration-break: clone; /* global values */ box-decoration-break: initial; box-decoration-break: inherit; box-decoration-break: unset; the box-decoration-break property is specified as one of the keyword values listed below.
...the border-radius, border-image, and box-shadow are applied to each fragment independently.
... the background is also drawn independently for each fragment, which means that a background image with background-repeat: no-repeat may nevertheless repeat multiple times.
contain - CSS: Cascading Style Sheets
WebCSScontain
| style | paint ] examples simple layout the markup below consists of a number of articles, each with content: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> </article> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> each <article> and <img> is given a border, and the images are floated: img { float: left; border: 3px solid black; } article { border: 1px solid black; } float interference if we were to insert another image at the bottom of the first article, a large portion of the dom tree may be re-laid out or repainted, and this would also interfere with the layout of the second article: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> ...
... <p>content here.</p> <img src="i-just-showed-up.jpg" alt="social"> </article> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> img { float: left; border: 3px solid black; } article { border: 1px solid black; } as you can see, because of the way floats work, the first image ends up inside the area of the second article: fixing with contain if we give each article the contain property with a value of content, when new elements are inserted the browser understands it only needs to recalculate the containing element's subtree, and not anything outside it: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> <img src="i-just-showed-up.jpg" alt="social"> </articl...
...e> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> img { float: left; border: 3px solid black; } article { border: 1px solid black; contain: content; } this also means that the first image no longer floats down to the second article, and instead stays inside it's containing element's bounds: specifications specification status comment css containment module level 1the definition of 'contain' in that specification.
brightness() - CSS: Cascading Style Sheets
the brightness() css function applies a linear multiplier to the input image, making it appear brighter or darker.
...a value under 100% darkens the image, while a value over 100% brightens it.
... a value of 0% will create an image that is completely black, while a value of 100% leaves the input unchanged.
drop-shadow() - CSS: Cascading Style Sheets
the drop-shadow() css function applies a drop shadow effect to the input image.
... a drop shadow is effectively a blurred, offset version of the input image's alpha mask, drawn in a specific color and composited below the image.
...the box-shadow property creates a rectangular shadow behind an element's entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself.
<gradient> - CSS: Cascading Style Sheets
WebCSSgradient
the <gradient> css data type is a special type of <image> that consists of a progressive transition between two or more colors.
... <div class="conic-gradient">conic gradient</div> div { width: 200px; height: 200px; } .conic-gradient { background: conic-gradient(lightpink, white, powderblue); } specifications specification status comment css images module level 4the definition of '<gradient>' in that specification.
... working draft adds conic-gradient css images module level 3the definition of '<gradient>' in that specification.
mask-border-width - CSS: Cascading Style Sheets
if the image does not have the required intrinsic dimension, the corresponding border-width is used instead.
... formal definition initial valueautoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrelative to width/height of the mask border image areacomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete formal syntax [ <length-percentage> | <number> | auto ]{1,4}where <length-percentage> = <length> | <percentage> examples basic usage this property doesn't appear to be supported anywhere yet.
... mask-border-width: 30 fill; chromium-based browsers support an outdated version of this property — mask-box-image-width — with a prefix: -webkit-mask-box-image-width: 20px; note: the mask-border page features a working example (using the out-of-date prefixed border mask properties supported in chromium), so you can get an idea of the effect.
mask-position - CSS: Cascading Style Sheets
the mask-position css property sets the initial position, relative to the mask position layer set by mask-origin, for each defined mask image.
... formal definition initial valuecenterapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to size of mask painting area minus size of mask layer image (see the text for background-position)computed valueconsists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.animation typerepeatable list of simple list of length, percentage, or calc formal syntax <position>#where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ ...
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting mask position css #wrapper { border: 1px solid black; width: 250px; height: 250px; } #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: no-repeat; mask-position: top right; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="wrapper"> <div id="masked"> </div> </div> <select id="maskposition"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bottom</option> <option value...
<a>: The Anchor element - HTML: Hypertext Markup Language
WebHTMLElementa
shapeobsolete since html5 the shape of the hyperlink’s region in an image map.
... note: use the <area> element for image maps instead.
... using the download attribute to save a <canvas> as a png to save a <canvas> element’s contents as an image, you can create a link with a download attribute and the canvas data as a data: url: example painting app with save link html <p>paint by holding down the mouse button and moving it.
<area> - HTML: Hypertext Markup Language
WebHTMLElementarea
the html <area> element defines a hot-spot region on an image, and optionally associates it with a hypertext link.
... alt a text string alternative to display on browsers that do not display images.
... the text should be phrased so that it presents the user with the same kind of choice as the image would offer when displayed without the alternative text.
<pre>: The Preformatted Text element - HTML: Hypertext Markup Language
WebHTMLElementpre
example html <p>using css to change the font color is easy.</p> <pre> body { color: red; } </pre> result accessibility concerns it is important to provide an alternate description for any images or diagrams created using preformatted text.
... the alternate description should clearly and concisely describe the image or diagram's content.
... a combination of the <figure> and <figcaption> elements, supplemented by a combination of an id and the aria role and aria-labelledby attributes allow the preformatted text to be announced as an image, with the figcaption serving as the image's alternate description.
<textarea> - HTML: Hypertext Markup Language
WebHTMLElementtextarea
styling with css <textarea> is a replaced element — it has intrinsic dimensions, like a raster image.
...other major browsers place the insertion point at the beginning of the text.notes a default background-image gradient is applied to all <textarea> elements, which can be disabled using background-image: none.ie full support yesopera full support yessafari full support yeswebview android full support yeschrome android ...
...other major browsers place the insertion point at the beginning of the text.notes a default background-image gradient is applied to all <textarea> elements, which can be disabled using background-image: none.opera android full support yessafari ios full support yesnotes full support yesnotes notes unlike other major browsers, a default style of opacity: 0.4 is applied t...
Evolution of HTTP - HTTP
http has evolved from an early protocol to exchange files in a semi-trusted laboratory environment, to the modern maze of the internet, now carrying images, videos in high resolution and 3d.
... at this point, a typical request and response looked like this: get /mypage.html http/1.0 user-agent: ncsa_mosaic/2.0 (windows 3.1) 200 ok date: tue, 15 nov 1994 08:12:31 gmt server: cern/3.0 libwww/2.17 content-type: text/html <html> a page with an image <img src="/myimage.gif"> </html> followed by a second connection and request to fetch the image (followed by a response to that request): get /myimage.gif http/1.0 user-agent: ncsa_mosaic/2.0 (windows 3.1) 200 ok date: tue, 15 nov 1994 08:12:32 gmt server: cern/3.0 libwww/2.17 content-type: text/gif (image content) these novelties have not been introduced as concerted effort, but as a try-...
...ttp/1.1 host: developer.cdn.mozilla.net user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: */* accept-language: en-us,en;q=0.5 accept-encoding: gzip, deflate, br referer: https://developer.mozilla.org/docs/glossary/simple_header 200 ok age: 9578461 cache-control: public, max-age=315360000 connection: keep-alive content-length: 3077 content-type: image/png date: thu, 31 mar 2016 13:34:46 gmt last-modified: wed, 21 oct 2015 18:27:50 gmt server: apache (image content of 3077 bytes) http/1.1 was first published as rfc 2068 in january 1997.
Content negotiation - HTTP
in http, content negotiation is the mechanism that is used for serving different representations of a resource at the same uri, so that the user agent can specify which is best suited for the user (for example, which language of a document, which image format, or which content encoding).
... the accept header is defined by the browser, or any other user-agent, and can vary according to the context, like fetching an html page or an image, a video, or a script: it is different when fetching a document entered in the address bar or an element linked via an <img>, <video> or <audio> element.
... width indicates the resource width in physical pixels (in other words the intrinsic size of an image).
Feature-Policy - HTTP
legacy-image-formats controls whether the current document is allowed to display images in legacy formats.
... oversized-images controls whether the current document is allowed to download and display large images.
... web-share controls whether or not the current document is allowed to use the navigator.share() of web share api to share text, links, images, and other content to arbitrary destiations of user's choice, e.g.
Index - HTTP
WebHTTPHeadersIndex
browsers set adequate values for this header depending on the context where the request is done: when fetching a css stylesheet a different value is set for the request than when fetching an image, video or a script.
... 38 csp: img-src csp, directive, http, reference, security the http content-security-policy img-src directive specifies valid sources of images and favicons.
... 117 x-dns-prefetch-control dns, http, header the x-dns-prefetch-control http response header controls dns prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as urls for items referenced by the document, including images, css, javascript, and so forth.
Save-Data - HTTP
a value of on indicates explicit user opt-in into a reduced data usage mode on the client, and when communicated to origins allows them to deliver alternative content to reduce the data downloaded such as smaller image and video resources, different markup and styling, disabled polling and automatic updates, and so on.
... examples the vary header ensures that the content is cached properly (for instance ensuring that the user is not served a lower-quality image from the cache when save-data header is no longer present [e.g.
... with save-data: on request: get /image.jpg http/1.0 host: example.com save-data: on response: http/1.0 200 ok content-length: 102832 vary: accept-encoding, save-data cache-control: public, max-age=31536000 content-type: image/jpeg [...] without save-data request: get /image.jpg http/1.0 host: example.com response: http/1.0 200 ok content-length: 481770 vary: accept-encoding, save-data cache-control: public, max-age=31536000 content-type: image/jpeg [...] specifications specification title draft-grigorik-http-client-hints-03, section 7: save-data http client hints ...
An overview of HTTP - HTTP
WebHTTPOverview
a complete document is reconstructed from the different sub-documents fetched, for instance text, layout description, images, videos, scripts, and more.
...due to its extensibility, it is used to not only fetch hypertext documents, but also images and videos or to post content to servers, like with html form results.
...it then parses this file, making additional requests corresponding to execution scripts, layout information (css) to display, and sub-resources contained within the page (usually images and videos).
Redirections in HTTP - HTTP
obviously, this method only works with html, and cannot be used for images or other types of content.
...rvername example.com redirect / https://www.example.com </virtualhost> the url https://example.com/ will be redirected to https://www.example.com/, as will any files or directories under it (https://example.com/some-page will be redirected to https://www.example.com/some-page) redirectmatch does the same, but takes a regular expression to define a collection of affected urls: redirectmatch ^/images/(.*)$ https://images.example.com/$1 all documents in the images/ directory will redirect to a different domain.
... nginx in nginx, you create a specific server block for the content you want to redirect: server { listen 80; server_name example.com; return 301 $scheme://www.example.com$request_uri; } to apply a redirect to a directory or only certain pages, use the rewrite directive: rewrite ^/images/(.*)$ https://images.example.com/$1 redirect; rewrite ^/images/(.*)$ https://images.example.com/$1 permanent; iis in iis, you use the <httpredirect> element to configure redirections.
Promise.any() - JavaScript
const perr = new promise((resolve, reject) => { reject('always fails'); }); promise.any([perr]).catch((err) => { console.log(err); }) // expected output: "aggregateerror: no promise in promise.any was resolved" displaying the first image loaded in this example, we have a function that fetches an image and returns a blob.
... we use promise.any() to fetch a couple of images and display the first one available (i.e.
...status: ${response.status}`); } else { return response.blob(); } }) } let coffee = fetchanddecode('coffee.jpg'); let tea = fetchanddecode('tea.jpg'); promise.any([coffee, tea]).then(value => { let objecturl = url.createobjecturl(value); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); }) .catch(e => { console.log(e.message); }); specifications specification promise.any ...
<semantics> - MathML
beware that <annotation-xml> elements are only recognized, if the encoding attribute is set to one of the following: "application/mathml-presentation+xml" "mathml-presentation" "svg1.1" "text/html" "image/svg+xml" "application/xml".
..."mathml-content", "mathml-presentation", "application/openmath+xml", "image/png") cd the content dictionary that contains the annotation key symbol.
... <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mi>y</mi> </mrow> <!-- content mathml --> <annotation-xml encoding="mathml-content"> <apply> <plus/> <apply> <power/> <ci>x</ci> <cn type="integer">2</cn> </apply> <ci>y</ci> </apply> </annotation-xml> <!-- annotate an image --> <annotation encoding="image/png" src="some/path/formula.png"/> <!-- annotate tex --> <annotation encoding="application/x-tex"> x^{2} + y </annotation> </semantics> </math> specifications specification status comment mathml 3.0the definition of 'mixing markup languages for mathematical expressions' in that specification.
The "codecs" parameter in common media types - Web media technologies
02 image characteristics are unknown, or are to be determined by the application 03 reserved for future use by itu or iso/iec 04 bt.470 system m, ntsc (standard definition television in the united states) 05 bt.470 system b, g; bt.601; bt.1358 625; bt.1700 625 pal and 625 secam 06 bt.601 525; bt...
... 10 smpte st 428 (d-cinema distribution master: image characteristics).
... defines the uncompressed image characteristics for dcdm.
target - SVG: Scalable Vector Graphics
WebSVGAttributetarget
g" target="_blank"> <text x="0" y="60">open link in new tab or window</text> </a> <a href="https://developer.mozilla.org" target="_top"> <text x="0" y="100">open link in this tab or window</text> </a> </svg> usage notes value _self | _parent | _top | _blank | <xml-name> default value _self animatable yes _replace the current svg image is replaced by the linked content in the same rectangular area in the same frame as the current svg image.
... _self the current svg image is replaced by the linked content in the same browsing context as the current svg image.
... _parent the immediate parent browsing context of the svg image is replaced by the linked content, if it exists and can be securely accessed from this document.
SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
image module image implemented.
... feimage implemented.
... document fragments (bug 455986) aren't supported in <svg:feimage>.
Getting started - SVG: Scalable Vector Graphics
the background is set to red by drawing a rectangle <rect> that covers the complete image area.
... the svg file can be referenced with an object element: <object data="image.svg" type="image/svg+xml" /> likewise an iframe element can be used: <iframe src="image.svg"></iframe> an img element can theoretically be used too.
...for normal svg files, servers should send the http headers: content-type: image/svg+xml vary: accept-encoding for gzip-compressed svg files, servers should send the http headers: content-type: image/svg+xml content-encoding: gzip vary: accept-encoding you can check that your server is sending the correct http headers with your svg files by using the network monitor panel or a site such as websniffer.cc.
Introduction - SVG: Scalable Vector Graphics
it can be used to create an image either by specifying all the lines and shapes necessary, by modifying already existing raster images, or by a combination of both.
... the image and its components can also be transformed, composited together, or filtered to change their appearance completely.
... starting from there, the svg image can become arbitrarily complex.
Paths - SVG: Scalable Vector Graphics
WebSVGTutorialPaths
this rotates the ellipse so that it is aligned with its minor axis along the path direction, as shown by the second ellipse in the example image.
... for the unrotated ellipse in the image above, there are only two different arcs and not four to choose from because the line drawn from the start and end of the arc goes through the center of the ellipse.
...the two ellipses are just mirror images of each other.
Positions - SVG: Scalable Vector Graphics
this effectively zooms in on the 100x100 unit area and enlarges the image to double size.
... the current mapping (for a single element or the whole image) of user units to screen units is called user coordinate system.
...(however, the device may decide, what it understands as one pixel.) lengths in the svg file with specific dimensions, like "in" or "cm", are then calculated in a way that makes them appear 1:1 in the resulting image.
Tools for SVG - SVG: Scalable Vector Graphics
other renderers several projects exist that can create a raster image from an svg source.
... imagemagick is one of the most famous command-line image processing tools.
...usage of headless browsers such as slimerjs and phantomjs are also popular for this purpose, as the image produced is closer to what the svg will look like in the browser.
Loading Content Scripts - Archive of obsolete content
at this point, content scripts are able to interact with the dom content, but externally-referenced stylesheets and images may not have finished loading.
... "end" loads the scripts after all content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires.
Content Scripts - Archive of obsolete content
at this point, content scripts are able to interact with the dom content, but externally-referenced stylesheets and images may not have finished loading.
... "end": load the scripts after all content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires.
page-mod - Archive of obsolete content
name: contentscriptwhen type: string by default, content scripts are attached after all the content (dom, js, css, images) for the document has been loaded, at the time the window.onload event fires.
...e option takes a single string that may take any one of the following values: "start": load content scripts immediately after the document element is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) has been loaded, at the time the window.onload event fires var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*", contentscript: 'window.alert("matched!");', contentscriptwhen: "start" }); if you specify "start" for contentscriptwhen, your scripts will not be able to interact with the document's dom right away (although they could listen for window.onl...
page-worker - Archive of obsolete content
this may take one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires this property is optional and defaults to "end".
...this may have one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.
panel - Archive of obsolete content
this may take one of the following values: "start": load content scripts immediately after the document element for the panel is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the panel has been loaded, at the time the window.onload event fires this property is optional and defaults to "end".
...this may have one of the following values: "start": load content scripts immediately after the document element for the panel is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the panel has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under addon.options property.
content/symbiont - Archive of obsolete content
this may take one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires this property is optional and defaults to "end".
...this may have one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.
ui/button/action - Archive of obsolete content
each key-value pair specifies an icon: each value specifies an image file as a resource:// url or relative path.
... each key must be a numeric string such as "16", or "32", which represents the size in pixels of the corresponding image.
ui/button/toggle - Archive of obsolete content
each key-value pair specifies an icon: each value specifies an image file as a resource:// url or relative path.
... each key must be a numeric string such as "16", or "32", which represents the size in pixels of the corresponding image.
Add a Context Menu Item - Archive of obsolete content
so: the user clicks the item the content script's click event fires, and the content script retrieves the selected text and sends a message to the add-on the add-on's message event fires, and the add-on code's handler function is passed the selected text, which it logs more options adding an image you can add an image to a context menu item with the image option.
...typically you'd store the image in your add-on's "data" directory, and construct the url using self.data.url(): var self = require("sdk/self"); var contextmenu = require("sdk/context-menu"); var menuitem = contextmenu.item({ label: "log selection", context: contextmenu.selectioncontext(), contentscript: 'self.on("click", function () {' + ' var text = window.getselection().tostring();' + ' self.postmessage(text);' + '});', image: self.data.url("icon-16.png"), onmessage: function (selectiontext) { console.log(selectiontext); } }); adding an access key new in firefox 35.
Boxes - Archive of obsolete content
ue="jjj"/> <label value="kkk"/> <label value="lll"/> <label value="mmm"/> <label value="nnn"/> <label value="ooo"/> <label value="ppp"/> <label value="qqq"/> <label value="rrr"/> <label value="sss"/> <label value="ttt"/> <label value="uuu"/> <label value="vvv"/> <label value="www"/> <label value="xxx"/> <label value="yyy"/> <label value="zzz"/> </hbox> </window> images if you put image in the contents, you should probably add align="start" attribute to the box.
... this keeps the image from stretching inside the box: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box align="start" style="display:block"> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <textbox /> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <button label="hello"/> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> </box> </window> ...
Forms related code snippets - Archive of obsolete content
image preview before upload the filereader.prototype.readasdataurl() method can be useful, for example, to get a preview of an image before uploading it.[article] this example shows how to use it in this way.
...for a full compatibility code you can see our crossbrowser possible solution for image preview.
HTML to DOM - Archive of obsolete content
efox) frame.setattribute("id", "sample-frame"); frame.setattribute("name", "sample-frame"); frame.setattribute("type", "content"); frame.setattribute("collapsed", "true"); document.getelementbyid("main-window").appendchild(frame); // or // document.documentelement.appendchild(frame); // set restrictions as needed frame.webnavigation.allowauth = false; frame.webnavigation.allowimages = false; frame.webnavigation.allowjavascript = false; frame.webnavigation.allowmetaredirects = true; frame.webnavigation.allowplugins = false; frame.webnavigation.allowsubframes = false; // listen for load frame.addeventlistener("load", function (event) { // the document of the html in the dom var doc = event.originaltarget; // skip blank page or frame if (doc.location.
...e" height="0"> <iframe type="content" src="" name="donkey-browser" hidden="false" id="donkey-browser" height="0"/> </vbox> then, in your extension's "load" event handler: onload: function() { donkeybrowser = document.getelementbyid("donkey-browser"); if (donkeybrowser) { donkeybrowser.style.height = "0px"; donkeybrowser.webnavigation.allowauth = true; donkeybrowser.webnavigation.allowimages = false; donkeybrowser.webnavigation.allowjavascript = false; donkeybrowser.webnavigation.allowmetaredirects = true; donkeybrowser.webnavigation.allowplugins = false; donkeybrowser.webnavigation.allowsubframes = false; donkeybrowser.addeventlistener("domcontentloaded", function (e) { donkeyfire.donkeybrowser_onpageload(e); }, true); } with that code, we obtain a reference to the if...
Extension Versioning, Update and Compatibility - Archive of obsolete content
since it is being displayed outside of a normal webpage context it is heavily sanitized, which means there are few formatting options available and scripting and images aren't allowed.
...see image below.
Adding sidebars - Archive of obsolete content
one common use for a stack is to have an image background that stretches horizontally and vertically depending on the size of the foreground object: <stack> <hbox flex="1"> <image src="chrome://xulschoolhello/skin/stack-bg.png" flex="1" /> </hbox> <hbox> <!-- some content here.
... --> </hbox> </stack> this workaround is necessary because you can't have an background image stretch using css.
The Box Model - Archive of obsolete content
any xul interface can be broken down into the following basic components: boxes text images alignment and flexibility widths and heights margins and paddings menus, toolbar buttons, and even the most complex elements in xul are composed of these simple ingredients.
...a common exception to this rule is when your css is directly related to images, where you'll usually handle measurements in pixels (px).
The Essentials of an Extension - Archive of obsolete content
the skin section has the files that define most of the look and feel of the ui (using css and images, just like web pages).
...you can easily recognize the access keys on windows because the letter that corresponds to the access key is underlined, as in the following image: most user interface controls have the accesskey attribute, and you should use it.
User Notifications and Alerts - Archive of obsolete content
the appendnotification method takes the message, id, image (32x32), level and buttons.
...the image can have any size, but it is recommended that you use a medium, fixed size.
Tabbed browser - Archive of obsolete content
var url = "https://developer.mozilla.org"; var tab = gbrowser.addtab(null, {relatedtocurrent: true}); gsessionstore.settabstate(tab, json.stringify({ entries: [ { title: url } ], usertypedvalue: url, usertypedclear: 2, lastaccessed: tab.lastaccessed, index: 1, hidden: false, attributes: {}, image: null })); reusing tabs rather than open a new browser or new tab each and every time one is needed, it is good practice to try to re-use an existing tab which already displays the desired url--if one is already open.
...the attributes to which changes result in this event being sent are: label crop busy image selected function exampletabattrmodified(event) { var tab = event.target; // now you can check what's changed on the tab } // during initialization var container = gbrowser.tabcontainer; container.addeventlistener("tabattrmodified", exampletabattrmodified, false); // when no longer needed container.removeeventlistener("tabattrmodified", exampletabattrmodified, false); notification...
Misc top level - Archive of obsolete content
images, tables, and mysterious gapsalmost no matter when you started creating web pages, odds are pretty high you have one or more designs based on the classic "convoluted tables and lots of images" paradigm.
...back in the early days, this approach worked, because browsers would usually make a table cell exactly as wide and tall as an image it contained.no proxy for configurationthis document provides a comprehensive discussion of the manual proxy feature "no proxy for:", including configuration issues, testing and bugs.same-origin policy for file: urisin gecko 1.8 or earlier, any two file: uris are considered to be same-origin.
Making a Mozilla installation modifiable - Archive of obsolete content
mozilla's user interface is made up of xul (described below), xbl (a topic for another tutorial), javascript, css, and image files.
... xul, xbl, javascript, and css files are all in text format and can be edited in a standard text editor, while image files are in binary gif, jpg, or png format and must be edited with an image editing program.
Specifying the appearance - Archive of obsolete content
for this we have to first create four icons, one for each tinderbox state (none, success, test failed, and busted), then create a set of css rules that displays the icon corresponding to the current tinderbox state: statusbarpanel#tinderbox-status { list-style-image: url("chrome://navigator/content/tb-nostatus.png"); } statusbarpanel#tinderbox-status[status="success"] { list-style-image: url("chrome://navigator/content/tb-success.png"); } statusbarpanel#tinderbox-status[status="testfailed"] { list-style-image: url("chrome://navigator/content/tb-testfailed.png"); } statusbarpanel#tinderbox-status[status="busted"] { list-style-image: url("chrome://navigator/content/tb-bust...
... installed), so we'll put this stylesheet in a file called tinderstatus.css in the same directory as navigator.xul and reference it at the top of that file right under the global stylesheet reference: <?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.css" type="text/css"?> our css rules use the list-style-image property to define an image to appear when our status bar panel, identified by its id attribute, has a given value for its status attribute.
Getting Started - Archive of obsolete content
(yes, this means that the structure of your new directory and classic.jar will be slightly different.) creating the install files icon.png and preview.png these are some png images containing the icon and the preview of the theme.
...css files the css files in these directories tell the browser how to display the buttons and other controls, where to put the images, what border and padding it should put around them, and so on.
Creating a hybrid CD - Archive of obsolete content
mkhybrid -o ~/party.iso -r -j -hfs -v mozilla.party -map ~/hfsmapping ~/party/ cdrecord -v speed=2 dev=0,6,0 ~/party.iso its also handy to be able to mount an image file to test it.
...example filename mapping file used by mkhybrid for hfs # # extn xlate creator type comment .hqx ascii 'sitx' 'text' "binhex file" .zip raw 'sitx' 'zip ' "zip file" .gz raw 'sitx' 'zip ' "gzip file" .tgz raw 'sitx' 'zip ' "tar.gz gzip file" .tar raw 'sitx' 'tarf' "tar file" .tif raw '8bim' 'tiff' "photoshop tiff image" .doc raw 'mswd' 'wdbn' "word file" .mov raw 'tvod' 'moov' "quicktime movie" .bin raw 'sitx' 'bina' "mac binary" .h ascii 'cwie' 'text' "c/c++ header file" .c ascii 'cwie' 'text' "c source file" .cp ascii 'cwie' 'text' "c++ source file" .cpp ascii 'cwie' 'text' "c++ source file" .exp ascii 'cwie' 'tex...
Overview of how downloads work - Archive of obsolete content
things like file|save page as, save image as, etc.
...click on the images to display them "stand-alone" in the browser, which may resize them to fit the browser window.
XUL Events - Archive of obsolete content
this event may also be used on the image element, or an element that accepts an image attribute, and will be fired when the image has finished loading.
... for images, this event does not bubble up the element tree, so it will not conflict with the window's load event.
Menus - Archive of obsolete content
ndow links context-openlinkintab opens a link in a new tab links context-bookmarklink bookmarks a link links context-savelink saves a link links context-sendlink sends a link in an email links context-copyemail copies an email address mailto: links context-copylink copies a link links context-viewimage views an image at full size images context-copyimage-contents copies an image to the clipboard images context-copyimage copies the url of an image to the clipboard images context-saveimage saves an image images context-sendimage sends an image in an email images context-setdesktopbackground sets an image as the desktop ...
...background images context-blockimage blocks an image images context-back goes back a page context-forward goes forward a page context-reload reloads a page context-stop stops loading a page context-bookmarkpage bookmarks a page context-savepage saves a page context-sendpagetodevice send page to device context-sendpage send page in an email context-viewbgimage views a background image context-undo undo editable text context-cut cuts to clipboard editable text context-copy copies to clipboard context-paste pastes from clipboard editable text context-delete ...
List of commands - Archive of obsolete content
list of commands (grouped by type) nsdomwindowcontroller commands (generally legal when there is a selection): cmd_copy - copy a selection to the clipboard cmd_cut - cut a selection into the clipboard cmd_paste - paste a selection from the clipboard cmd_selectall cmd_selectnone cmd_copylink cmd_copyimagelocation cmd_copyimagecontents cmd_scrolltop cmd_scrollbottom cmd_scrollpageup cmd_scrollpagedown cmd_scrolllineup cmd_scrolllinedown cmd_scrollleft cmd_scrollright cmd_selectcharprevious cmd_selectcharnext cmd_wordprevious cmd_wordnext cmd_selectwordprevious cmd_selectwordnext cmd_beginline cmd_endline cmd_selectbeginline cmd_selectendline cmd_selectlineprevious cmd_selectlin...
..._bm_movebookmark cmd_bm_newbookmark cmd_bm_newfolder cmd_bm_newseparator cmd_bm_open cmd_bm_openinnewtab cmd_bm_openinnewwindow cmd_bm_paste cmd_bm_properties cmd_bm_rename cmd_bm_selectall cmd_bm_setnewbookmarkfolder cmd_bm_setnewsearchfolder cmd_bm_setpersonaltoolbarfolder cmd_bm_sortfolder cmd_bm_sortfolderbyname cmd_close cmd_closeothertabs cmd_closewindow cmd_copy cmd_copyimage cmd_copylink cmd_cut cmd_delete cmd_editpage cmd_findtypelinks cmd_findtypetext cmd_gotoline cmd_handlebackspace cmd_handleshiftbackspace cmd_minimizewindow cmd_neweditor cmd_neweditordraft cmd_neweditortemplate cmd_newnavigator cmd_newnavigatortab cmd_newtabwithtarget cmd_openhelp cmd_paste - paste a selection from the clipboard cmd_printsetup cmd_quit cmd_redo cmd_savepage...
Floating Panels - Archive of obsolete content
a label for the titlebar may be set using the label attribute, as in the following example: <panel id="info-panel" noautohide="true" titlebar="normal" label="image properties"> closing a floating panel unlike other panels, a floating panel does not close when clicking outside of it.
...<panel id="info-panel" noautohide="true" titlebar="normal" label="image properties" close="true"> the hidepopup method may be used to manually close a popup.
MenuModification - Archive of obsolete content
<script> function addsubmenu() { var popup = document.getelementbyid("file-popup"); var newmenu = document.createelement("menu"); popup.appendchild(newmenu); newmenu.label = "new"; newmenu.appenditem("document", "doc"); newmenu.appenditem("image", "image"); } </script> <menu label="file" onpopupshowing="addsubmenu()"> <menupopup id="file-popup"/> </menu>.
... <script> function addsubmenu() { var popup = document.getelementbyid("file-popup"); if (popup.haschildnodes()) return; var newmenu = document.createelement("menu"); popup.appendchild(newmenu); newmenu.label = "new"; newmenu.appenditem("document", "doc"); newmenu.appenditem("image", "image"); } </script> the haschildnodes method may be used to check if a node has any children.
OpenClose - Archive of obsolete content
on windows, the context menu can also be opened by pressing the menu key on the keyboard (the key on many keyboards next to control with a menu image) or by pressing shift+f10.
...this may be confusing to understand, so see positioning a popup which describes this process in more detail and provides images which show the possible values and how a popup would be aligned for each value.
listitem-iconic - Archive of obsolete content
« xul reference home listitem-iconic use this class to have an image appear on the listitem.
... specify the image using the image attribute.
menu-iconic - Archive of obsolete content
« xul reference home menu-iconic use this class to have an image appear on the menu.
... specify the image using the image attribute.
menuitem-iconic - Archive of obsolete content
« xul reference home menuitem-iconic use this class to have an image appear on the menuitem.
... specify the image using the image attribute.
Building Trees - Archive of obsolete content
the src attribute may be used to set an image to appear in a cell.
...it’s not normal to put photos in a tree like this—instead, the images would be used for icons.
Multiple Rules - Archive of obsolete content
"http://www.xulplanet.com/rdf/myphotos"> <template> <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> </query> <rule> <where subject="?title" rel="equals" value="canal"/> <action> <button uri="?photo" image="?photo" label="view" orient="vertical"/> </action> </rule> <rule> <action> <image uri="?photo" src="?photo"/> </action> </rule> </template> </hbox> this template contains a query with two rules.
...in fact, the content for this photo is that of the first rule with the button, whereas the content for the other photos is that of the second rule with the normal images.
Sorting Results - Archive of obsolete content
here is a sample of how to specify this in the rdf/xml datasource: <rdf:rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:r="http://www.xulplanet.com/rdf/" xmlns:nc="http://home.netscape.com/nc-rdf#"> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg"> <r:date nc:parsetype="date">1125966767295<r:date> </rdf:description> </rdf:rdf> you can also specify parsetype="integer" for numbers which will allow sorting numerically.
...for rdf datasources, you can also use an rdf predicate for sorting instead of a variable: <hbox datasources="template-guide-photos5.rdf" sort="http://purl.org/dc/elements/1.1/title" sortdirection="ascending" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <vbox class="box-padded" uri="rdf:*"> <image src="rdf:*"/> <label value="rdf:http://purl.org/dc/elements/1.1/title"/> </vbox> </template> </hbox> in this example, the generated items will be sorted by title.
Tree Widget Changes - Archive of obsolete content
<treecell/> <treecell value="true"/> you need to specify the checkbox image with css for the checkbox to display.
... (do not set id of the column to be 'checked' it will cause problems with the css) treechildren::-moz-tree-checkbox(checked) { /* css for checked cells */ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } in addition, checkmark columns support editing: <tree editable="true"> <treecols> <treecol type="checkbox" editable="true"> ...
Adding HTML Elements - Archive of obsolete content
<html:img src="banner.jpg"/> <html:input type="checkbox" value="true"/> <html:table> <html:tr> <html:td> a simple table </html:td> </html:tr> </html:table> these examples will create an image from the file banner.jpg, a checkbox and a single-cell table.
... <html:hr/> </html:div> expense report 1 what i did last summer <button id="yes" label="yes"/> <button id="no" label="no"/> as can be seen in the image, the text inside the div tag was displayed but the other text (expense report 1 and what i did last summer) was not.
Input Controls - Archive of obsolete content
if you open this window, you will see something much like that shown in the image.
... example 3 : source view <radiogroup> <radio id="orange" label="orange"/> <radio id="violet" selected="true" label="violet"/> <radio id="yellow" label="yellow"/> </radiogroup> attributes like buttons, check boxes and radio buttons are made up of a label and an image, where the image switches between checked and unchecked when it is pressed.
Introduction - Archive of obsolete content
for extensions, the xul files and associated scripts and images used by an application would be packaged into a single file and downloaded and installed by the user.
...in addition, you may have extra files for images or for platform specific data.
Open and Save Dialogs - Archive of obsolete content
fp.appendfilters(nsifilepicker.filterhtml | nsifilepicker.filterimages); fp.appendfilters(nsifilepicker.filtertext | nsifilepicker.filterall); the first example will add filters for html and for image files.
...on some platforms, each filter will be separate and the user can choose between html files and image files.
Templates - Archive of obsolete content
you can see in the image that the set of buttons has been created, one for each bookmark.
... rules in the image of the earlier example, you may have noticed that the third button is simply a button with hyphens on it.
Tree Box Objects - Archive of obsolete content
the final value that may be returned is 'image' if there is an image in the tree cell and the coordinate corresponds to a location where the image is.
...the cell part type may be used to get the coordinates of either the text, the entire cell, the twisty or the image in the cell.
Using Spacers - Archive of obsolete content
as you can see in the image, by placing a flex attribute on the find button, it resizes when the window does.
...you may have noticed something about the image above.
XBL Example - Archive of obsolete content
you could put anything within the pages, however, this widget might be useful for a set of images.
... the following xul file produces the result in the image.
XUL Questions and Answers - Archive of obsolete content
there are several options for displaying graphics and animation in xul: <html:canvas> svg <xul:image> (static images or animated gif; support for apng is planned) plugins templates with non-rdf datasources?
...this should be used in place of the image attribute.
Accessibility/XUL Accessibility Reference - Archive of obsolete content
button <button label="<!--button text-->" /> <button id="butwrap1"> <label control="butwrap1"> <!--wrapped label--> </label> </button> <button id='butwrap2'> <label control="butwrap2" value="<!--this-->" /> <label control="butwrap2" value="is" /> <label control="butwrap2" value="a" /> <label control="butwrap2" value="button" /> </button> <button image="images/img.xbm" tooltiptext="<!--button text-->"/> note that in the third example, only the first label is read browser jaws 7.10 issues to use a browser element with html, the type="content" attribute should be specified.
... image <image src="images/img.xbm" tooltiptext='<!--image label-->'/> key see keyboard shortcut tutorial keyset see keyboard shortcut tutorial listbox <label control='listid'><!--label text--></label> <listbox id="listid"> <listitem value="val" label="<!--item text-->"/> </listbox> <label control='listid2' value='<!--list labe...
notificationbox - Archive of obsolete content
re(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata appendnotification( label , value , image , priority , buttons, eventcallback ) return type: element create a new notification and display it.
... value - value used to identify the notification image - url of image to appear on the notification.
window - Archive of obsolete content
--> <window id="rootwnd" title="register online!" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox> <hbox> <image src="application_form.png"/> <description>register online!</description> </hbox> <groupbox align="start"> <caption label="your information"/> <radiogroup> <vbox> <hbox> <label control="your-fname" value="enter first name:"/> <textbox id="your-fname" value="johan"/> </hbox> <hbox> <label control="yo...
... lightweightthemesfooter type: id specifies the id of an element to which a lightweight theme's footer image will be applied.
XULRunner Hall of Fame - Archive of obsolete content
ieditweb users can add pages, images, forms, ecommerce many special effects and much more using the xulrunner based client.
...latest release 0.5 febuary 2010 - source daim (fr) / daim (english) superb tool for image analysis build on top of a professional imagelib.
Archived Mozilla and build documentation - Archive of obsolete content
how to edit images, extract zip files, and how to modify css.
... mozilla uses standard gif, png, and jpeg images for the buttons and css to style everything else in the interface.
2006-10-20 - Archive of obsolete content
how to create firefox extension (chrome) to add images next to urls ?
... question regarding how to make a firefox extension that would insert an image next to all links in the loaded web pages similar to the mcafee siteadvisor extension.
Browser Detection and Cross Browser Support - Archive of obsolete content
an example of this approach involved testing for the existence of the document.images object.
...the classic example is: if (document.images) { // code which processes the images } the advantage to feature detection is that it will work regardless of the vendor/version.
-ms-scroll-chaining - Archive of obsolete content
in this case the image container has its -ms-scroll-chaining property set to chained, which means that when a user is scrolling through a nested scrollable element and it hits its boundary the parent scrollable element will begin to scroll in the same direction.
... .imagecontainer { -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-content-zoom-limit-min: 100%; -ms-content-zoom-limit-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-x: snaplist(100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; width: 480px; height: 270px; overflow: auto; } specifications not part of any specification.
::-ms-browse - Archive of obsolete content
-ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust background-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box...
...dow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-browse example html <label>select image: <input type="file"></label> css input[type="file"]::-ms-browse { color: red; background-color: yellow; } result output example specifications not part of any specification.
Displaying a graphic with audio samples - Archive of obsolete content
the following example shows how to take samples from an audio stream and display them behind an image (in this case, the mozilla logo), giving the impression that the image is built from the samples.
...0)"; ctx.fillrect (0,0, canvas.width, canvas.height); ctx.fillstyle = "rgb(255,255,255)"; for (var i = 0; i < signal.length; i++ ) { // multiply spectrum by a zoom value magnitude = signal[i] * 1000; // draw rectangle bars for each frequency bin ctx.fillrect(i * 4, canvas.height, 3, -magnitude); } ctx.drawimage(document.getelementbyid('mozlogo'),0,0, canvas.width, canvas.height); } var audio = document.getelementbyid('audio-element'); audio.addeventlistener('mozaudioavailable', audioavailable, false); audio.addeventlistener('loadedmetadata', loadedmetadata, false); </script> </body> </html> ...
Anatomy of a video game - Game development
these games present two images to the user; they accept their click (or touch); they interpret the input as a success, failure, pause, menu interaction, etc.; finally, they calculate an updated scene resulting from that input.
... sleep (unless an event interrupts the browser's nap) until the monitor is ready for your image (vsync) and repeat.
Building up a basic demo with A-Frame - Game development
in our case we will use a simple color, but it could also be an image, etc.
... the controls are already working: you can use the mouse for looking around and the keyboard for movement (try the w, a, s, and d keys.) there's even an "enter vr mode" button in the bottom right corner of the screen, to allow you to shift to full screen, stereoscopic image viewing if you have the necesary vr hardware set up and ready.
WebVR — Virtual Reality for the Web - Game development
using the webvr api the webvr api is based on two concepts — sending stereoscopic images to both lenses in your headset and receiving positional data for your head from the sensor, and those two are handled by hmdvrdevice (head-mounted display virtual reality device) and positionsensorvrdevice.
...it's not easy to achieve, but it doesn't require realistic images.
Desktop gamepad controls - Game development
ctx.drawimage(img, playerx, playery); requestanimationframe(draw); } in this case, we are checking the four d-pad buttons (0-3) and the a button (11).
...there's an option wired up to show screengamepadhelp, which holds an image with all the button controls explained — if the y button is pressed and held, the help becomes visible; when it is released the help diappears.
Desktop mouse and keyboard controls - Game development
essed variable to true and in the draw function perform the action assigned to it — move the ship left: function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); if(rightpressed) { playerx += 5; } else if(leftpressed) { playerx -= 5; } if(downpressed) { playery += 5; } else if(uppressed) { playery -= 5; } ctx.drawimage(img, playerx, playery); requestanimationframe(draw); } the draw function first clears the whole canvas — we draw everything from scratch on every single frame.
...that way, if you already implemented the buttons as shown in the mobile touch controls article, it will work out of the box on the desktop too: var buttonenclave = this.add.button(10, 10, 'logo-enclave', this.clickenclave, this); the button will be placed ten pixels from the top left corner of the screen, use the logo-enclave image, and will execute the clickenclave() function when clicked.
Square tilemaps implementation: Scrolling maps - Game development
note: when writing this article, we assumed previous reader knowledge of canvas basics such as how get a 2d canvas context, load images, etc., which is all explained in the canvas api tutorial, as well as the basic information included in our tilemaps introduction article.
... for (var c = startcol; c <= endcol; c++) { for (var r = startrow; r <= endrow; r++) { var tile = map.gettile(c, r); var x = (c - startcol) * map.tsize + offsetx; var y = (r - startrow) * map.tsize + offsety; if (tile !== 0) { // 0 => empty tile this.ctx.drawimage( this.tileatlas, // image (tile - 1) * map.tsize, // source x 0, // source y map.tsize, // source width map.tsize, // source height math.round(x), // target x math.round(y), // target y map.tsize, // target width map.t...
Animations and tweens - Game development
next, we will load the spritesheet — put the following line at the bottom of your preload() function: game.load.spritesheet('ball', 'img/wobble.png', 20, 20); instead of loading a single image of the ball we can load the whole spritesheet — a collection of different images.
...if you look again at the wobble.png image, you'll see there are three frames.
Build the brick field - Game development
rendering the brick image next, let's load the image of the brick — add the following load.image() call just below the others: function preload() { // ...
... game.load.image('brick', 'img/brick.png'); } you also need to grab the brick image from github and save it in your /img directory.
Visual-js game engine - Game development
add->new game object (form dialog for define type of new game object ) add->quick code (make your work faster - add usually code blocks) resources - explorer view for images and audios , you can drag or edit also need to execute node build_resources for creating resources object for engine.
... features : tile's background draw for images (alias sprite - but for now there's no sprite and frame by frame animation methods).
API - MDN Web Docs Glossary: Definitions of Web-related terms
for example: the getusermedia api can be used to grab audio and video from a user's webcam, which can then be used in any way the developer likes, for example, recording video and audio, broadcasting it to another user in a conference call, or capturing image stills from the video.
... the web animations api can be used to animate parts of a web page — for example, to make images move around or rotate.
Alpha (alpha channel) - MDN Web Docs Glossary: Definitions of Web-related terms
in a typical image file, the color channels describe how much red, green, and blue are used to make up the final color.
... learn more general knowledge alpha compositing on wikipedia rgba color model on wikipedia channel (digital image) on wikipedia technical reference css color ...
Effective connection type - MDN Web Docs Glossary: Definitions of Web-related terms
2g 1400ms 70 kbps the network is suited for transfers of small images.
... 3g 270ms 700 kbps the network is suited for transfers of large assets such as high resolution images, audio, and sd video.
Hotlink - MDN Web Docs Glossary: Definitions of Web-related terms
a hotlink (also known as an inline link) is an object (typically an image) directly linked to from another site.
... for example, an image hosted on site1.com is shown directly on site2.com.
SVG - MDN Web Docs Glossary: Definitions of Web-related terms
scalable vector graphics (svg) is a 2d vector image format based on an xml syntax.
... as a vector image format, svg graphics can scale infinitely, making them invaluable in responsive design, since you can create interface elements and graphics that scale to any screen size.
lossy compression - MDN Web Docs Glossary: Definitions of Web-related terms
lossy compression is widely used in image formats.
... although there is no obvious difference quality between the two images above, the size of the second image has been significantly reduced, using lossy compression.
MDN Web Docs Glossary: Definitions of Web-related terms
property (javascript) protocol prototype prototype-based programming proxy server pseudo-class pseudo-element pseudocode public-key cryptography python q quality values quaternion quic r rail random number generator raster image rdf real user monitoring (rum) recursion reference reflow regular expression rendering engine repo reporting directive request header resource timing response header responsive web design rest rgb ril robots.txt round trip time (rtt) ...
... alpn at-rule attack byte-order mark character set client cryptosystem debug digital signature execution flex-direction glsl interface library memory management routers self-executing anonymous function stylesheet vector image ...
WAI-ARIA basics - Learn web development
as an example, you could use aria-labelledby to specify that a key description contained in a <div> is the label for multiple table cells, or you could use it as an alternative to image alt text — specify existing information on the page as an image's alt text, rather than having to repeat it inside the alt attribute.
... dynamic content updates content loaded into the dom can be easily accessed using a screenreader, from textual content to alternative text attached to images.
What is accessibility? - Learn web development
caring about accessibility demonstrates good ethics and morals, which improves your public image.
...test early and often, ideally running automated tests to pick up on programmatically detectable missing features (such as missing image alternative text or bad link text — see element relationships and context) and doing some testing with disabled user groups to see how well more complex site features work for them.
Test your skills: The Box Model - Learn web development
your final result will look like the image below.
... try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.
The box model - Learn web development
this is shown in the image below.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Test your skills: Flexbox - Learn web development
the finished example should look like the image below.
... flex layout four in this final task arrange these items into rows as in the image.
How CSS is structured - Learn web development
write css rules that apply styling to different html elements: transform background-image, in particular gradient values color, in particular rgb/rgba/hsl/hsla values @rules css @rules (pronounced "at-rules") provide instruction for what css should perform or how it should behave.
...for example 2-value shorthands, which set padding/margin for top/bottom, then left/right */ padding: 10px 15px 15px 5px; is equivalent to these four lines of code: padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px; this one line: background: red url(bg-graphic.png) 10px 10px repeat-x fixed; is equivalent to these five lines: background-color: red; background-image: url(bg-graphic.png); background-position: 10px 10px; background-repeat: repeat-x; background-attachment: fixed; later in the course, you will encounter many other examples of shorthand properties.
Typesetting a community school homepage - Learn web development
you could paste the html and fill in the css into one of these online editors, and use this url to point the background image.
...it is up to you whether you choose a custom bullet image or something else.
What is the difference between webpage, website, web server, and search engine? - Learn web development
a web page can embed a variety of different types of resources such as: style information — controlling a page's look-and-feel scripts — which add interactivity to the page media — images, sounds, and videos.
... note: browsers can also display other documents such as pdf files or images, but the term web page specifically refers to html documents.
What is a URL? - Learn web development
such resources can be an html page, a css document, an image, etc.
... the html language — which will be discussed later on — makes extensive use of urls: to create links to other documents with the <a> element; to link a document with its related resources through various elements such as <link> or <script>; to display media such as images (with the <img> element), videos (with the <video> element), sounds and music (with the <audio> element), etc.; to display other html documents with the <iframe> element.
What is a web server? - Learn web development
(for example, html documents, images, css stylesheets, and javascript files) a web server connects to the internet and supports physical data interchange with other devices connected to the web.
... hosting files first, a web server has to store the website's files, namely all html documents and their related assets, including images, css stylesheets, javascript files, fonts, and video.
What is accessibility? - Learn web development
the basics of web accessibility a few necessities for basic web accessibility include: whenever your site needs an image to convey meaning, include text as an alternative for visually-challenged users or those with slow connections.
... if the technical side interests you more, you could learn how to embed images in webpages.
Getting started with the Web - Learn web development
do i have images inserted on my page?
...what background images and colors should be used to decorate your website?
Use HTML to solve common problems - Learn web development
LearnHTMLHowto
how to create a list of items with html how to stress or emphasize content how to indicate that text is important how to display computer code with html how to annotate images and graphics how to mark abbreviations and make them understandable how to add quotations and citations to web pages how to define terms with html hyperlinks one of the main reasons for html is making navigation easy with hyperlinks, which can be used in many different ways: how to create a hyperlink how to create a table of contents with html images & multimedia how to add imag...
... advanced images & multimedia how to add a responsive image to a webpage how to add vector image to a webpage how to add a hit map on top of an image internationalization html is not monolingual.
Introduction to HTML - Learn web development
a navigation menu?), and embed content such as images and videos into a page.
... document and website structure as well as defining individual parts of your page (such as "a paragraph" or "an image"), html is also used to define areas of your website (such as "the header," "the navigation menu," or "the main content column.") this article looks into how to plan a basic website structure and how to write the html to represent this structure.
Build your own function - Learn web development
add the following block just above the closing curly brace (}) of your function: if (msgtype === 'warning') { msg.style.backgroundimage = 'url(icons/warning.png)'; panel.style.backgroundcolor = 'red'; } else if (msgtype === 'chat') { msg.style.backgroundimage = 'url(icons/chat.png)'; panel.style.backgroundcolor = 'aqua'; } else { msg.style.paddingleft = '20px'; } here, if the msgtype parameter is set as 'warning', the warning icon is displayed and the panel's background color is set to red.
... previous overview: building blocks next in this module making decisions in your code — conditionals looping code functions — reusable blocks of code build your own function function return values introduction to events image gallery ...
Client-side storage - Learn web development
you can store videos, images, and pretty much anything else in an indexeddb instance.
...you can store just about anything you want, including complex objects such as video or image blobs.
Fetching data from the server - Learn web development
in this case we want to return our response as an image file, and the data format we use for that is blob (the term is an abbreviation of "binary large object" and can basically be used to represent large file-like objects, such as images or video files).
...these are not very readable, but you can see what one looks like by opening up the can store app, ctrl-/right-clicking on an image, and selecting the "view image" option (which might vary slightly depending on what browser you are using).
Introduction to web APIs - Learn web development
image source: overloaded plug socket by the clear communication people, on flickr.
...for example, you might draw shapes such as rectangles or circles, import an image onto the canvas, and apply a filter to it such as sepia or grayscale using the canvas api, or create a complex 3d scene with lighting and textures using webgl.
Manipulating documents - Learn web development
try opening this up in your browser — it is a very simple page containing a <section> element inside which you can find an image, and a paragraph with a link inside.
... take a local copy of the dom-example.html page and the image that goes along with it.
What is JavaScript? - Learn web development
html is the markup language that we use to structure and give meaning to our web content, for example defining paragraphs, headings, and data tables, or embedding images and videos in the page.
... javascript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else.
Measuring performance - Learn web development
performance entries are also created in indirect ways; such as loading a resource, like an image.
... measuring performance multimedia: images multimedia: video javascript performance best practices.
The "why" of web performance - Learn web development
building websites requires html, css, and javascript, typically including binary file types such as images and video.
... measuring performance multimedia: images multimedia: video javascript performance best practices.
Web performance - Learn web development
multimedia: images the lowest hanging fruit of web performance is often media optimization.
...in this article we discuss the impact images have on performance, and the methods to reduce the number of bytes sent per image.
Deployment and next steps - Learn web development
create a .gitlab-ci.yml file inside your project's root and give it the following content: image: node:latest pages: stage: deploy script: - npm install - npm run build artifacts: paths: - public only: - master here we are telling gitlab to use an image with the latest version of node to build our app.
...to do this, we just remove the leading slashes (/) from the /global.css, /build/bundle.css, and /build/bundle.js urls, like this: <title>svelte to-do list</title> <link rel='icon' type='image/png' href='favicon.png'> <link rel='stylesheet' href='global.css'> <link rel='stylesheet' href='build/bundle.css'> <script defer src='build/bundle.js'></script> do this now.
Handling common accessibility problems - Learn web development
the simplest text alternative available is the humble alt attribute, which we should include on all images that contain relevant content.
... this should contain a description of the image that successfully conveys its meaning and content on the page, to be picked up by a screenreader and read out to the user.
Introduction to automated testing - Learn web development
with the in-built image editor, highlight your screenshot before you push it to your colleagues.
... note: all the videos and images captured inside a test session are captured inside the gallery, test logs, and issue tracker at lambdatest.
Command line crash course - Learn web development
the next images show the command prompts available in windows — there’s a good range of options from the "cmd" program to "powershell" — which can be run from the start menu by typing the program name.
... example, if you wanted to go to a directory called src, located inside a directory called project, located on the desktop, you could type these three commands to get there from your home folder: cd desktop cd project cd src but this a waste of time — instead, you can type one command, with the different items in the path separated by forward slashes, just like you do when specifying paths to images or other assets in css, html, or javascript code: cd desktop/project/src note that including a leading slash on your path makes the path absolute, for example /users/your-user-name/desktop.
Accessibility API cross-reference
input n/a hypertext link that can be on image or text link n/a link <a> <link> according to the pdf 1.7 spec, a <link> must not be a direct child of a <toci> (table of contents item).
... landmark n/a hypertext link that can be on image or text link n/a link <a> <link> according to the pdf 1.7 spec, a <link> must not be a direct child of a <toci> (table of contents item).
Mozilla accessibility architecture
this is the case for: nshtmlimageaccessible: in msaa an image accessible can have accessible children if it has an image map.
... the children are the image map areas, which are in a different part of the dom tree.
Gecko info for Windows accessibility vendors
role_graphic xul: <image> html: <img> sets state_linked if within link.
...animated images use role_graphic with state_animated.
Index
686 theme concepts theme, add-on themes developed using the webextensions api in firefox enable you to change the look of the browser by adding images to the header area of the firefox browser; this is the area behind the menu bar, toolbars, address bar, search bar, and tab strip.
...once you have defined the colors and image for your theme, the generator will submit your new theme to amo.
Chrome registration
the providers work together to supply a complete set of chrome for a particular window, from the images on the toolbar buttons to the files that describe the text, content, and appearance of the window itself.
...typically a skin provider will provide css files and images.
The Firefox codebase: CSS Guidelines
another adjustment to be aware of is that gecko removes all the background-image when high contrast mode is enabled.
... consider using an actual <img> tag (for html documents) or list-style-image (for xul documents) if rendering the image is important.
mozbrowsercontextmenu
for example, if the user clicked on an image nested in an <a> tag, two menus are available — one with information related to the image, and one for the link.
...in the case of an image or video context menu, this is the src of the image or video clicked on to get the context menu.
HTML parser threading
speculative loads when the tree builder on the parser thread encounters html script, stylesheet link, video (with a poster frame), base or img or svg script, style or image elements, preload operations are appended to a speculative load queue.
...when the executor acts on speculative loads, it starts speculative http fetches for images (including video poster frames), style sheets and scripts.
How to implement a custom autocomplete search component
he style hint for the result at the given index */ getstyleat: function(index) { if (!this._comments || !this._comments[index]) return null; // not a category label, so no special styling if (index == 0) return 'suggestfirst'; // category label on first line of results return 'suggesthint'; // category label on any other line of results }, /** * gets the image for the result at the given index * * @return {string} the uri to the image to display */ getimageat : function (index) { return ''; }, /** * get the final value that should be completed when the user confirms * the match at the given index.
...}, /** * get the style hint for the result at the given index */ getstyleat: function(index) { if (!this._comments[index]) return null; // not a category label, so no special styling if (index == 0) return "suggestfirst"; // category label on first line of results return "suggesthint"; // category label on any other line of results }, /** * get the image for the result at the given index * the return value is expected to be an uri to the image to display */ getimageat : function (index) { return ""; }, /** * get the final value that should be completed when the user confirms * the match at the given index.
PopupNotifications.jsm
popupiconurl a string specifying the url of the image to be displayed in the popup.
... this is normally specified in css using list-style-image and the .popup-notification-icon[popupid=...] selector.
Localization sign-off reviews
from the dropdown menu next to the appropriate approval flags (see image).
... the diff generated for sign-off reviews the image to the right illustrates the revisions diff between the current release revision and your newly proposed release revision.
Basics
mathml background image html content <div class="background"></div> <math display="block"> <mrow> <msub> <mi>z</mi> <mi>&alpha;</mi> </msub> <mrow> <mo>(</mo> <mi>f</mi> <mo>)</mo> </mrow> <mo>=</mo> <mfrac> <mn>1</mn> <mrow> <mn>2</mn> <mi>i</mi> <mo>&thinspace;</mo> <mi>cos</mi> <mo>(</mo> <mfrac> <mrow> <mi>&alpha;</mi> <mi>&pi;</mi> </mrow> <mn>2</mn> </mfrac> <mo>)</mo> </mrow> </mfrac> <mrow> <msub> <mo>&int...
...> <mo stretchy='false'>(</mo> <mi>i</mi> <mi>z</mi> <mo stretchy='false'>)</mo> <msup> <mrow> <mo>(</mo> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>&alpha;</mi> </msup> </mrow> <mrow> <msup> <mi>e</mi> <mrow> <mn>2</mn> <mi>&pi;</mi> <mi>z</mi> </mrow> </msup> <mo>-</mo> <mn>1</mn> </mrow> </mfrac> </mrow> <mi>d</mi> <mi>z</mi> </mrow> </math> css content [class="background"] { background-image: url(http://www.mozilla.org/images/mozilla-banner.gif); opacity: 0.2; position: absolute; left: 0; width: 100%; height: 58px; } ...
MathML Demo: <mfrac> - fractions
and this is an example where the bevelled attribute is set inside the radical y 2 - t 2 1 ( 1 + | y 2 - t 2 | 2 ) and this shows a combination with a background image at a desired opacity mathml background image html content <div class="background"></div> <math display="block"> <mrow> <msub> <mi>z</mi> <mi>&alpha;</mi> </msub> <mrow> <mo>(</mo> <mi>f</mi> <mo>)</mo> </mrow> <mo>=</mo> <mfrac> <mn>1</mn> <mrow> <mn>2</mn> <mi>i</mi> <mo>&thinspace;</mo> <mi>cos</mi> <mo>(</mo> <mfrac> <mrow> <mi>&alpha;</mi> <mi>&pi;</mi> </...
...hy='false'>(</mo> <mi>i</mi> <mi>z</mi> <mo stretchy='false'>)</mo> <msup> <mrow> <mo>(</mo> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>&alpha;</mi> </msup> </mrow> <mrow> <msup> <mi>e</mi> <mrow> <mn>2</mn> <mi>&pi;</mi> <mi>z</mi> </mrow> </msup> <mo>-</mo> <mn>1</mn> </mrow> </mfrac> </mrow> <mi>d</mi> <mi>z</mi> </mrow> </math> css content [class="background"] { background-image: url(http://www.mozilla.org/images/mozilla-banner.gif); opacity: 0.2; position: absolute; left: 0; width: 100%; height: 58px; } ...
Mozilla DOM Hacking Guide
when should domclassinfo be used to add a new interface to an existing dom object to expose a new dom object to javascript to add a new js external constructor, like "new image()" to bypass the default behavior of xpconnect to implement a "replaceable" property to mess with the prototypes of dom objects example of functionality implemented using domclassinfo: constructors of dom objects in the global scope (e.g.
... node) setting up custom prototypes for those dom objects new image(), new option() window.history[index] document.<formname> how to add a new interface to an existing dom object for this section, we will use the simple example of the domimplementation dom object.
Midas
insertimage a uri.
... this command will insert an image (referenced by the given url) at the insertion point.
Hacking Tips
for example in '[rr 28496 607198]reftest test-start | file:///home/bgirard/mozilla-central/tree/image/test/reftest/bmp/bmpsuite/b/wrapper.html?badpalettesize.bmp' z would be 607198.
... break 'mozilla::dom::canvasrenderingcontext2d::drawwindow(nsglobalwindow&, double, double, double, double, nsastring_internal const&, unsigned int, mozilla::errorresult&)' cont break 'presshell::renderdocument(nsrect const&, unsigned int, unsigned int, gfxcontext*)' set print object on set $x = <your x value> set $y = <your y value> print &((cairo_image_surface_t*)athebescontext->mdt.mrawptr->msurface).data[$y * ((cairo_image_surface_t*)athebescontext->mdt.mrawptr->msurface).stride + $x * ((cairo_image_surface_t*)athebescontext->mdt.mrawptr->msurface).depth / 8] watch *(char*)<address of previous command> (note: if you set a watch on the previous expression gdb will watch the expression and run out of watchpoint) rr with emacs within emacs, do m-x gud-gdb and replace the comman...
mozIAsyncFavicons
it's better to not use this function for chrome: icon uris since you can reference the chrome image yourself.
...it's better to not use this function for chrome: icon uris since you can reference the chrome image yourself.
nsIDocShell
allowimages boolean attribute stating whether or not images should be loaded.
...an active docshell is one that is currently visible, which means it's not a good candidate for optimizations such as image frame discarding.
nsIFeed
image nsiwritablepropertybag2 provides an image url and metadata, as defined by rss 2.
... type_image 2 an image feed, such as a photocast.
nsINavHistoryObserver
this is called the first time a resource (page, image, and so on.) is seen as well as every subsequent time.
... normally, transition types of transition_embed (corresponding to images in a page, for example) are not displayed in history results (unless includehidden is set).
nsINavHistoryResultNode
icon autf8string this uri can be used as an image source uri and will give you the favicon for the page.
... it is not the actual uri of the favicon, but, rather, is something that will resolve to the actual image.
nsIPermission
the nsipermission interface defines a "permission" object, which is used to allow or block objects (for example cookies, images) from certain sites based on user preferences.
... type acstring the type of permission: cookie, image, and so on.
nsITaskbarPreviewButton
hasborder boolean if true, the taskbar should draw a border around this button's image.
... image imgicontainer the icon displayed in the button.
nsITaskbarPreviewController
omcanvasrenderingcontext2d ctx); boolean drawthumbnail(in nsidomcanvasrenderingcontext2d ctx, in unsigned long width, in unsigned long height); boolean onactivate(); void onclick(in nsitaskbarpreviewbutton button); void onclose(); attributes attribute type description height unsigned long the height in pixels of the preview image.
... width unsigned long the width in pixels of the preview image.
XPCOM Interface Reference by grouping
scrollevent nsidommoztouchevent nsidomorientationevent nsidomprogressevent nsidomsimplegestureevent nsidragdrophandler nsidragservice nsidragsession html nsiaccessibilityservice nsiaccessiblecoordinatetype nsiaccessibledocument nsiaccessibleeditabletext nsiaccessibleevent nsiaccessiblehyperlink nsiaccessiblehypertext nsiaccessibleimage nsiaccessibleprovider nsiaccessibleretrieval nsiaccessiblerole nsiaccessiblescrolltype nsiaccessibleselectable nsiaccessiblestates nsiaccessibletable nsiaccessibletext nsiaccessibletreecache nsiaccessiblevalue nsiaccessnode nsisyncmessagesender script nsiscriptableunescapehtml nsiscriptableunicodeconverter nsiscripterror nsi...
... dom nsiwebbrowser nsiwebbrowserpersist cache nsicache nsicachedeviceinfo nsicacheentrydescriptor nsicacheentryinfo nsicachelistener nsicachemetadatavisitor nsicacheservice nsicachesession nsicachevisitor nsicachingchannel nsiselectionimageservice chrome nsisearchengine nsisearchsubmission nsiwebbrowserchrome nsiwindowcreator nsiwindowmediator nsiwindowwatcher clipboard nsiclipboard nsiclipboardcommands nsiclipboarddragdrophooklist nsiclipboarddragdrophooks nsiclipboardhelper nsiclipboardowner ...
XPCOM
often, compiled xpcom components are called 'binary' or 'native'.xpcom category image-sniffing-servicesin versions of firefox prior to firefox 3, extensions could add decoders for new image types.
... however, such decoders relied on servers sending correct mime types; images sent with incorrect mime types would not be correctly displayed.xpcom gluethe xpcom glue is a static library which component developers and embedders can link against.
XUL Overlays
MozillaTechXULOverlays
in xul, attributes control important features of the skin like image sources, as in the following example, where an overlay destructively overwrites the image source in the base file with a replacement.
... in the base file, the html image element points to a netscape gif icon: <html:img id="foo" src="netscapeimage.gif"/> in the overlay, an element with the same id attribute specifies a different image, and that image is superimposed on top of the original netscape image as part of the merge process: <html:img id="foo" src="mozillaimage.gif"/> when the base file references an overlay file which contains the html image element above, the new src attribute is superimposed over the original, and the mozilla icon replaces the netscape icon.
Mozilla technologies
accessibility api implementation detailsthese pages contain documentation on mozilla specific implementation details of assistive technology apis.animated png graphicsapng is an extension of the portable network graphics (png) format, adding support for animated images.
... apng is a simpler alternative to mng, providing a spec suitable for the most common usage of animated images on the internet.docshelldocshell is the second iteration of what originally started out as webshell.
Tips and Tricks from the newsgroups
extensions load an extension in its own tab run shell scripts from an extension (for example, to create a symlink) get extension metadata call java from thunderbird extensions (also an example here, written for firefox but compatible with thunderbird 3.x) define a custom protocol handler to call an external program save attachment and send it repeat image display using css sprites messages use reminderfox to open a message in the default thunderbird message window (when messageuri, folderuri and gdbview are unknown) determine whether a message has been flagged as junk imap: getting message key of copied message by nsimsgcopyservice::copyfilemessage access the plain text content of the email body get information about attachment without...
... selecting message repeat image display using css sprites scan for new messages at startup and manually scan a folder initiated by user force listeners to run consecutively to prevent pop messages from getting garbled during message retrieval ...
Color vision simulation - Firefox Developer Tools
the following table shows a colorful image of a cat's face, and what it looks like in the various simulations.
... simulation image displayed none protanomaly (low red) deuteranomaly (low green) tritanomaly (low blue) protanopia (no red) deuteranopia (no green) tritanopia (no blue) contrast loss ...
Index - Firefox Developer Tools
72 view background images in the rules view, you can see a preview of images specified using background-image.
... 88 frame rate frame rate is the rate at which a video device can produce images (or frames).
Network request list - Firefox Developer Tools
image thumbnails if the request is for an image, hovering over its filename shows a preview of the image in a tooltip: security icons the network monitor displays an icon in the domain column: this gives you extra information about the security status of the request: icon meaning https weak https (for example, a weak cipher was used) faile...
... mime-type:text/html mime-type:image/png mime-type:application/javascript is is:cached and is:from-cache shows only resources coming from cache.
Edit fonts - Firefox Developer Tools
the first image shows the font as it is used on the page with default settings.
... the second image shows the same font after selecting the "hi yeast hi gravity" variation.
Examine and edit HTML - Firefox Developer Tools
subtree modification attribute modification node removal use in console show dom properties show accessibility properties change pseudo-class hover active focus focus-within visited screenshot node scroll into view copy inner html outer html css selector css path xpath image data-url attribute paste inner html outer html before after as first child as last child expand all collapse all open link in new tab * open file in debugger * open file in style-editor * copy link address * * these options only appear in certain contexts, for example the "open file in style-editor" option only appears when you context-click over the top...
... (copy) image data-url copy image as a data:// url, if the selected element is an image.
UI Tour - Firefox Developer Tools
the following image shows the 2-pane layout: in 2-pane mode, the inspector includes the html pane, and the css pane, which can contain one of six tools: rules view layout view computed view changes view compatibility view (firefox developer edition 77 and later) fonts view animations view the following image shows the 3-pane mode (available from firefox 62 onwards) which moves the css rules view into a...
...the following image shows 3-pane mode: as you can see, the css pane has moved into the center of the inspector.
BaseAudioContext.createBuffer() - Web APIs
note: audio resampling is very similar to image resizing: say you've got a 16 x 16 image, but you want it to fill a 32x32 area: you resize (resample) it.
... the result has less quality (it can be blurry or edgy, depending on the resizing algorithm), but it works, and the resized image takes up less space.
Beacon API - Web APIs
one such technique is to delay the unload to submit data by creating an image element and setting its src attribute within the unload handler.
... as most user agents will delay the unload to complete the pending image load, data can be submitted during the unload.
Blob.type - Web APIs
WebAPIBlobtype
example this example asks the user to select a number of files, then checks each file to make sure it's one of a given set of image file types.
... var i, fileinput, files, allowedfiletypes; // fileinput is a htmlinputelement: <input type="file" multiple id="myfileinput"> fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (simliar to nodelist) files = fileinput.files; // our application only allows gif, png, and jpeg images allowedfiletypes = ["image/png", "image/jpeg", "image/gif"]; for (i = 0; i < files.length; i++) { // test if file.type is an allowed file type.
Body.blob() - Web APIs
WebAPIBodyblob
when the fetch is successful, we read a blob out of the response using blob(), put it into an object url using url.createobjecturl, and then set that url as the source of an <img> element to display the image.
... var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest) .then(response => response.blob()) .then(function(myblob) { var objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); specifications specification status comment fetchthe definition of 'blob()' in that specification.
Body.bodyUsed - Web APIs
WebAPIBodybodyUsed
when the fetch is successful, we read a blob out of the response using blob(), put it into an object url using url.createobjecturl, and then set that url as the source of an <img> element to display the image.
... html content <img class="my-image" src="https://udn.realityripple.com/samples/46/29059a2b39.png"> js content var myimage = document.queryselector('.my-image'); fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/delete_key1.jpg').then(function(response) { console.log(response.bodyused); var res = response.blob(); console.log(response.bodyused); return res; }).then(function(response) { var objecturl = url.createobjecturl(response); myimage.src = objecturl; }); specifications specification status comment fetchthe definition of 'bodyused' in t...
CSSPositionValue - Web APIs
let replacedel = document.getelementbyid( 'image' ); let position = new csspositionvalue( css.px(35), css.px(40) ); replacedel.attributestylemap.set( 'object-position', position ); console.log( position.x.value, position.y.value ); console.log( replacedel.computedstylemap().get('object-position') ); we set the object-position property, then check the values returned.
... #image { width: 300px; height: 300px; border: 1px solid black; background-color: #dededf; object-fit: none; } <p>check the developer tools to see the log in the console and to inspect the style attribute on the image.</p> <img id="image" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"/> ...
CSS Object Model (CSSOM) - Web APIs
rule cssvariablesmap cssviewportrule elementcssinlinestyle fontface fontfaceset fontfacesetloadevent geometryutils getstyleutils linkstyle medialist mediaquerylist mediaquerylistevent mediaquerylistlistener screen stylesheet stylesheetlist transitionevent several other interfaces are also extended by the cssom-related specifications: document, window, element, htmlelement, htmlimageelement, range, mouseevent, and svgelement.
... css typed object model cssimagevalue csskeywordvalue cssmathinvert cssmathmax cssmathmin cssmathnegate cssmathproduct cssmathsum cssmathvalue cssmatrixcomponent cssnumericarray cssnumericvalue cssperspective csspositionvalue cssrotate cssscale cssskew cssskewx cssskewy cssstylevalue csstransformcomponent csstransformvalue csstranslate cssunitvalue cssunparsedvalue cssvariablereferencevalue stylepropertymap stylepropertymapreadonly obsolete cssom interfaces cssprimitivevalue cssvalue cssvaluelist tutorials determining the dimensions of elements (it needs some updating as it was made in the dhtml/ajax era).
Using the CSS properties and values API - Web APIs
.registered { --registered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--registered)); transition: --registered 1s ease-in-out; } .registered:hover, .registered:focus { --registered: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455...
...; } <button class="registered">background registered</button> <button class="unregistered">background not registered</button> .registered { --registered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--registered)); transition: --registered 1s ease-in-out; } .registered:hover, .registered:focus { --registered: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } button { height: 40vh; display: block; width: 100%; font-size: 3vw; } window.css.registerproperty({ name: '--registered', syntax: '<color>', inherits: false, initialvalue: 'red', }); while n...
CanvasPattern.setTransform() - Web APIs
html <canvas id="canvas"></canvas> <svg id="svg1"></svg> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var svg1 = document.getelementbyid('svg1'); var matrix = svg1.createsvgmatrix(); var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); }; note that newer browser versions started to support dommatrix as an input to settransform(), so for example you could repla...
... see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <svg id="svg1" style="display:none"></svg> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code" style="height:120px"> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); };</textarea> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var textarea = document.getele...
CanvasRenderingContext2D.globalAlpha - Web APIs
the canvasrenderingcontext2d.globalalpha property of the canvas 2d api specifies the alpha (transparency) value that is applied to shapes and images before they are drawn onto the canvas.
...if we were to increase the step count (and thus draw more circles), the background would eventually disappear completely from the center of the image.
Compositing example - Web APIs
ment("dd"); var p = document.createelement("p"); p.textcontent = gcotext.pop(); dd.appendchild(p); var canvastodrawon = createcanvas(); var canvastodrawfrom = createcanvas(); var canvastodrawresult = createcanvas(); var ctx = canvastodrawresult.getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas1, 0, 0, width/2, height/2); ctx.globalcompositeoperation = pop; ctx.drawimage(canvas2, 0, 0, width/2, height/2); ctx.globalcompositeoperation = "source-over"; ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fillstyle = "#fff"; ctx.font = "14px arial"; ctx.filltext(pop, 5, height/2 - 5); ...
... ctx.restore(); var ctx = canvastodrawon.getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas1, 0, 0, width/2, height/2); ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fillstyle = "#fff"; ctx.font = "14px arial"; ctx.filltext('existing content', 5, height/2 - 5); ctx.restore(); var ctx = canvastodrawfrom.getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas2, 0, 0, width/2, height/2); ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fillstyle = "#fff"; ctx.font = "14px arial"; ctx.filltext('new content', ...
Drawing shapes with canvas - Web APIs
the difference between these can best be described using the image on the right.
...+ height - radius); ctx.arcto(x, y + height, x + radius, y + height, radius); ctx.lineto(x + width - radius, y + height); ctx.arcto(x + width, y + height, x + width, y + height-radius, radius); ctx.lineto(x + width, y + radius); ctx.arcto(x + width, y, x + width - radius, y, radius); ctx.lineto(x + radius, y); ctx.arcto(x, y, x, y + radius, radius); ctx.stroke(); } the resulting image looks like this: screenshotlive sample we won't go over this in detail, since it's actually surprisingly simple.
Canvas tutorial - Web APIs
the images on this page show examples of <canvas> implementations which will be created in this tutorial.
... in this tutorial basic usage drawing shapes applying styles and colors drawing text using images transformations compositing and clipping basic animations advanced animations pixel manipulation hit regions and accessibility optimizing the canvas finale ...
Clipboard.write() - Web APIs
WebAPIClipboardwrite
the clipboard method write() writes arbitrary data, such as images, to the clipboard.
...for copying images to the clipboard).
ClipboardItem - Web APIs
examples writing to clipboard here we're writing a new clipboarditem.clipboarditem() to the clipboard by requesting a png image using the fetch api, and in turn, the responses' blob() method, to create the new clipboarditem.
... async function writeclipimg() { try { const imgurl = '/myimage.png'; const data = await fetch(imgurl); const blob = await data.blob(); await navigator.clipboard.write([ new clipboarditem({ [blob.type]: blob }) ]); console.log('fetched image copied.'); } catch(err) { console.error(err.name, err.message); } } reading from the clipboard here we're returning all items on the clipboard via the clipboard.read() method.
DOMParser - Web APIs
WebAPIDOMParser
the possible values are the following: mimetype doc.constructor text/html document text/xml xmldocument application/xml xmldocument application/xhtml+xml xmldocument image/svg+xml xmldocument examples parsing xml once you have created a parser object, you can parse xml from a string using the parsefromstring() method: let parser = new domparser() let doc = parser.parsefromstring(stringcontainingxmlsource, "application/xml") error handling note that if the parsing process fails, the domparser does not throw an exception, but instead returns an...
... if the mime type is text/xml, the result will be an xmldocument if the mime type is image/svg+xml, the result will be an svgdocument if the mime type is text/html, the result will be an htmldocument let parser = new domparser() let doc = parser.parsefromstring(stringcontainingxmlsource, "application/xml") // returns a document, but not an svgdocument nor an htmldocument parser = new domparser(); doc = parser.parsefromstring(stringcontainingsvgsource, "image/svg+xml") // returns a ...
Document.readyState - Web APIs
interactive the document has finished loading and the document has been parsed but sub-resources such as images, stylesheets and frames are still loading.
... // but sub-resources such as images, stylesheets and frames are still loading.
Document Object Model (DOM) - Web APIs
element svgelement svgellipseelement svgfeblendelement svgfecolormatrixelement svgfecomponenttransferelement svgfecompositeelement svgfeconvolvematrixelement svgfediffuselightingelement svgfedisplacementmapelement svgfedistantlightelement svgfedropshadowelement svgfefloodelement svgfefuncaelement svgfefuncbelement svgfefuncgelement svgfefuncrelement svgfegaussianblurelement svgfeimageelement svgfemergeelement svgfemergenodeelement svgfemorphologyelement svgfeoffsetelement svgfepointlightelement svgfespecularlightingelement svgfespotlightelement svgfetileelement svgfeturbulenceelement svgfilterelement svgfilterprimitivestandardattributes svgfontelement svgfontfaceelement svgfontfaceformatelement svgfontfacenameelement svgfontfacesrcelement svgfontface...
...urielement svgforeignobjectelement svggelement svggeometryelement svgglyphelement svgglyphrefelement svggradientelement svggraphicselement svghatchelement svghatchpathelement svghkernelement svgimageelement svglineargradientelement svglineelement svgmarkerelement svgmaskelement svgmeshelement svgmeshgradientelement svgmeshpatchelement svgmeshrowelement svgmetadataelement svgmissingglyphelement svgmpathelement svgpathelement svgpatternelement svgpolylineelement svgpolygonelement svgradialgradientelement svgrectelement svgscriptelement svgsetelement svgsolidcolorelement svgstopelement svgstyleelement svgsvgelement svgswitchelement svgsymbolelement svgtextcontentelement svgtextelement svgtextpathelement svgtextpositioningelement sv...
EXT_sRGB - Web APIs
WebAPIEXT sRGB
constants this extension exposes the following constants, which can be used in the teximage2d(), texsubimage2d(), renderbufferstorage() and getframebufferattachmentparameter() methods.
... examples var ext = gl.getextension('ext_srgb'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, 0, ext.srgb_ext, 512, 512, 0, ext.srgb_ext, gl.unsigned_byte, image); specifications specification status comment ext_srgbthe definition of 'ext_srgb' in that specification.
Using Fetch - Web APIs
the code would look something like this: fetch('flowers.jpg') .then(response => { if (!response.ok) { throw new error('network response was not ok'); } return response.blob(); }) .then(myblob => { myimage.src = url.createobjecturl(myblob); }) .catch(error => { console.error('there has been a problem with your fetch operation:', error); }); supplying your own request object instead of passing a path to the resource you want to request into the fetch() call, you can create a request object using the request() constructor, and pass that in as a fetch() method argument: const myheaders =...
... new headers(); const myrequest = new request('flowers.jpg', { method: 'get', headers: myheaders, mode: 'cors', cache: 'default', }); fetch(myrequest) .then(response => response.blob()) .then(myblob => { myimage.src = url.createobjecturl(myblob); }); request() accepts exactly the same parameters as the fetch() method.
GlobalEventHandlers.onerror - Web APIs
a good example for this is when you are using an image tag, and need to specify a backup image in case the one you need is not available on the server for any reason.
... <img src="imagenotfound.gif" onerror="this.onerror=null;this.src='imagefound.gif';" /> the reason we have the this.onerror=null in the function is that the browser will be stuck in an endless loop if the onerror image itself generates an error.
HTMLFormElement.elements - Web APIs
syntax nodelist = htmlformelement.elements value an htmlformcontrolscollection containing all non-image controls in the form.
... the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms.
HTMLVideoElement - Web APIs
htmlvideoelement.poster is a domstring that reflects the poster html attribute, which specifies an image to show while no video data is available.
... htmlvideoelement.mozdecodedframes read only returns an unsigned long with the count of parsed video frames that have been decoded into images.
Headers() - Web APIs
WebAPIHeadersHeaders
example creating an empty headers object is simple: var myheaders = new headers(); // currently empty you could add a header to this using headers.append: myheaders.append('content-type', 'image/jpeg'); myheaders.get('content-type'); // returns 'image/jpeg' or you can add the headers you want as the headers object is created.
... in the following snippet we create a new headers object, adding some headers by passing the constructor an init object as an argument: var httpheaders = { 'content-type' : 'image/jpeg', 'accept-charset' : 'utf-8', 'x-my-custom-header' : 'zeke are cool' }; var myheaders = new headers(httpheaders); you can now create another headers object, passing it the first headers object as its init object: var secondheadersobj = new headers(myheaders); secondheadersobj.get('content-type'); // would return 'image/jpeg' — it inherits it from the first headers object specifications specification status comment fetchthe definition of 'headers()' in that specification.
Ajax navigation example - Web APIs
/* customizable constants */ stargetid = "ajax-content", sviewkey = "view_as", sajaxclass = "ajax-nav", /* not customizable constants */ rsearch = /\?.*$/, rhost = /^[^\?]*\?*&*/, rview = new regexp("&" + sviewkey + "\\=[^&]*|&*$", "i"), rendqstmark = /\?$/, oloadingbox = document.createelement("div"), ocover = document.createelement("div"), oloadingimg = new image(), opageinfo = { title: null, url: location.href }, ohttpstatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ { 100: "continue", 101: "switching protocols", 102: "processing", 200: "ok", 201: "created", 202: "accepted", 203: "non-authoritati...
...riant also negotiates (experimental)", 507: "insufficient storage", 508: "loop detected", 509: "unassigned", 510: "not extended", 511: "network authentication required" }; var oreq, bisloading = false, bupdateurl = false; oloadingbox.id = "ajax-loader"; ocover.onclick = abortreq; oloadingimg.src = "data:image/gif;base64,r0lgodlheaaqapiaap///waaamlcwkjcqgaaagjiyokcgpkskih/c05fvfndqvbfmi4waweaaaah/hpdcmvhdgvkihdpdgggywphegxvywquaw5mbwah+qqjcgaaacwaaaaaeaaqaaadmwi63p4wyklre2mioggznadomgyjrbexwroumcg2lmdewnhqlvsyod2mbzkydadka+diaaah+qqjcgaaacwaaaaaeaaqaaadnai63p5ojcegg4qmu7dmikrxqlfuydezigbmrvsaqhwctxxf7weyb4ag1xjihkmzsiukkhiaifkecqoaaaasaaaaabaaeaaaazyiujijk8pbyjdmlfyvbovjha70gu7xsujhmktwhpakzlo9hmaokwjz...
MediaMetadata.artwork - Web APIs
the artwork property of the mediametadata interface returns or sets an array of mediaimage objects representing images associated with playing media.
... syntax var artwork[] = mediametadata.artwork mediametadata.artwork = artwork[] value an array of mediaimage objects.
MediaStream.getVideoTracks() - Web APIs
example the following example, extracted from chrome's image capture / photo resolution sample, uses getvideotracks() to retrieve a track for passing to the imagecapture() constructor.
... var imagecapture; navigator.mediadevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); return imagecapture.getphotocapabilities(); }) specifications specification status comment media capture and streamsthe definition of 'getvideotracks()' in that specification.
MediaTrackConstraints - Web APIs
properties of image tracks whitebalancemode a string specifying one of "none", "manual", "single-shot", or "continuous".
... mediastream image capture working draft adds image constraints.
Notification.Notification() - Web APIs
badge: a usvstring containing the url of the image used to represent the notification when there isn't enough space to display the notification itself.
... image: a usvstring containing the url of an image to be displayed in the notification.
OES_texture_float - Web APIs
extended methods this extension extends webglrenderingcontext.teximage2d() and webglrenderingcontext.texsubimage2d(): the type parameter now accepts gl.float.
... examples var ext = gl.getextension('oes_texture_float'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, 0, gl.rgba, gl.rgba, gl.float, image); specifications specification status comment oes_texture_floatthe definition of 'oes_texture_float' in that specification.