I'm trying to make image-mapping in svelte.
Actually, this is working in PC but not in mobile.
So, I wanted to import rwdImageMaps and this is controlled by jQuery.
Because of this, I installed jQuery, also I succeed in printing console.log("hello") in jquery space.
And then I also pasted cdn of rwdImageMaps.
But whenever I put jQuery('img[usemap]').rwdImageMaps(); it never works.
If anyone solve this?
Thank you so much for reading.
-app.html
<head><!-- jQuery --><!-- Include jQuery --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js" integrity="sha512-eZB7hQa0bRlrKMQ2njpP0d/Klu6o30Gsr8e5FUCjUT3fSlnVkm/1J14n58BuwgaMuObrGb7SvUfQuF8qFsPU4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script></head><body class="layout-light top-menu"><!-- Google Tag Manager (noscript) --><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W43TQVRR" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><!-- End Google Tag Manager (noscript) --><div>%sveltekit.body%</div><script> $(function () { $('img[usemap]').rwdImageMaps(); });</script></body>-component
<script> import panzoom from 'panzoom'; import Modal from './Modal.svelte'; import Toolbar from './Toolbar.svelte'; import jQuery from 'jquery'; import { onMount } from 'svelte'; import 'image-map-resizer'; onMount(() => { jQuery(document).ready(function () { console.log('hello') //<---- this works jQuery('img[usemap]').rwdImageMaps(); }); });</script>