layer switching

Discussion in 'HTML' started by JS, Jan 10, 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 10, 2007
    #1
    1. Advertising

  2. JS

    Ed Seedhouse Guest

    On Wed, 10 Jan 2007 23:50:55 GMT, "JS" <>
    wrote:

    >Hi all,
    >Im having some troubles with layers on a site im developing.


    Why are you posting to alt.html There is no concept of "layers" in html
    or even in CSS. So this is not the appropriate group to be posting in.
    Since you seem to be using javascript to create the effect you seem to
    be wanting perhaps you should post in a javascript group.

    It does strike me as odd that you would want to make your page unusable
    to a good percentage of your visitors who won't have javascript enabled.
    Ed Seedhouse, Jan 11, 2007
    #2
    1. Advertising

  3. Gazing into my crystal ball I observed Ed Seedhouse <>
    writing in news::

    > On Wed, 10 Jan 2007 23:50:55 GMT, "JS" <>
    > wrote:
    >
    >>Hi all,
    >>Im having some troubles with layers on a site im developing.

    >
    > Why are you posting to alt.html There is no concept of "layers" in

    html
    > or even in CSS. So this is not the appropriate group to be posting

    in.
    > Since you seem to be using javascript to create the effect you seem to
    > be wanting perhaps you should post in a javascript group.
    >
    > It does strike me as odd that you would want to make your page

    unusable
    > to a good percentage of your visitors who won't have javascript

    enabled.
    >
    >


    Right - Evite does some very nasty Ajax that makes filling out a form
    impossible. You have to CLICK on the form element to make it active,
    and if you hit tab you are foobar and have to start from scratch.

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne Boswell, Jan 11, 2007
    #3
  4. JS

    the red dot Guest

    "Ed Seedhouse" <> wrote in message
    news:...
    > On Wed, 10 Jan 2007 23:50:55 GMT, "JS" <>
    > wrote:
    >
    > >Hi all,
    > >Im having some troubles with layers on a site im developing.

    >
    > Why are you posting to alt.html There is no concept of "layers" in html
    > or even in CSS. So this is not the appropriate group to be posting in.
    > Since you seem to be using javascript to create the effect you seem to
    > be wanting perhaps you should post in a javascript group.
    >
    > It does strike me as odd that you would want to make your page unusable
    > to a good percentage of your visitors who won't have javascript enabled.
    >


    just to be an old so and so - what percentage of visitors have javascript
    disabled?
    the red dot, Jan 12, 2007
    #4
  5. the red dot wrote:

    > just to be an old so and so - what percentage of visitors have javascript
    > disabled?


    Hard to say... 10%? Scroll down:
    <http://www.w3schools.com/browsers/browsers_stats.asp>

    Relying on JavaScript is like turning off your web server for nearly a
    month each year.

    --
    -bts
    -Motorcycles defy gravity; cars just suck
    Beauregard T. Shagnasty, Jan 12, 2007
    #5
  6. JS

    Neredbojias Guest

    To further the education of mankind, "Beauregard T. Shagnasty"
    <> vouchsafed:

    > the red dot wrote:
    >
    >> just to be an old so and so - what percentage of visitors have
    >> javascript disabled?

    >
    > Hard to say... 10%? Scroll down:
    > <http://www.w3schools.com/browsers/browsers_stats.asp>
    >
    > Relying on JavaScript is like turning off your web server for nearly a
    > month each year.


    And not using javascript is equivalent to crippling many very useful
    functions otherwise available.

    "Relying" is the keyword here. If the page doesn't work correctly with
    javascript disabled, it either shouldn't work at all or should present a
    simplified substitute version to the non-j/s user.

    --
    Neredbojias
    Infinity has its limits.
    Neredbojias, Jan 13, 2007
    #6
    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:
    418
    Karl Seguin [MVP]
    Jan 27, 2006
  2. et
    Replies:
    2
    Views:
    1,882
  3. dan
    Replies:
    25
    Views:
    1,311
    Uncle Bob (Robert C. Martin)
    Oct 28, 2003
  4. Dhananjay
    Replies:
    1
    Views:
    1,092
    sloan
    Dec 18, 2006
  5. JS

    Div layer switching

    JS, Jan 11, 2007, in forum: Javascript
    Replies:
    2
    Views:
    94
Loading...

Share This Page