Solved

disable shadowbox links in image map

Posted on 2013-05-26
5
978 Views
Last Modified: 2013-05-28
Hi
I have an image map implementing shadowbox and I would like to disable shadowbox for several of the links contained in the image map. How can I do this? Right now all the links inside the image map come up inside the shadow box, since shadowbox is relating to all the area tags.

<script type="text/javascript">
         Shadowbox.init();
          window.onload = function() {         Shadowbox.setup(document.getElementById("map").getElementsByTagName("area"));
      handleOversize: "resize"
}
</script>
0
Comment
Question by:avir
  • 3
  • 2
5 Comments
 
LVL 25

Accepted Solution

by:
clockwatcher earned 500 total points
ID: 39198474
You can pass an array to the Shadowbox.setup call in which the first element is a css selector and the second element is the parent item that you want it to grab the anchors from.  In other words,
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="http://www.shadowbox-js.com/build/shadowbox.css"> 
		<script type="text/javascript" src="http://www.shadowbox-js.com/build/shadowbox.js"> </script>
		<script language="javascript"> Shadowbox.init(); </script>
		<script language="javascript">
			window.onload = function() {
				Shadowbox.setup(['.shadowbox', document.getElementById('six_sided_map')]);
			}
		</script>

	</head>
	<body>

		<img id="six_sided" src="http://lightwiki.stuartmcbride.com/mediawiki/images/4/46/Die_pip_template.png" usemap="#six_sided_map" />
		<map name="six_sided_map" id="six_sided_map">
			<area class="shadowbox" shape="rect" coords="100,0,200,100" href="http://www.aaronbushell.com/wp-content/uploads/2013/03/one-finger.jpg" />
			<area shape="rect" coords="100,100,200,200" href="http://school.discoveryeducation.com/clipart/images/fun-2.gif" />
			<area class="shadowbox" shape="rect" coords="200,100,300,200" href="http://www.clker.com/cliparts/U/J/0/x/g/L/red-rounded-with-number-3-md.png" />
			<area shape="rect" coords="0,100,100,200" href="http://quanticolive.com/wp-content/uploads/2013/03/Four-leaf-clover.gif" />
	    	</map>
	</body>
</html>

Open in new window


The one and three are shadowboxed because they have the shadowbox class (which was passed in the setup call).  Two and four aren't shadowboxed.  I was too lazy to do anything with five or six.
0
 

Author Closing Comment

by:avir
ID: 39198522
Works greats. Thanks for your help.
0
 

Author Comment

by:avir
ID: 39198677
Hi clockwatcher
Actually this has created another problem. Now my height definitions (rel="shadowbox; height=300") for some of the links are not recognized since they are based on the rel attribute and all the iframe windows default to 100%  height.

Any way to get around this?
0
 
LVL 25

Expert Comment

by:clockwatcher
ID: 39199337
Can you post an example?  The following appears to work for me:
 <html>
	<head>
		<link rel="stylesheet" type="text/css" href="http://www.shadowbox-js.com/build/shadowbox.css"> 
		<script type="text/javascript" src="http://www.shadowbox-js.com/build/shadowbox.js"> </script>
		<script language="javascript"> Shadowbox.init(); </script>
		<script language="javascript">
			window.onload = function() {
				Shadowbox.setup(['.shadowbox', document.getElementById('six_sided_map')]);
			}
		</script>

	</head>
	<body>
		<a href="./test1.html" rel="shadowbox;width=100;height=100" title="Test 1">Test 1</a>
		<br/>


		<img id="six_sided" src="http://lightwiki.stuartmcbride.com/mediawiki/images/4/46/Die_pip_template.png" usemap="#six_sided_map" />
		<map name="six_sided_map" id="six_sided_map">
			<area class="shadowbox" shape="rect" coords="100,0,200,100" href="http://www.aaronbushell.com/wp-content/uploads/2013/03/one-finger.jpg" />
			<area shape="rect" coords="100,100,200,200" href="http://school.discoveryeducation.com/clipart/images/fun-2.gif" />
			<area class="shadowbox" shape="rect" coords="200,100,300,200" href="http://www.clker.com/cliparts/U/J/0/x/g/L/red-rounded-with-number-3-md.png" />
			<area shape="rect" coords="0,100,100,200" href="http://quanticolive.com/wp-content/uploads/2013/03/Four-leaf-clover.gif" />
	    	</map>
                <br />
		<a href="./test1.html" rel="shadowbox;height=300" title="Test 2">Test 2</a>
	</body>
</html>

Open in new window

0
 

Author Comment

by:avir
ID: 39200427
Sorry, I was mistaken. I can still use the rel attribute to determine the height of the iframe.
Thanks,
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
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 …

863 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

23 Experts available now in Live!

Get 1:1 Help Now