THIS THREAD HAS BEEN CLOSED.

How to cleate the image map?

Updated on Jul 11, 2016 in OneEngine
3 on Jul 11, 2016
Hi,
I’d like to add an image map on the page.
I wrote a HTML code like the bellow on the ET text container at the LayoutBuilder.
but if mouseover,it didn’t work..
How to make crickable map? 
 
 
—start the code——
<img src=”/wp-content/uploads/2016/07/test.png” alt=”test” usemap=”#Map0008″ >
 
<map name=”Map0008″>
<area shape=”rect” coords=”125,137,160,245″ href=”/#001″ alt=”aaaaa”>
<area shape=”rect” coords=”160,138,195,245″ href=”/#002″ alt=”bbbbb”>
<area shape=”rect” coords=”195,61,228,106″ href=”/#003″ alt=”ccccc”>
</map>
—end of code—–
  • Liked by
  • jido park
0 on Jul 11, 2016

I install a plugin ‘Responsive Image Maps’.

and put two files in /wp-content/themes/oneengine/js/.

 

two files are bellow

1)   jquery.js

2)   jquery.rwdImageMaps.min.js

(downroad from:

jQuery RWD Image Maps : https://github.com/stowball/jQuery-rwdImageMaps)

 

in 1),I wrote this

<script src=”//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js”></script>
<script src=”jquery.rwdImageMaps.min.js”></script>
<script>
$(function(){
$(‘img[usemap]’).rwdImageMaps();
});
</script>

 

I’d like to write this code in oneengine’s header.

------
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="jquery.rwdImageMaps.min.js"></script> <script> $(function(){ $('img[usemap]').rwdImageMaps(); }); </script>
-------

so I input these on L148 in header.php
like this
-----
<nav class="menu-responsive">
</nav>
</div>
</div>
</div>

<!-- jQuery imagemap
======================================================================== -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>
<!-- jQuery imagemap / End -->
</header>
<!-- Header / End -->

<?php } ?>
----

anything wrong? can Someone help me?

 

  • Liked by
Cancel
0 on Jul 11, 2016

I delete jquery.js file..

  • Liked by
Cancel
0 on Jul 11, 2016

I rewrote html.then Link was created.

x

<area shape=”rect” coords=”125,137,160,245″ href=”/#001″ alt=”aaaaa”>

o

<area shape=”rect” coords=”125,137,160,245″ href=”/#001″ alt=”aaaaa”/>

But Something wrong with coordinate..

 
  • Liked by
Cancel
Loading more replies
Posting & Replying function will be deactivated from 3pm GMT+7 12th Sep.
Read More