Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

show/hide layer not working after last link 1

Status
Not open for further replies.
MikeyK

MikeyK

Programmer
Jul 29, 2001
7
AU
Thanks Kristof for getting me to this point.
Now the requirements have changed slightly.
The link which was last mouseover'ed has to stay 'on'or 'selected' regardless of where the mouse is.
The problem i am having is after i mouseover 'linkD', the other links wont work anymore - I cant figure out why or how to fix it

any help would be appreciated

Code: 
<html>
<head>

<SCRIPT language=JavaScript><!--
function showIt(layerID)
{
if(document.layers)
   document.layers[layerID].visibility=&quot;show&quot;;
if(document.all)
   document.all[layerID].style.visibility=&quot;visible&quot;;
}

function hideIt(layerID)
{
if(document.layers)
   document.layers[layerID].visibility=&quot;hide&quot;;
if(document.all)
   document.all[layerID].style.visibility=&quot;hidden&quot;;
}
// -->
</SCRIPT>

<STYLE type=text/css>
#layerA {
    BACKGROUND-COLOR: #FFFFFF; LEFT: 10px; POSITION: absolute; TOP: 50px; VISIBILITY: hidden; WIDTH: 300px
}
#layerB {
    BACKGROUND-COLOR: #FFFFFF; LEFT: 10px; POSITION: absolute; TOP: 50px; VISIBILITY: hidden; WIDTH: 300px
}
#layerC {
    BACKGROUND-COLOR: #FFFFFF; LEFT: 10px; POSITION: absolute; TOP: 50px; VISIBILITY: hidden; WIDTH: 300px
}
#layerD {
    BACKGROUND-COLOR: #FFFFFF; LEFT: 10px; POSITION: absolute; TOP: 50px; VISIBILITY: hidden; WIDTH: 300px
}
</STYLE>
</head>
<body>

<A href=&quot;#&quot; onmouseover=showIt('layerA');>Link A</a>    
<A href=&quot;#&quot; onmouseover=showIt('layerB');>Link B</a>
<A href=&quot;#&quot; onmouseover=showIt('layerC');>Link C</a>
<A href=&quot;#&quot; onmouseover=showIt('layerD');>Link D</a>
<div id=&quot;layerA&quot;>AAAAAAAA</div>
<div id=&quot;layerB&quot;>BBBBBBBB</div>
<div id=&quot;layerC&quot;>CCCCCCCC</div>
<div id=&quot;layerD&quot;>DDDDDDDD</div>
</body>
</html>
 
Sort by date Sort by votes
Hello again,

I've added an init() function that initializes an array at onload. The basic idea is to call a layer through a variable, not the whole statement.

The consequence of this is that you only need to check browsers just once (in init() ) and then call that variable.
Also, by using an array you can always check how many layers you have and loop through them (eg. a HideAll function).

I've learned everything that I know today from Dan Steinman ( so I suggest you take a look at his website. I've seen many sollutions for using layers, but this is definitely the best. B-)

Enough talk, here goes:

<html>
<head>

<SCRIPT language=JavaScript><!--
loaded = false;
lyrArr = new Array();

function init() {
if(document.layers) {
// netscape initialization
lyrArr[0] = document.layers[&quot;layerA&quot;];
lyrArr[1] = document.layers[&quot;layerB&quot;];
lyrArr[2] = document.layers[&quot;layerC&quot;];
lyrArr[3] = document.layers[&quot;layerD&quot;];
doShow = &quot;show&quot;;
doHide = &quot;hide&quot;;
} else {
// iexplorer initialization
lyrArr[0] = document.all[&quot;layerA&quot;].style;
lyrArr[1] = document.all[&quot;layerB&quot;].style;
lyrArr[2] = document.all[&quot;layerC&quot;].style;
lyrArr[3] = document.all[&quot;layerD&quot;].style;
doShow = &quot;visible&quot;;
doHide = &quot;hidden&quot;;
}
loaded = true;
}

function showIt(layerID)
{
if (loaded) {
for (i=0;i<lyrArr.length;i++) {
// hide all except current link
if (i == layerID) {
lyrArr.visibility=doShow;
} else {
lyrArr.visibility=doHide;
}
}
}
}

function hideIt(layerID)
{
if (loaded) {
lyrArr[layerID].visibility=doHide;
}
}
// -->
</SCRIPT>

<STYLE type=text/css>
#layerA {
BACKGROUND-COLOR: #FFFFFF; LEFT: 10px; POSITION: absolute; TOP: 50px; VISIBILITY: hidden; WIDTH: 300px
}
#layerB {
BACKGROUND-COLOR: #FFFFFF; LEFT: 10px; POSITION: absolute; TOP: 50px; VISIBILITY: hidden; WIDTH: 300px
}
#layerC {
BACKGROUND-COLOR: #FFFFFF; LEFT: 10px; POSITION: absolute; TOP: 50px; VISIBILITY: hidden; WIDTH: 300px
}
#layerD {
BACKGROUND-COLOR: #FFFFFF; LEFT: 10px; POSITION: absolute; TOP: 50px; VISIBILITY: hidden; WIDTH: 300px
}
</STYLE>
</head>
<body onload=&quot;init()&quot;>

<A href=&quot;#&quot; onmouseover=&quot;showIt(0)&quot;>Link A</a>
<A href=&quot;#&quot; onmouseover=&quot;showIt(1)&quot;>Link B</a>
<A href=&quot;#&quot; onmouseover=&quot;showIt(2)&quot;>Link C</a>
<A href=&quot;#&quot; onmouseover=&quot;showIt(3)&quot;>Link D</a>
<div id=&quot;layerA&quot;>AAAAAAAA</div>
<div id=&quot;layerB&quot;>BBBBBBBB</div>
<div id=&quot;layerC&quot;>CCCCCCCC</div>
<div id=&quot;layerD&quot;>DDDDDDDD</div>
</body>
</html>
 
Upvote 0 Downvote
Hm, since [ i ] is a TGML tag, It isn't shown on my code and just displays the text italic.

So, another attempt, just ignore the spaces: :)

if (loaded) {
for (i=0;i<lyrArr.length;i++) {
// hide all except current link
if (i == layerID) {
lyrArr[ i ].visibility=doShow;
} else {
lyrArr[ i ].visibility=doHide;
}
}
}

Gtz,

Kristof
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
423
gmmastros
gmmastros
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
935
xwb
xwb
HansMaulwurf
  • Locked
  • Question
AJAX not working after database migration from MySQL to SQL Server ( Undefined index)
Replies
0
Views
285
HansMaulwurf
HansMaulwurf
chrisjchrisj
  • Locked
  • Question
Allow camera access - show camera view -- don’t start recording video
Replies
0
Views
255
chrisjchrisj
chrisjchrisj

Part and Inventory Search

Sponsor

Back
Top