I'm building website of my own and got a little problem.

My home.php is based on image, which contains certain areas to be links to the other areas. I'm trying to use <map> and <area> elements creating the links. Basically code is working just fine, but when I added the feature that makes "the other areas" open up in a Shadow box over the home.php problems started to appear.

First of all in the image there are 4 spots which I want to work as links. And one of them is Log Out link. So I need 3 of them open up in Shadow box and the log out link should act as a normal link.

Problem is now that I've managed to get the links I want to open up in Shadow box work, but also the log out link opens up in Shadow box and onclick it shows the log in page.

Because of the <map> and <area> tags, I can't use Shadow box in a regular way with "rel=" attribute. I've configured it like this:

<script type="text/javascript">

window.onload = function() {

and my <map> element looks like this:

<map name="links" id="links">
  <area id="links" shape="rect" coords="6,261,87,314" href="a.php">
  <area id="links" shape="rect" coords="8,336,280,381" href="b.php">
  <area id="links" shape="rect" coords="5,402,177,458" href="c.php">
  <area shape="rect" coords="713,1,901,47" href="logout.php">

Still somehow despite of row


logout.php opens in Shadow box. Could somebody help me with this?

Is there a better or alternative way to do this? Without Shadow box with still same efect?

E:Is it possible to create multiple <map> elements in one picture? Just got a thought if I create separate <map>s for the 3 other links and one very own for the log out link.

^ So far can't get this working. Maybe theres not support for that.

You better solve the thread 'cause nobody is replying(no offense).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.