Have ideas to improve npm?Join in the discussion! »

    swapimagesonhover

    1.0.0 • Public • Published

    swapimagesonhover

    A custom jQuery script to help you swap one image to another on hover easily using (jQuery, CSS)...

    NPM

    You can install directly by running npm directly from your command line interface like so:

    npm install swapimagesonhover
    

    CDN

    The CDN is updated after the release is made public. Always, check the GitHub page for the latest release.

    Usage

    The "swim" class is ideal for use on images you would want swapped with another on a website. Very useful for e-commerce websites and fancy photo/gallery websites.

    Requirements

    jQuery.js

    Image Styling

    The data-img attribute is used to attach the second image of your choice you would want swapped. Once this is done, simply add your swim class to the image element and you're good to go (make sure jQuery script is included, it requires it to work properly). Here's a sample below...

    <!DOCTYPE html>
    <html>
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <link href="swapimagesonhover.css" rel="stylesheet" type="text/css"/>
      <script src="swapimagesonhover.js" type="text/javascript"></script>
    </head>
    
    <body>
      <img src="image1.jpg" data-img="image2.jpg" class="swim"/>
    </body>
    </html>
    

    Contributions

    Anyone and everyone is welcome to contribute.

    Install

    npm i swapimagesonhover

    DownloadsWeekly Downloads

    18

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    6.09 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar