Image <img />

Block-level/Inline?:Inline
Empty?:Yes
Required Attributes:src, alt
<img src="me.jpg" alt="picture of myself" />
the above img displays an image file named me.jpg from the same directory as the webpage

Image <img /> is used to create images. The source attribute, src, specifies the actual file that the image element will display, as a URL (see below for how to download an image) Make sure you know the extension; JPEGs are normally .jpg but you can occasionally find a .jpeg file. The alt attribute, short for alternate, should be a short description of the image for those who don't or can't display images. The alt may display while the image is downloading. CSS properties float, width, and height are commonly used.

Image Links

<a href="knowledgeDump.html"><img src="images/kd.jpg" alt="picture of knowedge dump" /></a>

Image links are images that can be clicked to link you somewhere. The intuition here is that the anchor makes something, often text, clickable but it can be any inline element(s), e.g. images, that can be made clickable. So, just put your img in an anchor that's an image link, as above. You can't even do it backwards since img is empty.

Downloading Images

  1. Go to the website with the picture you want to download. Locate the image.
  2. Right-Click it, Save Picture As... (or Save Image As...)
  3. Save it to the same directory that your webpage is in unless directed otherwise. If it has a long name this might be the time to rename it.
  4. When you refer to the image in the src attribute, use just the file name, e.g.... src="twitter.jpg"... (there should be no "http://..." protocol stuff unless you're hotlinking). Be careful about the extension (.png/.jpg/.jpeg/.tiff/.gif/.bmp/...) and be sure to include it in the file name for the src attribute.
The above assumes that you don't need a relative path (i.e. the file can be in the same directory as the webpage, not for Lab3).

img and JavaScript

The code:

<img id="bearpic" src="images/bears-1.jpg" alt=" cute cubs" onmouseover='alert(this.alt)' />
<br />
<button onclick="document.getElementById('bearpic').src='images/bear-7.jpg';
document.getElementById('bearpic').alt='Mama bear eats idiot who plays with cubs';">
Play with cubs?
</button>

Both the src and the alt attributes are accessible as properties of images objexts/nodes for JavaScript.

From www.hdpicturesofanimals.com
cute cubs


See also Assignment for another example.

Back to Knowledge Dump