?
Solved

Call Shadowbox or Javascript function from imagemap link

Posted on 2009-03-31
5
Medium Priority
?
1,231 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 

Author Comment

by:mircea_a
ID: 24031160
By the way by shadowbox I mean shadowbox.js

Thanks again,
Mircea
0
 
LVL 75

Expert Comment

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

or for old browsers

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

Expert Comment

by:jeff9661
ID: 24695956
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 2000 total points
ID: 24698885
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
ID: 24700599
Yes, that did the trick. Thought it was something like that. Thank you!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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…
Suggested Courses

762 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