Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

how can I add a class to a hotspot href?

Posted on 2012-09-08
5
Medium Priority
?
568 Views
Last Modified: 2012-09-13
I have a large image with hotspots drawn all over it.  Each hotspot, I would like to open a modal window with info.  I got it working great with a text link, but not with the hotspot href.  Any ideas?

below is my working code for my modal window open, using fancybox:

<a href="../table.cfm?table=109" class="iframeFancybox1">Click me to open</a> 

Open in new window

0
Comment
Question by:14_east
  • 2
  • 2
5 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38380194
This is not enough information. Please post a link to your page.
0
 
LVL 10

Expert Comment

by:Gregg
ID: 38380207
When you say hotspot, are you referring to image maps?

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap
0
 

Accepted Solution

by:
14_east earned 0 total points
ID: 38380209
Well, after writing this I was busy writing up an answer.  Below works like a charm.  Just apply class="whatever" to your area tag.

<!--- Adding script for modal reviews --->
<script type="text/javascript">
$(document).ready(function() { 
 $('map > area.fancybox').click(function(e) { 
  $.fancybox({  
   'title' : this.title,  
   'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 
   'width'           : 325,  
	 'height'              : 200,  
	 'overlayOpacity'     :  '0.6',  
	 'overlayColor'       :  '#000',  
	 'hideOnContentClick' :   false,  
	 'autoScale'          :   false,  
	 'transitionIn'       :   'elastic',  
	 'transitionOut'  :   'elastic',  
	 'type'           :   'iframe' 
  }); // fancybox 
  return false; 
 }); // click 
}); //  ready 

</script>

Open in new window

0
 
LVL 10

Expert Comment

by:Gregg
ID: 38380213
well done!
0
 

Author Closing Comment

by:14_east
ID: 38394102
Because I came up with the only suitable solution, right after writing this question.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question