 [](https://github.com/strawmelonjuice/hl-img/blob/main/LICENSE)
[](https://www.JSdelivr.com/package/npm/hl-img)
# hl-img
I added a custom element into my site for highlightable images, now I need to make it a repo so I don't lose track.
## NOTE:
> Google does not like the use of elements like these, mainly because browsers or bots that don't fire the javascript, will not be able to see any images. _Though Google's HTML-checker web.dev loads `hl-img` in their tests, allowing it to pass that test after all._
## How to embed
Thanks to the `defer` attribute, they'll load after the body is loaded, so you _can_ place them anywhere. However, for best reliability, please add this at the end of the ``.
### From JSdelivr
_Minified_
```html
```
For the extra-minified version, just use `https://cdn.jsdelivr.net/npm/hl-img@2/dist/hl-img.e.min.js`, instead.
_Unminified_
```html
```
### Version-specific
For version-specific JSdelivr's, browse .
NOTE: Versions before v2 worked really different. See the [old readme](https://github.com/strawmelonjuice/hl-img/blob/7def3ff19eae6368f18c0f7c38d44a4706d08170/README.md) for those.
## Install using NPM
```bash
npm i hl-img
```
And then embed it from your own host.
```html
```
## Attributes
### An example
```html
```
[This](https://strawmelonjuice.com/blog?p=posts/art/mousemouse-3.2) was my first use case of ``.
### Supported
- `preview` – The `preview`-attribute is used as the `src` attribute when the image is _not_ in highlight-mode. If not specified, will be inherited from `src`.
- `highlight` – The `highlight`-attribute is used as the `src` attribute when the image is currently in highlight-mode. If not specified, will be inherited from `preview`.
- `href` – `href` attributes specify which link to open on clicking on the highlighted image.
### Inherited
- `alt` – The `![]()
`'s `alt`-attribute is copied one-on-one. No changes in functioning.
- `src` – ``-elements do support `![]()
`'s `src`-attribute, but will only use it as a fallback, in case `preview` is not specified.
- `style` – Styles are inherited, but may be altered by `hl-img`.
- `id` and `class` – Ids and classes are inherited, however, if none are specified, `hl-img` will assign them. It will also add the `hl-image` class in all cases.
- `width` and `height` – Are inherited.
### Future support
Add an issue if you're missing anything.
## Customization
Before calling `hl-img`, you can declare some of it's options, if you don't, their defaults will be used.
An example of how an custom configuration would look in HTML:
```HTML
...
...
...
```
Note that these changes happen globally, so they'll be applied to the entire page, the moment `hl-img` is ran.
### List of customization variables
- Timing:
- `timing_fade_opacity` (number) – The time in seconds of the fade-in/fade-out animation on the images. Default: `0.5`
- `timing_pop_location` (number) – Time in miliseconds to wait before moving images. By default a little longer than `timing_fade_opacity` so that it can run its animation. Default: `700`
- Styling
- Closing modal
- `styling_closenotif_positioning` (string) – CSS code for positioning the closing modal. Default: `"top: 2em; right: 2em"`
- `styling_closenotif_colors_background` (string) – Background colour for the closing modal. Default: `"#000"`
- `styling_closenotif_colors_text` (string) – Text colour for the closing modal. Default: `"#FFF"`
- `styling_closenotif_border_thickness` (string) – Border thickness for the closing modal. Default: `"2.5px"`
- `styling_closenotif_border_type` (string) – Type of the closing modal's border, CSS value. Default: `"solid"`
- `styling_closenotif_border_color` (string) – The colour of the closing modal's border. Default: `"#848484"`
- `styling_closenotif_padding` (string) – Padding for the text inside the closing modal. Default: `"4px"`
- Highlighted image
- `styling_imageshow_zIndex` (number) – Z-Index for the image when highlighted, the Z-Index of the closing modal will always be this +1. CSS value. Default: `900`
- `styling_imageshow_positioning` (string) – CSS code for positioning the highlighted image. Default: `top: 20%; bottom: 20%; left: 10%; right: 10%"`
- `styling_imageshow_colors_background` (string) – Background colour for highlighted image -- shows when image is transparent. Default: `"#f5f5f5"`
- `styling_imageshow_border_thickness` (string) – Border thickness for the highlighted image. Default: `".2em"`
- `styling_imageshow_border_type` (string) – Type of the highlighted images' border, CSS value. Default: `"solid"`
- `styling_imageshow_border_color` (string) – Highlighted images' border color. Default:`"currentColor"`
- `styling_imageshow_border_radius` (string) – Border radius for highlighted image. Default:`"0%"`
- `styling_hlimg_maxwidth` (string) – Max-width for all ``'s. Set to `""` To disable. Default: `"80%"`
- `styling_hlimg_maxwidth` (string) – Max-height for all ``'s. Set to `""` To disable. Default: `"100%"`