stuck with stupid showhidelayers problem

Discussion in 'Web Design and Development' started by powerlily, Apr 26, 2007.

  1. powerlily macrumors newbie

    Joined:
    Jan 15, 2007
    #1
    Hello,
    I am almost finished my first site and I am stuck with a problem with the main page and I don't have a clue about how to solve it:

    I would like, when you roll over a layer (containing an image), to show another layer, simple as that
    I tried to do showhideLayers, but it says that img src is not supported by Explorer (?)
    can somebody please explain me how to do it?
    I know this is probably a really easy question, but I can't find the solution anywhere on line :eek:

    I feel such a leecher....
    thanks for any suggestions
     
  2. angelneo macrumors 68000

    Joined:
    Jun 13, 2004
    Location:
    afk
    #2
    Hmm... you mean using dreamweaver "behaviors" to do a show-hide layer? I seldom use that function but if you know some simple javascript, you can easily do that. e.g

    Code:
    <script language="javascript">
    function showhide() {
      if (document.getElementById('layerInQuestion').style.display=="none")
        document.getElementById('layerInQuestion').style.display="block";
      else
        document.getElementById('layerInQuestion').style.display="none";
    }
    </script>
    <img id="imageToClickToShowHide" onClick="showhide();" style="cursor:pointer" />
    <div id="layerInQuestion"> blah blah blah </div>
    
    or you can do
    Code:
    <script language="javascript">
    function showhide() {
      if (document.getElementById('layerInQuestion').style.visibility=="hidden")
        document.getElementById('layerInQuestion').style.visibility="visible";
      else
        document.getElementById('layerInQuestion').style.visibility="hidden";
    }
    </script>
    <img id="imageToClickToShowHide" onClick="showhide();" style="cursor:pointer" />
    <div id="layerInQuestion"> blah blah blah </div>
    
    depending on how you want the layout to be displayed after/before the layer disappear as both alter different style properties, but they can achieve the same effect.
     
  3. powerlily thread starter macrumors newbie

    Joined:
    Jan 15, 2007
    #3
    No, I don't know ANY javascript
    Ok.... the first one seems what I was looking for - some dummy questions:
    onClick does it mean onmouseover? because I am trying to make one image appear when the other one is rolled over...

    and, forgive me :
    what is "blah blah blah"?

    I know I shouldn't be doing things I am not able to do, but I have to...
     
  4. powerlily thread starter macrumors newbie

    Joined:
    Jan 15, 2007
    #4
    basically nothing happens, and when I add img id= the name of the image it adds another image

    if (document.getElementById('Layer4').style.display=="none")
    document.getElementById('Layer8').style.display="block";
    else
    document.getElementById('Layer8').style.display="none";
    }

    //-->
    </script>
    </head>
    <div id="Layer4"><a href="crossmediagames.html"><img src="mainpagecross.gif" onClick="showhide(Layer8)" alt="" name="" width="38" height="42" border="0" /> </a></div>
    what am I doing wrong?
     
  5. justG macrumors member

    justG

    Joined:
    Apr 9, 2007
    Location:
    Orlando, FL, US
    #5
    No. onmouseover is when you roll your mouse over something, hover over it. onClick is an event that's triggered when you actually click on that something. For example, you can make an image switch to a "highlight" version when you "onmouseover" it, and make the "highlight" version stick when you "onclick" it.
    It means "put whatever text you want here"; it's just dummy text, like lorem ipsum.

    I don't know if this'll help, because it uses onclick to show/hide layers instead of onmouseover, but theoretically you should just be able to replace one with the other and still have it function. Anyway, it's an old project (a few years old, now) I did, and it was for a class, so it should be pretty well documented. Feel free to view its source and learn what you can from it. The mini-site is a single html page and style sheet.
    http://gitagrrl.com/g/

    Hope it helps.
     
  6. Sdashiki macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #6
    Um, is the CSS :hover not good enough for you?

    Why not have the visibility of a DIV/class be set to hidden, and set to visible when :hover?

    Layers, thats bad. Is it not?


    checkout my site, shameless plug, to see what Im talking about.

    http://godofpoo.110mb.com/paintingcommG01.html
     
  7. justG macrumors member

    justG

    Joined:
    Apr 9, 2007
    Location:
    Orlando, FL, US
    #7
    No, it's not. Perhaps you're thinking of the earlier layers, which were a Netscape invention (IIRC) that used the not universally supported <layer> tag? If you look at the provided code, "layers" are just divs, and that's just fine. Hope that clears things up.
     
  8. Sdashiki macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #8
    Why use layers vs divs?

    I see no benefit, explain.

    Seems Layers = Divs and are not different?

    Z-Index, visibility, span, all very easy to grasp and implement.


    EDIT: found this http://simplythebest.net/scripts/DHTML_scripts/dhtml_script_59.html

    look at the bloated code needed for the simplistic rollover.

    this can be done with like a few lines of very simple CSS.
     
  9. justG macrumors member

    justG

    Joined:
    Apr 9, 2007
    Location:
    Orlando, FL, US
    #9
    There's nothing to explain, we *are* talking about using divs styled with CSS.
     
  10. angelneo macrumors 68000

    Joined:
    Jun 13, 2004
    Location:
    afk
    #10
    Sorry, just saw your reply, I think JustG has replied adequately.
     

Share This Page