Div layer switching

J

JS

Hi all,
Im having some troubles with layers on a site im developing.
I have two layers one has an image of an artists palette on it and each blob
of paint is a link to a page on the site. That uses an image map and hrefs.

The second layer is where the page will appear. So when a user clicks a link
on the palette image, a new 'window' will appear over the palette to show
the content. The image of the palette will be slightly faded out to
highlight the content.

The trouble I'm having is switching between the layers when a link is
clicked. The image map links dont seem to show the content window or even be
clickable.

Im not sure if Im going about this the right way though because I also need
to be able to close the content window to show the menu again. If anyone has
any ideas on how to achieve this or any pointers then I would be happy to
know them coz I'm stumped.

The code for the page so far is below and the I know this code may seem a
bit of a mess but I've been trying everything so its a little un-organised.
I've used the z-Index
and visibility alone and together and no sucess so far.

If you need any further info then let me know.
Thanks in advance for your help
James
Scroll down for the code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="main.css"/ >
<script language="javascript" type="text/javascript">
function openwindow(elm)
{
window.document.getElementById("content").style.visibility="hidden";
window.document.getElementById("content").style.zIndex = "0";
window.document.getElementById("palette").style.visibility="hidden";
window.document.getElementById("palette").style.zIndex = "0";
window.document.getElementById(elm).style.visibility="visible";
window.document.getElementById(elm).style.zIndex = "100";
}
</script>
</head>

<body topmargin="0" marginwidth="0" marginheight="0"
onLoad="javascript:eek:penwindow('palette')">

<table width="579" height="582" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="palette" class="palette" name="palette" style="visibility:
hidden; z-Index: 0">
<img src="images/backgroundpalette.png" border="0"
usemap="#paletteMap" start="fileopen" target="#frame">
</div>
<div name="content" id="content" class="content" style="visibility:
hidden; z-Index: 0">
<iframe src="home.htm" frameborder="0" width="579" height="582"
allowtransparency="true"/>
</div>

</td>
</tr>
</table>
<map name="paletteMap" id="paletteMap">
<area shape="circle" coords="478,177,46" href="home.htm" target="#frame"
alt="Homepage" onClick="javascript:eek:penwindow('content')">
<area shape="circle" coords="183,281,50" href="gallery.htm"
target="#frame" alt="Gallery" onClick="javascript:eek:penwindow('content')">
<area shape="circle" coords="311,489,49" href="links.htm" target="#frame"
alt="Links" onClick="javascript:eek:penwindow('content')">
<area shape="circle" coords="323,160,50" href="about.htm" target="#frame"
alt="About Me" onClick="javascript:eek:penwindow('content'))">
<area shape="circle" coords="150,389,49" href="events.htm" target="#frame"
alt="Events" onClick="javascript:eek:penwindow('content')">
<area shape="circle" coords="184,502,56" href="contact.htm"
target="#frame" alt="Contact Me" onClick="javascript:eek:penwindow('content')">
</map>
</body>
</html>
 
F

Filipe Tomita

JS escreveu:
Hi all,
Im having some troubles with layers on a site im developing.
I have two layers one has an image of an artists palette on it and each blob
of paint is a link to a page on the site. That uses an image map and hrefs.

The second layer is where the page will appear. So when a user clicks a link
on the palette image, a new 'window' will appear over the palette to show
the content. The image of the palette will be slightly faded out to
highlight the content.

The trouble I'm having is switching between the layers when a link is
clicked. The image map links dont seem to show the content window or even be
clickable.

Im not sure if Im going about this the right way though because I also need
to be able to close the content window to show the menu again. If anyone has
any ideas on how to achieve this or any pointers then I would be happy to
know them coz I'm stumped.

The code for the page so far is below and the I know this code may seem a
bit of a mess but I've been trying everything so its a little un-organised.
I've used the z-Index
and visibility alone and together and no sucess so far.

If you need any further info then let me know.
Thanks in advance for your help
James
Scroll down for the code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="main.css"/ >
<script language="javascript" type="text/javascript">
function openwindow(elm)
{
window.document.getElementById("content").style.visibility="hidden";
window.document.getElementById("content").style.zIndex = "0";
window.document.getElementById("palette").style.visibility="hidden";
window.document.getElementById("palette").style.zIndex = "0";
window.document.getElementById(elm).style.visibility="visible";
window.document.getElementById(elm).style.zIndex = "100";
}
</script>
</head>

