Hi, brand new member here.
I have a javascript function that changes the visibility of a set of
stacked divs so that when an onclick action fires, all but one of the
stacked divs will become visibility:hidden. I grabbed it from the
javascript forum here: http://www.developer.be/forums/index.cfm from a
post dated 2-21-2004 with the subject: z-index manipulation. In the
fifth reply from Lazy_Programmer writes:
<script>
function gal(i) {
window.document.getElementById("gal1").style.visibility="hidden";
window.document.getElementById("gal2").style.visibility="hidden";
window.document.getElementById("gal3").style.visibility="hidden";
window.document.getElementById(i).style.visibility="visible";
}
</script>
<input type="button" value="Show Gal 1" onclick="gal('gal1')" >
<input type="button" value="Show Gal 2" onclick="gal('gal2')" >
<input type="button" value="Show Gal 3" onclick="gal('gal3')" >
<span id="gal1">a</span>
<span id="gal2">b</span>
<span id="gal3">c</span>
I modified it to work for me like this:
<script>
function frame(silver) {
window.document.getElementById("silver").style.visibility="hidden";
window.document.getElementById("chocolate").style.visibility="hidden";
window.document.getElementById("gold").style.visibility="hidden";
window.document.getElementById(silver).style.visibility="visible";
}
function frame(chocolate) {
window.document.getElementById("silver").style.visibility="hidden";
window.document.getElementById("chocolate").style.visibility="hidden";
window.document.getElementById("gold").style.visibility="hidden";
window.document.getElementById(chocolate).style.visibility="visible";
}
function frame(gold) {
window.document.getElementById("silver").style.visibility="hidden";
window.document.getElementById("chocolate").style.visibility="hidden";
window.document.getElementById("gold").style.visibility="hidden";
window.document.getElementById(gold).style.visibility="visible";
}
</script>
<div id="silver2" onclick="frame('silver') "><img
src="img/typeSILVER.gif" /></div>
<div id="chocolate2" onclick="frame('chocolate')" ><img
src="img/typeCHOCOLATE.gif" /></div>
<div id="gold2" onclick="frame('gold')" ><img src="img/typeGOLD.gif" /></div>
It works beautifully, but now I am trying the same thing using
onmouseover instead of onclick and I am getting nothing. Pasted below
is part of the script and the xhtml to trigger the behavior. Please
excuse the goofy names. ;)
<script>
function showit(framed-babysbath) {
window.document.getElementById("framed-babysbath").style.visibility="hidden";
window.document.getElementById("framed-bottletree").style.visibility="hidden";
window.document.getElementById("framed-fairyland").style.visibility="hidden";
window.document.getElementById("framed-garden-cradle").style.visibility="hidden";
window.document.getElementById("framed-googly").style.visibility="hidden";
window.document.getElementById("framed-love").style.visibility="hidden";
window.document.getElementById("framed-starsong").style.visibility="hidden";
window.document.getElementById(framed-babysbath).style.visibility="visible";
}
</script>
<div id="babysbath-sm" onmouseover="showit('framed-babysbath')">
<a href="babysbath.htm"><img src="img/FRAMES_BABYSBATH_SMALL.gif" />
</a>
</div>
I didn't paste in the positioning, but the div id babysbath-sm is in a
different part of the page than the div id framed-babysbath
Can anyone explain why it isn't working? I'm authoring it with DW CS
and viewing it in mozilla 2.0.0.14?
I've tried placing the omouseover event in the img tag as well but to no avail.
--
Steve Brantley
--
Steve Brantley
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
