Title: Script for frontend display
Last modified: March 9, 2017

---

# Script for frontend display

 *  [mozdt](https://wordpress.org/support/users/mozdt/)
 * (@mozdt)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/script-for-frontend-display/)
 * Hi, this looks really interesting. 🙂
 * I’ve created a repeater and created three subfields as per your screenshot, the
   hotspot, title and description.
 * I know how to use the repeater but am not sure exactly how to code the frontend
   so that you can hover over a hotspot to change the image.
 * I see that the hotspot field echo’s the coordinates so I’ve got everything I 
   need to use, the only thing I’m missing is what script I need to use so that 
   it displays correctly.
 * Can you point me (and other interested users) in the direction of the code I’d
   need to use?
 * Any advice most appreciated – keep up the good work!

Viewing 1 replies (of 1 total)

 *  Plugin Author [Andrew Rockwell](https://wordpress.org/support/users/rockwell15/)
 * (@rockwell15)
 * [9 years, 2 months ago](https://wordpress.org/support/topic/script-for-frontend-display/#post-8945781)
 * Hi Mozdt,
 * In it’s current state, the plugin is not very non-developer friendly. (not sure
   how knowledgeable you are with coding) Since there’s so many different ways to
   use the coordinates I didn’t want to pigeonhole it. But here’s a basic version
   of what I’m doing with them, pretty simple:
 *     ```
       $count = 0;
       while ( have_rows('main_features') ) {
       	the_row();
       	$coords = explode( ',', get_sub_field('coordinates') );
       	$title  = get_sub_field('title');
       	$desc   = get_sub_field('description');
       	echo '<button class="feature" style="left:' + $coords[0] + ';top:' + $coords[1] + ';" data-title="' . $title . '" data-info="' . $desc . '">' . $count++ . '</button>'
       }
       ```
   
 * So each button is positioned absolutely, inside a relative positioned container
   which also holds the image these coordinates were mapped from.
 * Then I have a single extra coordinates field so my client can click to choose
   where the description lies.
 * I’ve made a simple jsfiddle demonstration:
    [https://jsfiddle.net/2pg1x4yg/](https://jsfiddle.net/2pg1x4yg/)
 * Hope you get it working!
    Andrew
    -  This reply was modified 9 years, 2 months ago by [Andrew Rockwell](https://wordpress.org/support/users/rockwell15/).

Viewing 1 replies (of 1 total)

The topic ‘Script for frontend display’ is closed to new replies.

 * ![](https://ps.w.org/acf-image-mapping-hotspots/assets/icon-256x256.png?rev=1602340)
 * [ACF: Image Hotspots Field](https://wordpress.org/plugins/acf-image-mapping-hotspots/)
 * [Support Threads](https://wordpress.org/support/plugin/acf-image-mapping-hotspots/)
 * [Active Topics](https://wordpress.org/support/plugin/acf-image-mapping-hotspots/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/acf-image-mapping-hotspots/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/acf-image-mapping-hotspots/reviews/)

## Tags

 * [ACF](https://wordpress.org/support/topic-tag/acf/)

 * 1 reply
 * 2 participants
 * Last reply from: [Andrew Rockwell](https://wordpress.org/support/users/rockwell15/)
 * Last activity: [9 years, 2 months ago](https://wordpress.org/support/topic/script-for-frontend-display/#post-8945781)
 * Status: not resolved