Solved

Call Shadowbox or Javascript function from imagemap link

Posted on 2009-03-31
5
1,174 Views
Last Modified: 2013-11-11
Hello experts,

I've been trying to show a modal window (shadowbox), using an imagemap instead of the <a> tag. Does anyone know how can I get it to work?

Or at least call a javascript function when clicking on an image map area?

Thank you very much,
Mircea
0
Comment
Question by:mircea_a
  • 2
  • 2
5 Comments
 

Author Comment

by:mircea_a
Comment Utility
By the way by shadowbox I mean shadowbox.js

Thanks again,
Mircea
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
<area onClick="someJSFunction(); return false" ...

or for old browsers

<area href="void(someJSFunction())" ...
 
0
 

Expert Comment

by:jeff9661
Comment Utility
I have the same issue. I had someone write the attached Javascript which works great by assigning the class to the <a> tag. However I don't know how to tie this script / class  into your example above. I don't have to have both class options. I'm currently using the bottom one '560x470'

This is how I use it with a standard HREF:
<a href="popUpStyles/harmonyElite.html" class="560x470">Harmony Elite</a>

This is my image map code:
 <area  shape="poly" coords="65,160,110,135,111,33,155,15,150,6,67,37" href="popUpStyles/harmonyElite.html" alt="Harmony Elite" />




<script type="text/javascript">

	$(document).ready(function(){

		$('a.500x415').openDOMWindow({ 

			width:508,

			height:423,

			positionType:'centered', 

			eventType:'click', 

			windowSource:'iframe',

			windowPadding:0

		});

		

		$('a.560x470').openDOMWindow({ 

			width:568,

			height:478,

			positionType:'centered', 

			eventType:'click', 

			windowSource:'iframe',

			windowPadding:0

		});

	});

</script>

Open in new window

0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
Comment Utility
Did you try
$('area.500x415')

and

 <area  class="500x415" shape="poly" coords="65,160,110,135,111,33,155,15,150,6,67,37" href="popUpStyles/harmonyElite.html" alt="Harmony Elite" />

0
 

Expert Comment

by:jeff9661
Comment Utility
Yes, that did the trick. Thought it was something like that. Thank you!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 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

6 Experts available now in Live!

Get 1:1 Help Now