Title: Hover with click?
Last modified: August 22, 2016

---

# Hover with click?

 *  [phoenixobia](https://wordpress.org/support/users/phoenixobia/)
 * (@phoenixobia)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/hover-with-click/)
 * I just rated your plugin 5 stars. great job!
 * I want to be able to use the tooltip option but still be able to click.
    Is that
   possible?
 * If not, I think adding a 4th option would make this a perfect plugin.
 * Basically have an option to add URL + tooltip at the same time.
 * So for example I hover over an area on the map and see a tool tip and if I click
   the area, it opens the URL.
 * Thanks
 * Let me know if that’s possible
 * [https://wordpress.org/plugins/imagemapper/](https://wordpress.org/plugins/imagemapper/)

Viewing 9 replies - 1 through 9 (of 9 total)

 *  [wp_yuvakumar](https://wordpress.org/support/users/wp_yuvakumar/)
 * (@wp_yuvakumar)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/hover-with-click/#post-5909226)
 * Hi,
    I did it, if you need it still, i will share code. Reply back to me.
 *  Thread Starter [phoenixobia](https://wordpress.org/support/users/phoenixobia/)
 * (@phoenixobia)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/hover-with-click/#post-5909227)
 * Please do. That would be great! 🙂
 *  [wp_yuvakumar](https://wordpress.org/support/users/wp_yuvakumar/)
 * (@wp_yuvakumar)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/hover-with-click/#post-5909229)
 * 1. Imagemapper.php // in plugin directory
    change this function as bellow,
 *     ```
       function imgmap_area_form_types($post) {
       	// Get area variables from post meta
       	$meta = imgmap_get_imgmap_area_vars($post->ID);
       	$meta->type = isset($meta->type) ? $meta->type : 'tooltip';
       	$meta->tooltip_text = isset($meta->tooltip_text) ? $meta->tooltip_text : '';
       	$meta->link_url = isset($meta->link_url) ? $meta->link_url : '';
       	$meta->link_type = isset($meta->link_type) ? $meta->link_type : 'absolute';
       	$meta->link_page = isset($meta->link_page) ? $meta->link_page : -1;
       	?>
       	<div style="width: 20%; float: left;" id="area-form-types">
       		<p><input type="radio" name="area-type" onclick="ShowTypes('link')" value="link" <?php echo $meta->type == 'link' ? 'checked' : '' ?>>
       			<input type="button" class="button" onclick="ShowTypes('link')" value="Link" /></p>
       		<p><input type="radio" name="area-type" onclick="ShowTypes('tooltip')" value="tooltip" <?php echo $meta->type == 'tooltip' ? 'checked' : '' ?>>
       			<input type="button" class="button" onclick="ShowTypes('tooltip')" value="Tooltip" /></p>
       		<p><input type="radio" name="area-type" onclick="ShowTypes('popup')" value="popup" <?php echo $meta->type == 'popup' ? 'checked' : '' ?>>
       			<input type="button" class="button" onclick="ShowTypes('popup')" value="Popup window" /></p>
       	</div>
       	<div id="imagemap-area-type-editors">
       		<div id="imagemap-area-popup-editor" class="area-type-editors <?php echo $meta->type == 'popup' ? 'area-type-editor-current' : '' ?>">
       		<h4>Show text and images in a popup window when user clicks the area</h4>
       		<p><label>Map Area Link <br />
       			<input type="text" name="area-tooltip-url" value="<?php echo $meta->tooltip_url; ?>"/>
       		</label></p>
       		<?php
       		if(function_exists('wp_editor')) {
       			wp_editor($post->post_content, 'content', array( 'editor_css' => '<style> body { min-height: 300px; background-color: white; } </style>' ));
       		}
       		else if(function_exists('the_editor')) {
       			the_editor($post->post_content, 'content', array( 'textarea_rows' => 8 ));
       		}
       		else {
       			echo 'Something went wrong when loading editor.';
       		}
       		?></div>
       		<div id="imagemap-area-tooltip-editor" class="area-type-editors <?php echo $meta->type == 'tooltip' ? 'area-type-editor-current' : '' ?>">
       		<h4>Show a small tooltip when users move their mouse on the area</h4>
   
       			<p><label>Tooltip text <br />
       				<textarea name="area-tooltip-text" cols="50" rows="6"><?php echo $meta->tooltip_text; ?></textarea>
       			</label></p>
       			<p>HTML elements such as links and images are allowed. Javascript not so much.</p>
       			<p><label>Map Area Link <br />
       			<input type="text" name="area-tooltip-url" value="<?php echo $meta->tooltip_url; ?>"/>
       		</label></p>
       		</div>
       		<div id="imagemap-area-link-editor" class="area-type-editors <?php echo $meta->type == 'link' ? 'area-type-editor-current' : '' ?>">
       		<h4>Select where users should be redirected when they click the area</h4>
       			<table>
       				<tr>
       			<td><label><input type="radio" name="area-link-type" value="post" <?php echo $meta->link_type == 'post' ? 'checked' : ''; ?>> Link to an existing post:</label></td>
       			<td>
       				<select name="area-link-post"><?php
       				$posts = get_posts(array('numberposts' => -1));
       				foreach($posts as $post) { echo '<option value="'.$post->ID.'" '.($meta->link_post == $post->ID ? 'selected' : '').'>'.(strlen($post->post_title) ? $post->post_title : '(untitled, id: '.$post->ID.')').'</option>'; }
       				?></select>
       			</td>
       			<tr><td><label><input type="radio" name="area-link-type" value="page" <?php echo $meta->link_type == 'page' ? 'checked' : ''; ?>> Link to an existing page:</label></td><td><?php wp_dropdown_pages(array('name' => 'area-link-page', 'selected' => $meta->link_page)); ?></td></tr>
       			<tr><td><label><input type="radio" name="area-link-type" value="absolute" <?php echo $meta->link_type == 'absolute' ? 'checked' : ''; ?>> Link to an url address:</label></td><td><input type="text" name="area-link-url" value="<?php echo $meta->link_url; ?>"></td></tr>
       			</tr>
       			</table>
       		</div>
       		<div id="wp-content-media-buttons" class="wp-media-buttons">
       			<a href="#" class="button insert-media add_media" data-editor="content" title="Add Media">
       				<span class="wp-media-buttons-icon"></span> Add Media
       			</a>
       		</div>
       	</div>
       	<br style="clear:both">
       <?php }
       ```
   
 * 2. In same page change other function, which i have mentioned bellow.
 *     ```
       function imgmap_save_meta($id = false) {
   
       	if(get_post_type($id) == IMAGEMAP_POST_TYPE) {
   
       		if(isset($_FILES['imgmap_image'])) {
       			$uploadedFile = $_FILES['imgmap_image'];
       			if($uploadedFile['error'] == 0){
   
       				$file = wp_handle_upload($uploadedFile, array('test_form' => FALSE));
   
       				if(!strpos('image/', $file['type']) == 0)
       				wp_die('This is not an image!');
   
       				update_post_meta($id, 'imgmap_image', $file['url']);
       			}
       		}
       	}
       	if(get_post_type($id) == IMAGEMAP_AREA_POST_TYPE) {
       		$area_vars = imgmap_get_imgmap_area_vars($id);
       		$area_vars->type = $_POST['area-type'];
       		$area_vars->tooltip_text = wp_kses_post($_POST['area-tooltip-text']);
       		$area_vars->tooltip_url = wp_kses_post($_POST['area-tooltip-url']);
       		$area_vars->title_attribute = esc_attr($_POST['area-title-attribute']);
       		$area_vars->link_url = esc_url($_POST['area-link-url']);
       		$area_vars->link_type = esc_attr($_POST['area-link-type']);
       		$area_vars->link_post = esc_attr($_POST['area-link-post']);
       		$area_vars->link_page = esc_attr($_POST['area-link-page']);
       		// Save area settings in JSON format.
       		// Basically when you need one of them, you need all others as well, so it's inefficient to save them in separate columns.
       		update_post_meta($id, 'imgmap_area_vars', $area_vars);
       	}
       }
       ```
   
 * 3. Update below function in same page
 *     ```
       function imgmap_create_area_element($id, $title) {
       	$imgmap_colors = get_option('imgmap_colors');
       	$meta = imgmap_get_imgmap_area_vars($id);
   
       	if($meta === null)
       		$meta = new StdClass();
   
       	if(!isset($meta->color) || !isset($imgmap_colors['colors'][$meta->color]))
       		$meta->color = $imgmap_colors['last_chosen'];
   
       	if(!isset($imgmap_colors['colors'][$meta->color]))
       		$color = array( 'fillColor' => 'fefefe', 'strokeColor' => 'fefefe', 'fillOpacity' => 0.3, 'strokeOpacity' => 0.6, 'strokeWidth' => 1);
       	else
       		$color = $imgmap_colors['colors'][$meta->color];
   
       	$meta->type = isset($meta->type) ? $meta->type : '';
       	$meta->tooltip_text = isset($meta->tooltip_text) ? $meta->tooltip_text : '';
       	$link = imgmap_get_link_url($meta);
   
       	$meta->title_attribute = isset($meta->title_attribute) ? $meta->title_attribute : '';
   
       	if($link == "" || $link == "#"){
       		$newTooltip = $meta->tooltip_text;
       	} else {
       		$newTooltip = '<a href="'.esc_attr($link).'" target="_blank">'.$meta->tooltip_text.'</a>';
       	}	
   
       	return '<area data-type="'.esc_attr($meta->type).'" data-tooltip="'.esc_attr($meta->type == 'tooltip' ? $newTooltip : false ). '" data-fill-color="'.esc_attr(str_replace('#', '', $color['fillColor'])).'" data-fill-opacity="'.esc_attr($color['fillOpacity']).'" data-stroke-color="'.esc_attr(str_replace('#', '', $color['strokeColor'])).'" data-stroke-opacity="'.esc_attr($color['strokeOpacity']).'" data-stroke-width="'.esc_attr($color['strokeWidth']).'" data-mapkey="area-'.$id.'" shape="poly" coords="'.esc_attr(get_post_meta($id, 'coords', true)).'" href="'.esc_attr($link) .'" title="'.(isset($meta->title_attribute) ? $meta->title_attribute : $title).'" />';
       }
       ```
   
 * 4. Update bellow function also in same page
 *     ```
       function imgmap_get_link_url($meta) {
   
       	return isset($meta->tooltip_url) ? $meta->tooltip_url : '';
       	exit;
       	if($meta->type != 'link')
       		return '#'; 
   
       	switch($meta->link_type) {
       		case 'post': return get_permalink($meta->link_post);
       		case 'page': return get_permalink($meta->link_page);
       		default: return isset($meta->tooltip_url) ? $meta->tooltip_url : '';
       	}
       }
       ```
   
 * Good luck.
 *  [wp_yuvakumar](https://wordpress.org/support/users/wp_yuvakumar/)
 * (@wp_yuvakumar)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/hover-with-click/#post-5909230)
 * 1. Update this function – to add link to tooltip
 *     ```
       function imgmap_area_form_types($post) {
       	// Get area variables from post meta
       	$meta = imgmap_get_imgmap_area_vars($post->ID);
       	$meta->type = isset($meta->type) ? $meta->type : 'tooltip';
       	$meta->tooltip_text = isset($meta->tooltip_text) ? $meta->tooltip_text : '';
       	$meta->link_url = isset($meta->link_url) ? $meta->link_url : '';
       	$meta->link_type = isset($meta->link_type) ? $meta->link_type : 'absolute';
       	$meta->link_page = isset($meta->link_page) ? $meta->link_page : -1;
       	?>
       	<div style="width: 20%; float: left;" id="area-form-types">
       		<p><input type="radio" name="area-type" onclick="ShowTypes('link')" value="link" <?php echo $meta->type == 'link' ? 'checked' : '' ?>>
       			<input type="button" class="button" onclick="ShowTypes('link')" value="Link" /></p>
       		<p><input type="radio" name="area-type" onclick="ShowTypes('tooltip')" value="tooltip" <?php echo $meta->type == 'tooltip' ? 'checked' : '' ?>>
       			<input type="button" class="button" onclick="ShowTypes('tooltip')" value="Tooltip" /></p>
       		<p><input type="radio" name="area-type" onclick="ShowTypes('popup')" value="popup" <?php echo $meta->type == 'popup' ? 'checked' : '' ?>>
       			<input type="button" class="button" onclick="ShowTypes('popup')" value="Popup window" /></p>
       	</div>
       	<div id="imagemap-area-type-editors">
       		<div id="imagemap-area-popup-editor" class="area-type-editors <?php echo $meta->type == 'popup' ? 'area-type-editor-current' : '' ?>">
       		<h4>Show text and images in a popup window when user clicks the area</h4>
       		<p><label>Map Area Link <br />
       			<input type="text" name="area-tooltip-url" value="<?php echo $meta->tooltip_url; ?>"/>
       		</label></p>
       		<?php
       		if(function_exists('wp_editor')) {
       			wp_editor($post->post_content, 'content', array( 'editor_css' => '<style> body { min-height: 300px; background-color: white; } </style>' ));
       		}
       		else if(function_exists('the_editor')) {
       			the_editor($post->post_content, 'content', array( 'textarea_rows' => 8 ));
       		}
       		else {
       			echo 'Something went wrong when loading editor.';
       		}
       		?></div>
       		<div id="imagemap-area-tooltip-editor" class="area-type-editors <?php echo $meta->type == 'tooltip' ? 'area-type-editor-current' : '' ?>">
       		<h4>Show a small tooltip when users move their mouse on the area</h4>
   
       			<p><label>Tooltip text <br />
       				<textarea name="area-tooltip-text" cols="50" rows="6"><?php echo $meta->tooltip_text; ?></textarea>
       			</label></p>
       			<p>HTML elements such as links and images are allowed. Javascript not so much.</p>
       			<p><label>Map Area Link <br />
       			<input type="text" name="area-tooltip-url" value="<?php echo $meta->tooltip_url; ?>"/>
       		</label></p>
       		</div>
       		<div id="imagemap-area-link-editor" class="area-type-editors <?php echo $meta->type == 'link' ? 'area-type-editor-current' : '' ?>">
       		<h4>Select where users should be redirected when they click the area</h4>
       			<table>
       				<tr>
       			<td><label><input type="radio" name="area-link-type" value="post" <?php echo $meta->link_type == 'post' ? 'checked' : ''; ?>> Link to an existing post:</label></td>
       			<td>
       				<select name="area-link-post"><?php
       				$posts = get_posts(array('numberposts' => -1));
       				foreach($posts as $post) { echo '<option value="'.$post->ID.'" '.($meta->link_post == $post->ID ? 'selected' : '').'>'.(strlen($post->post_title) ? $post->post_title : '(untitled, id: '.$post->ID.')').'</option>'; }
       				?></select>
       			</td>
       			<tr><td><label><input type="radio" name="area-link-type" value="page" <?php echo $meta->link_type == 'page' ? 'checked' : ''; ?>> Link to an existing page:</label></td><td><?php wp_dropdown_pages(array('name' => 'area-link-page', 'selected' => $meta->link_page)); ?></td></tr>
       			<tr><td><label><input type="radio" name="area-link-type" value="absolute" <?php echo $meta->link_type == 'absolute' ? 'checked' : ''; ?>> Link to an url address:</label></td><td><input type="text" name="area-link-url" value="<?php echo $meta->link_url; ?>"></td></tr>
       			</tr>
       			</table>
       		</div>
       		<div id="wp-content-media-buttons" class="wp-media-buttons">
       			<a href="#" class="button insert-media add_media" data-editor="content" title="Add Media">
       				<span class="wp-media-buttons-icon"></span> Add Media
       			</a>
       		</div>
       	</div>
       	<br style="clear:both">
       <?php }
       ```
   
 *  [wp_yuvakumar](https://wordpress.org/support/users/wp_yuvakumar/)
 * (@wp_yuvakumar)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/hover-with-click/#post-5909231)
 * 2. Update this function – to save link in database
 *     ```
       function imgmap_save_meta($id = false) {
   
       	if(get_post_type($id) == IMAGEMAP_POST_TYPE) {
   
       		if(isset($_FILES['imgmap_image'])) {
       			$uploadedFile = $_FILES['imgmap_image'];
       			if($uploadedFile['error'] == 0){
   
       				$file = wp_handle_upload($uploadedFile, array('test_form' => FALSE));
   
       				if(!strpos('image/', $file['type']) == 0)
       				wp_die('This is not an image!');
   
       				update_post_meta($id, 'imgmap_image', $file['url']);
       			}
       		}
       	}
       	if(get_post_type($id) == IMAGEMAP_AREA_POST_TYPE) {
       		$area_vars = imgmap_get_imgmap_area_vars($id);
       		$area_vars->type = $_POST['area-type'];
       		$area_vars->tooltip_text = wp_kses_post($_POST['area-tooltip-text']);
       		$area_vars->tooltip_url = wp_kses_post($_POST['area-tooltip-url']);
       		$area_vars->title_attribute = esc_attr($_POST['area-title-attribute']);
       		$area_vars->link_url = esc_url($_POST['area-link-url']);
       		$area_vars->link_type = esc_attr($_POST['area-link-type']);
       		$area_vars->link_post = esc_attr($_POST['area-link-post']);
       		$area_vars->link_page = esc_attr($_POST['area-link-page']);
       		// Save area settings in JSON format.
       		// Basically when you need one of them, you need all others as well, so it's inefficient to save them in separate columns.
       		update_post_meta($id, 'imgmap_area_vars', $area_vars);
       	}
       }
       ```
   
 *  [wp_yuvakumar](https://wordpress.org/support/users/wp_yuvakumar/)
 * (@wp_yuvakumar)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/hover-with-click/#post-5909232)
 * 3. Update this function for tooltip with link
 *     ```
       function imgmap_create_area_element($id, $title) {
       	$imgmap_colors = get_option('imgmap_colors');
       	$meta = imgmap_get_imgmap_area_vars($id);
   
       	if($meta === null)
       		$meta = new StdClass();
   
       	if(!isset($meta->color) || !isset($imgmap_colors['colors'][$meta->color]))
       		$meta->color = $imgmap_colors['last_chosen'];
   
       	if(!isset($imgmap_colors['colors'][$meta->color]))
       		$color = array( 'fillColor' => 'fefefe', 'strokeColor' => 'fefefe', 'fillOpacity' => 0.3, 'strokeOpacity' => 0.6, 'strokeWidth' => 1);
       	else
       		$color = $imgmap_colors['colors'][$meta->color];
   
       	$meta->type = isset($meta->type) ? $meta->type : '';
       	$meta->tooltip_text = isset($meta->tooltip_text) ? $meta->tooltip_text : '';
       	$link = imgmap_get_link_url($meta);
   
       	$meta->title_attribute = isset($meta->title_attribute) ? $meta->title_attribute : '';
   
       	if($link == "" || $link == "#"){
       		$newTooltip = $meta->tooltip_text;
       	} else {
       		$newTooltip = '<a href="'.esc_attr($link).'" target="_blank">'.$meta->tooltip_text.'</a>';
       	}	
   
       	return '<area data-type="'.esc_attr($meta->type).'" data-tooltip="'.esc_attr($meta->type == 'tooltip' ? $newTooltip : false ). '" data-fill-color="'.esc_attr(str_replace('#', '', $color['fillColor'])).'" data-fill-opacity="'.esc_attr($color['fillOpacity']).'" data-stroke-color="'.esc_attr(str_replace('#', '', $color['strokeColor'])).'" data-stroke-opacity="'.esc_attr($color['strokeOpacity']).'" data-stroke-width="'.esc_attr($color['strokeWidth']).'" data-mapkey="area-'.$id.'" shape="poly" coords="'.esc_attr(get_post_meta($id, 'coords', true)).'" href="'.esc_attr($link) .'" title="'.(isset($meta->title_attribute) ? $meta->title_attribute : $title).'" />';
       }
       ```
   
 *  [wp_yuvakumar](https://wordpress.org/support/users/wp_yuvakumar/)
 * (@wp_yuvakumar)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/hover-with-click/#post-5909233)
 * 4. Update this function to get link of tooltip
 *     ```
       function imgmap_get_link_url($meta) {
   
       	return isset($meta->tooltip_url) ? $meta->tooltip_url : '';
       	exit;
       	if($meta->type != 'link')
       		return '#'; 
   
       	switch($meta->link_type) {
       		case 'post': return get_permalink($meta->link_post);
       		case 'page': return get_permalink($meta->link_page);
       		default: return isset($meta->tooltip_url) ? $meta->tooltip_url : '';
       	}
       }
       ```
   
 *  Thread Starter [phoenixobia](https://wordpress.org/support/users/phoenixobia/)
 * (@phoenixobia)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/hover-with-click/#post-5909234)
 * That was awesome! Exactly what I was thinking. Worked like a charm.
    It will 
   be great if you consider adding it for the future updates so we won’t lose the
   changes after an upgrade.
 * Thanks a lot!
 *  Thread Starter [phoenixobia](https://wordpress.org/support/users/phoenixobia/)
 * (@phoenixobia)
 * [10 years, 12 months ago](https://wordpress.org/support/topic/hover-with-click/#post-5909249)
 * This works perfect! Is this going to be included in the next update?
    It should
   be part of the core plugin I think.
 * It also would be excellent if it was responsive.
 * I have made it responsive with a few lines of CSS but it needs to be part of 
   the plugin.
 * Thanks for the great plugin.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Hover with click?’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/imagemapper_e1e9f0.svg)
 * [ImageMapper](https://wordpress.org/plugins/imagemapper/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/imagemapper/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/imagemapper/)
 * [Active Topics](https://wordpress.org/support/plugin/imagemapper/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/imagemapper/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/imagemapper/reviews/)

 * 9 replies
 * 2 participants
 * Last reply from: [phoenixobia](https://wordpress.org/support/users/phoenixobia/)
 * Last activity: [10 years, 12 months ago](https://wordpress.org/support/topic/hover-with-click/#post-5909249)
 * Status: not resolved