<body topmargin="0" marginwidth="0" marginheight="0"
onLoad="javascript:eek:penwindow('palette')">

<table width="579" height="582" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="palette" class="palette" name="palette" style="visibility:
hidden; z-Index: 0">
<img src="images/backgroundpalette.png" border="0"
usemap="#paletteMap" start="fileopen" target="#frame">
</div>
<div name="content" id="content" class="content" style="visibility:
hidden; z-Index: 0">
<iframe src="home.htm" frameborder="0" width="579" height="582"
allowtransparency="true"/>
</div>

</td>
</tr>
</table>
<map name="paletteMap" id="paletteMap">
<area shape="circle" coords="478,177,46" href="home.htm" target="#frame"
alt="Homepage" onClick="javascript:eek:penwindow('content')">
<area shape="circle" coords="183,281,50" href="gallery.htm"
target="#frame" alt="Gallery" onClick="javascript:eek:penwindow('content')">
<area shape="circle" coords="311,489,49" href="links.htm" target="#frame"
alt="Links" onClick="javascript:eek:penwindow('content')">
<area shape="circle" coords="323,160,50" href="about.htm" target="#frame"
alt="About Me" onClick="javascript:eek:penwindow('content'))">
<area shape="circle" coords="150,389,49" href="events.htm" target="#frame"
alt="Events" onClick="javascript:eek:penwindow('content')">
<area shape="circle" coords="184,502,56" href="contact.htm"
target="#frame" alt="Contact Me" onClick="javascript:eek:penwindow('content')">
</map>
</body>
</html>
Click to expand...
Hi James,
Try this
<script type="text/javascript">
var events = {};
events.prototype = {
activeDiv:null,
toggle:function(div){
if(this.activeDiv != null){
document.getElementById(this.activeDiv).style.display =
'none';
}
document.getElementById(div).style.display='block';
}
}
</script>
In onclick event just tipe events.toggle('myDivId').
<area shape="circle" coords="150,389,49" href="events.htm"
target="#frame" alt="Events" onClick="events.toggle('myDivId')">

Filipe Tomita
 
J

JS

Thanks Filipe but am I missing something because it still doesn't work. The
new code is below. If it cant be dont with divs is there another way maybe.
It needs to work in Firefox and IE 6+.
Many thanks all
James

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="main.css"/ >
<script type="text/javascript">
var events = {};
events.prototype = {
activeDiv:null,
toggle:function(div){
if(this.activeDiv != null){
document.getElementById(this.activeDiv).style.display =
'none';
}
document.getElementById(div).style.display='block';
}
}
</script>

</head>

<body topmargin="0" marginwidth="0" marginheight="0">

<table width="579" height="582" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="palette" class="palette" name="palette" style="display:
block;">
<img src="images/backgroundpalette.png" border="0"
usemap="#paletteMap" start="fileopen" target="#frame">
</div>
<div name="content" id="content" class="content" style="display:
none;">
<iframe src="home.htm" frameborder="0" width="579" height="582"
allowtransparency="true"/>
</div>

</td>
</tr>
</table>
<map name="paletteMap" id="paletteMap">
<area shape="circle" coords="478,177,46" href="home.htm" target="#frame"
alt="Homepage" onClick="events.toggle('content')">
<area shape="circle" coords="183,281,50" href="gallery.htm"
target="#frame" alt="Gallery" onClick="events.toggle('content')">
<area shape="circle" coords="311,489,49" href="links.htm" target="#frame"
alt="Links" onClick="javascript:events.toggle('content')">
<area shape="circle" coords="323,160,50" href="about.htm" target="#frame"
alt="About Me" onClick="events.toggle('content')">
<area shape="circle" coords="150,389,49" href="events.htm" target="#frame"
alt="Events" onClick="events.toggle('content')">
<area shape="circle" coords="184,502,56" href="contact.htm"
target="#frame" alt="Contact Me" onClick="events.toggle('content')">
</map>
</body>
</html>


--
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

layer switching 5
<div> help 1
Help with my responsive home page 2
Flip-Cards with Local Images 1
Help with Visual Lightbox: Scripts 2
Login form no longer working 2
Please Help? 0
Help with code 0

Members online

No members online now.
Total: 22 (members: 0, guests: 22)
Robots: 319

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,009
Latest member
GidgetGamb

Latest Threads

Top