img id attribute
The id attribute on the img element:
- → allows you to target an embedded image through img element using a unique name which is the value of its id
→ once the image has been targeted:
- CSS rules can be applied on it
- or scripts
- or you can link another element on page to that image - is a global attribute → can be applied on all html elements;
- when applied on the root element <html>, its value is inherited by all other html elements
Examples
| <img | attribute | = | "value(s)" | > | Examples | ||
|---|---|---|---|---|---|---|---|
| 10. | id | = | id name | < src="image.jpg" alt="alt text" id="ax"> "ax" = this value is unique per id per HTML page (only 1 id attribute can have this value / HTML page) |
Video demonstration img id attribute
HTML5 img id attribute Tutorial
| min | video details |
|---|---|
| 00:05 | video tutorial: id attribute on img |
| 00:10 | the id attribute on img allows you to target 1 specific image on page and do something: apply a script, a css rule, link an element to that image |
| 00:16 | 3 images are embedded on page |
| 00:23 | inside style element 2 css rules are defined: 1 rule / CSS id selector |
| 00:28 | the CSS rules refer to the type of the cursor: e-resize and wait; we will apply these rules to our images |
| 00:32 | by default the cursor type is: auto; |
| 00:53 | the cursor type for the first image is: e-resize |
| 00:59 | since an id is an unique identifier, the value of an id must be unique per page |
| 01:03 | 2 ids have the same value per page → this is wrong ! |
| 01:12 | the 2 ids have different values → this is correct |
| 01:08 | thus, we have: 1st image cursor type: e-resize 2nd image cursor type: wait 3rd image cursor type: auto |