I have the html source code, inclusive of co-ordinates, for a clickable image map. On copying the relevant image to my WordPress media library, I am able to use the source code to present the image on one of my WordPress site pages. However, while the image can be viewed on WordPress, the relevant titles within the image are not clickable. On raising this issue via a different WordPress forum, I found that one of the forum members confirmed that this is because the image has been automatically resized and therefore the co-ordinates (which point to the clickable parts) are mismatched to the relevant image as presented. I would like to avoid the resizing problem so that I can continue to use the source code to allow the image to have clickable titles in keeping with the original image. The respondent suggested that Draw Attention may be of help.
I would be grateful for some suggestions on how best to proceed.
Thanks in advance!
]]>I have the html source code, inclusive of co-ordinates, for a clickable image map. On copying the relevant image to my WordPress media library, I am able to use the source code to present the image on one of my WordPress site pages. However, while the image can be viewed on WordPress, the relevant titles within the image are not clickable. I am wondering if this is because the image has been automatically resized and therefore the co-ordinates (which point to the clickable parts) are mismatched to the relevant image as presented. In the event that this explains the problem, is there a way of avoiding the resizing problem so that I can continue to use the source code to allow the image to have clickable titles in keeping with the original image?
Thanks in advance!
]]>
I am having trouble however since adding js where for some reason the jQuery has become commented out…
<!-- <script src='https://withnature.info/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp' id='jquery-core-js'></script> -->
I can’t work out how this has happened but it’s been going on since I’ve been adding js to create responsive image maps and I have also been talking about this subject on the developers support site if it may be of help… https://www.coffeecup.com/forums/image-mapper/image-mapper-and-wordpress–2/ the link will show you various screenshots of the code, support there has confirmed the js is correct.
Any ideas, advice or pointers would be very welcome and gratefully received, many thanks.
]]>The end result is that these hyperlinks work just fine on desktop Operatings systems, but they seem to be ignored by mobile/touch screen OS’s. I’ve tested on both IOS and Android and the hyperlinks on each jpeg seem to have dissapeared.
Does anybody happen to know what might be going on here? Thank so much in advance.
Ryan
]]>I am trying to insert some mapped images into the tabs. I have used https://www.image-map.net/ to create them.
The maps work fine on standard wordpress pages both PC and mobile. But when I insert the map code into a “tab” section, the links in the mapped image do not work at all on PC… And only work somewhat on mobile (it is buggy/not every click is successful).
So I am thinking it is either a conflict between image maps in general and Tabs… Or possibly, between Tabs and “Responsive Image Maps” plugin by Philip Newcomer, as I am also using that.
An example of the image map code:
<map name=”image-map”> <area title=”About” alt=”About” coords=”127,289,208,302″ shape=”rect” href=”https://website.com/product1/” target=”_self” /> <area title=”Send” alt=”Send” coords=”80,313,220,346″ shape=”rect” href=”https://website.com/product2/” target=”_self” /> </map>
]]><img src="https://examplesite.com/wp-content/uploads/2017/10/Mi4c-Thumbnail-top-cut-off.png" border="0" width="472" height="346" alt="" />
<map name="image-maps-2018-04-30-095446" id="ImageMapsCom-image-maps-2018-04-30-095446">
<area alt="" title="" href="https://examplesite.com/about-us/" shape="rect" coords="13,15,184,38" style="outline:none;" target="_self" />
<area alt="" title="" href="https://examplesite.com/about-us/" shape="rect" coords="24,56,135,272" style="outline:none;" target="_self" />
<area alt="" title="" href="https://examplesite.com/about-us/" shape="rect" coords="163,63,391,84" style="outline:none;" target="_self" />
<area alt="" title="" href="https://examplesite.com/about-us/" shape="rect" coords="322,102,399,116" style="outline:none;" target="_self" />
<area alt="" title="" href="https://examplesite.com/about-us/" shape="rect" coords="305,126,383,141" style="outline:none;" target="_self" />
<area alt="" title="" href="https://examplesite.com/about-us/" shape="rect" coords="309,152,387,168" style="outline:none;" target="_self" />
<area alt="" title="" href="https://examplesite.com/about-us/" shape="rect" coords="258,176,340,191" style="outline:none;" target="_self" />
<area alt="" title="" href="https://examplesite.com/about-us/" shape="rect" coords="299,202,381,217" style="outline:none;" target="_self" />
<area alt="" title="" href="https://examplesite.com/about-us/" shape="rect" coords="348,228,430,243" style="outline:none;" target="_self" />
<area alt="" title="" href="https://examplesite.com/about-us/" shape="rect" coords="186,253,268,268" style="outline:none;" target="_self" />
<area alt="" title="" href="https://examplesite.com/about-us/" shape="rect" coords="313,305,458,333" style="outline:none;" target="_self" />
<a href="#" title="Compare"><area style="outline: none;" title="" alt="" coords="201,323,274,339" shape="rect" />
</map>CODE:
<img id=”Image-Maps-Com-image-maps-2016-03-22-071800″ src=”https://mediasavvycic.co.uk/wp-content/uploads/2016/03/aboutuswebpage2c.png” border=”0″ width=”1140″ height=”1128″ orgWidth=”1140″ orgHeight=”1128″ usemap=”#image-maps-2016-03-22-071800″ alt=”” />
<map name=”image-maps-2016-03-22-071800″ id=”ImageMapsCom-image-maps-2016-03-22-071800″>
<area alt=”” title=”” href=”https://mediasavvycic.co.uk/commercial/” shape=”rect” coords=”790,698,1132,748″ style=”outline:none;” target=”_self” onmouseover=”if(document.images) document.getElementById(‘Image-Maps-Com-image-maps-2016-03-22-071800’).src= ‘https://mediasavvycic.co.uk/wp-content/uploads/2016/03/aboutuswebpage2ccommercial.png’;” onmouseout=”if(document.images) document.getElementById(‘Image-Maps-Com-image-maps-2016-03-22-071800’).src= ‘https://mediasavvycic.co.uk/wp-content/uploads/2016/03/aboutuswebpage2c.png’;” />
<area alt=”” title=”” href=”https://mediasavvycic.co.uk/community/” shape=”rect” coords=”8,700,350,750″ style=”outline:none;” target=”_self” onmouseover=”if(document.images) document.getElementById(‘Image-Maps-Com-image-maps-2016-03-22-071800’).src= ‘https://mediasavvycic.co.uk/wp-content/uploads/2016/03/aboutuswebpage2ccommunity.png’;” onmouseout=”if(document.images) document.getElementById(‘Image-Maps-Com-image-maps-2016-03-22-071800’).src= ‘https://mediasavvycic.co.uk/wp-content/uploads/2016/03/aboutuswebpage2c.png’;” />
<area shape=”rect” coords=”1138,1126,1140,1128″ alt=”Image Map” style=”outline:none;” title=”Image Map” href=”https://www.image-maps.com/index.php?aff=mapped_users_0″ />
</map>
Link to the site:
https://mediasavvycic.co.uk/
(see the “About” section)
Thanks
Haythem
This is the basic code I am working with.
<img src=”lgmap.png” alt=”” width=”1113″ height=”1914″ usemap=”#Map” class=”aligncenter size-full wp-image-3301″ border=”0″ />
<map name=”Map”>
<area class=”fancybox-inline” shape=”rect” coords=”360,245,396,319″ href=”#fancyboxID-1″>
</map>
<div class=”fancybox-hidden” style=”display: none;”>
<div id=”fancyboxID-1″ class=”hentry” style=”width: 460px; max-width: 100%;”>…inline content here…</div>
</div>
https://www.ads-software.com/plugins/easy-fancybox/
]]>Il plugin mi chiede di aggiungere il nome di una mappa, ne ho dedotto che dovrei prima “dichiarare” un’immagine come mappa e poi trovare il nome della mappa per fornirgli (al plugin) l’informazione.
Ho già un’immagine mappa all’interno del mio sito ma non riesco a fargliela trovare, non capisco nemmeno l’esempio quando dice: i.e.: …
Puoi aiutarmi a inserire delle immagini e successivamente farle dialogare col plugin?
Specifico che ho necessità di inserire più mappe che poi dovrò inserire in pagine di wp (almeno una al mese).
Grazie mille in anticipo!
https://www.ads-software.com/plugins/responsive-vector-maps/
]]>