Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Div layer switching

Reply
Thread Tools

Div layer switching

 
 
JS
Guest
Posts: n/a
 
      01-11-2007
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.vi sibility="hidden";
window.document.getElementById("content").style.zI ndex = "0";
window.document.getElementById("palette").style.vi sibility="hidden";
window.document.getElementById("palette").style.zI ndex = "0";
window.document.getElementById(elm).style.visibili ty="visible";
window.document.getElementById(elm).style.zIndex = "100";
}
</script>
</head>

<body topmargin="0" marginwidth="0" marginheight="0"
onLoad="javascriptpenwindow('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="javascriptpenwindow('content')">
<area shape="circle" coords="183,281,50" href="gallery.htm"
target="#frame" alt="Gallery" onClick="javascriptpenwindow('content')">
<area shape="circle" coords="311,489,49" href="links.htm" target="#frame"
alt="Links" onClick="javascriptpenwindow('content')">
<area shape="circle" coords="323,160,50" href="about.htm" target="#frame"
alt="About Me" onClick="javascriptpenwindow('content'))">
<area shape="circle" coords="150,389,49" href="events.htm" target="#frame"
alt="Events" onClick="javascriptpenwindow('content')">
<area shape="circle" coords="184,502,56" href="contact.htm"
target="#frame" alt="Contact Me" onClick="javascriptpenwindow('content')">
</map>
</body>
</html>





 
Reply With Quote
 
 
 
 
Filipe Tomita
Guest
Posts: n/a
 
      01-11-2007

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.vi sibility="hidden";
> window.document.getElementById("content").style.zI ndex = "0";
> window.document.getElementById("palette").style.vi sibility="hidden";
> window.document.getElementById("palette").style.zI ndex = "0";
> window.document.getElementById(elm).style.visibili ty="visible";
> window.document.getElementById(elm).style.zIndex = "100";
> }
> </script>
> </head>
>
> <body topmargin="0" marginwidth="0" marginheight="0"
> onLoad="javascriptpenwindow('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="javascriptpenwindow('content')">
> <area shape="circle" coords="183,281,50" href="gallery.htm"
> target="#frame" alt="Gallery" onClick="javascriptpenwindow('content')">
> <area shape="circle" coords="311,489,49" href="links.htm" target="#frame"
> alt="Links" onClick="javascriptpenwindow('content')">
> <area shape="circle" coords="323,160,50" href="about.htm" target="#frame"
> alt="About Me" onClick="javascriptpenwindow('content'))">
> <area shape="circle" coords="150,389,49" href="events.htm" target="#frame"
> alt="Events" onClick="javascriptpenwindow('content')">
> <area shape="circle" coords="184,502,56" href="contact.htm"
> target="#frame" alt="Contact Me" onClick="javascriptpenwindow('content')">
> </map>
> </body>
> </html>

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.disp lay =
'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

 
Reply With Quote
 
 
 
 
JS
Guest
Posts: n/a
 
      01-12-2007
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.disp lay =
'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>


--

"Filipe Tomita" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) oups.com...
>
> 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.vi sibility="hidden";
> > window.document.getElementById("content").style.zI ndex = "0";
> > window.document.getElementById("palette").style.vi sibility="hidden";
> > window.document.getElementById("palette").style.zI ndex = "0";
> > window.document.getElementById(elm).style.visibili ty="visible";
> > window.document.getElementById(elm).style.zIndex = "100";
> > }
> > </script>
> > </head>
> >
> > <body topmargin="0" marginwidth="0" marginheight="0"
> > onLoad="javascriptpenwindow('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="javascriptpenwindow('content')">
> > <area shape="circle" coords="183,281,50" href="gallery.htm"
> > target="#frame" alt="Gallery"

onClick="javascriptpenwindow('content')">
> > <area shape="circle" coords="311,489,49" href="links.htm"

target="#frame"
> > alt="Links" onClick="javascriptpenwindow('content')">
> > <area shape="circle" coords="323,160,50" href="about.htm"

target="#frame"
> > alt="About Me" onClick="javascriptpenwindow('content'))">
> > <area shape="circle" coords="150,389,49" href="events.htm"

target="#frame"
> > alt="Events" onClick="javascriptpenwindow('content')">
> > <area shape="circle" coords="184,502,56" href="contact.htm"
> > target="#frame" alt="Contact Me"

onClick="javascriptpenwindow('content')">
> > </map>
> > </body>
> > </html>

> 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.disp lay =
> '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
>



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
<div ... /> and <div ...></div> K Viltersten ASP .Net 4 03-31-2009 07:33 PM
Process Switching vs. Fast/CEF Switching? asdf Cisco 7 05-29-2007 05:26 PM
business layer, data access layer , presentation layer for asp.net using C#.net Dhananjay ASP .Net 1 12-18-2006 11:35 PM
NS/FF don't change div offsetWidth when div innerHTML is added toand div becomes wider mscir Javascript 3 06-26-2005 04:04 PM
Q: Div A inside Div B is larger than Div B Dwayne Madsen Javascript 1 06-01-2005 03:02 PM



Advertisments