Div layer switching

Discussion in 'Javascript' started by JS, Jan 11, 2007.

  1. JS

    JS Guest

    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>
    JS, Jan 11, 2007
    #1
    1. Advertising

  2. 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>

    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
    Filipe Tomita, Jan 11, 2007
    #2
    1. Advertising

  3. JS

    JS Guest

    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>


    --

    "Filipe Tomita" <> wrote in message
    news:...
    >
    > 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>

    > 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
    >
    JS, Jan 12, 2007
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?YzY3NjIyOA==?=

    do it in database layer or application layer

    =?Utf-8?B?YzY3NjIyOA==?=, Jan 26, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    422
    Karl Seguin [MVP]
    Jan 27, 2006
  2. et
    Replies:
    2
    Views:
    1,890
  3. dan
    Replies:
    25
    Views:
    1,314
    Uncle Bob (Robert C. Martin)
    Oct 28, 2003
  4. Dhananjay
    Replies:
    1
    Views:
    1,097
    sloan
    Dec 18, 2006
  5. JS

    layer switching

    JS, Jan 10, 2007, in forum: HTML
    Replies:
    5
    Views:
    403
    Neredbojias
    Jan 13, 2007
Loading...

Share This Page