how can I add a class to a hotspot href?

Posted on 2012-09-08
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

Question by:14_east
    LVL 25

    Expert Comment

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

    Expert Comment

    When you say hotspot, are you referring to image maps?

    Accepted Solution

    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) { 
       '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 

    Open in new window

    LVL 10

    Expert Comment

    well done!

    Author Closing Comment

    Because I came up with the only suitable solution, right after writing this question.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Highfive Gives IT Their Time Back

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Suggested Solutions

    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    759 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

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now