hovimg-z
A jquery plugin that changes the source of an image upon hover
Setting up hovimg-z
- Import the jQuery library
- Load the hovimg-z script in your HTML after the body
<script type="text/javascript" src="jquery.hovimg-z.min.js"></script>- Use the following call after loading the script to activate the plugin
$(window).on('load', function(){ $(document).hovimgz(); });- Add a
<img>tag to your HTML
<img class="hovimg-z" src="foo/bar.jpg" data-hovimgz="bar/someotherimage.jpg">| Attribute | Description |
|---|---|
class | Used to identify the images that are hoverable |
src | Default image to show when not hovered on |
data-hovimgz | Path of image to display upon hover |
Changing defaults
- Use JSON to change the options
- Example of changing the image selector class and fadeTime:
$(document).hovimgz({ elements: { selectors: { image: '.hoverImage', } }, fadeTime: 125 });
- Example of changing the image selector class and fadeTime:
Available options
| Option | Description | Default value |
|---|---|---|
elements.selectors.image | The selector used to identify the images that are hoverable | .hovimg-z |
fadeTime | The speed at which the fade effect is carried out (in milliseconds) | 125 |
