Forum Moderators: open
Thank you
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head>
<title>Untitled</title>
<SCRIPT language="javascript" TYPE="text/javascript">
<!--
dd=document;NS=(dd.layers)?1:0;IE=(dd.all)?1:0;DOM=(dd.getElementById)?1:0
function showlr(L){
if(NS)dd.layers[L].visibility='show';
else if (IE)obg=dd.all[L];
else obg=dd.getElementById(L);
if(!NS)obg.style.visibility='visible'
}
function hidelr(L){
if(NS)dd.layers[L].visibility='hide';
else if (IE)obg=dd.all[L];
else obg=dd.getElementById(L);
if(!NS)obg.style.visibility='hidden'
}
-->
</SCRIPT>
</head>
<body>
<TABLE><TR><TD>
<img src="images/conserve_final.jpg" usemap="#1" alt="PASS YOUR MOUSE OVER" width="400" height="307">
<MAP NAME="1">
<AREA SHAPE="RECT" COORDS="52,104,170,184" HREF = "#" onmouseover="hidelr('Text4'),hidelr('Text3'),hidelr('Text2'),hidelr('Text1'),showlr('Textb3'),hidelr('Textb1'),hidelr('Textb2'),hidelr('Textb4'),hidelr('Text5')" TARGET="_self" ALT="">
<AREA SHAPE = "RECT" COORDS = "176,106,291,176" HREF = "#" onmouseover="showlr('Text1'),hidelr('Text3'),hidelr('Text2'),hidelr('Text4'),showlr('Textb1'),hidelr('Textb3'),hidelr('Textb2'),hidelr('Textb4'),hidelr('Text5')" TARGET = "_self" ALT="">
<AREA SHAPE = "RECT" COORDS = " 137,229,194,278" HREF="#" onmouseover="hidelr('Text3'),hidelr('Text4'),hidelr('Text2'),hidelr('Text1'),showlr('Textb2'),hidelr('Textb1'),hidelr('Textb3'),hidelr('Textb4'),showlr('Text5')" TARGET = "_self" ALT="">
<AREA SHAPE = "RECT" COORDS = " 291,151,403,215" HREF = "#" onmouseover="showlr('Text2'),hidelr('Text3'),hidelr('Text4'),hidelr('Text1'),showlr('Textb4'),hidelr('Textb1'),hidelr('Textb2'),hidelr('Textb3'),hidelr('Text5')" ALT="">
<AREA SHAPE = "DEFAULT" NOHREF ALT=""></MAP>
</TD><TD>
<div id="Text1" STYLE="position:absolute;visibility:show;">tEXT1</div>
<div id="Text2" STYLE="position:absolute;visibility:hidden;">TEXT2</div>
<div id="Text3" STYLE="position:absolute;visibility:hidden;">text3</div>
<div id="Text4" STYLE="position:absolute;visibility:hidden;">text4</div>
<div id="Text5" STYLE="position:absolute;visibility:hidden;">text5</div>
</TD></TR>
<TR><TD COLSPAN=2>
<div id="Textb1" STYLE="position:absolute;font-size:18px; color:#CCCCCC; text-decoration:none; font-family:arial; letter-spacing: -0.08105em; visibility:show; width=430">Textb1</div>
<div id="Textb2" STYLE="position:absolute;font-size:18px; color:#CCCCCC; text-decoration:none; font-family:arial; letter-spacing: -0.08105em; visibility:hidden; width=430">Textb2</div>
<div id="Textb3" STYLE="position:absolute;font-size:18px; color:#CCCCCC; text-decoration:none; font-family:arial; letter-spacing: -0.08105em; visibility:hidden; width=430">Textb3</div>
<div id="Textb4" STYLE="position:absolute;font-size:18px; color:#CCCCCC; text-decoration:none; font-family:arial; letter-spacing: -0.08105em; visibility:hidden; width=430">Textb4</div>
</TD></TR></TABLE>
<br><br><br><br>
<TABLE><TR><TD>
<a href="#" onmouseover="showlr('Text1'),hidelr('Text3'),hidelr('Text2'),hidelr('Text4'),hidelr('Text5')"title="">link example</a>
</TD></TR></TABLE>
</body>
</html>
Note that is SE friendly.
There is a small problem with this script (as a whole), which is demonstrated by the event handler:
onmouseover="showlr('Text1'),hidelr('Text3'),hidelr('Text2'),hidelr('Text4'),hidelr('Text5')"
This is OK with a few elements, but what if there are, say, twenty? We'll end up with a very long event handler. The problem is that the show/hide functions are too simple for the task, if toggling is the name of the game. The functions either need to do the toggling, or need an intermediary toggling function. Either way, if the script 'remembers' which element is currently visible, then there's no need to go over all the elements that don't need having their state changed.
makepox,
Could you be a little more specific?: "multiple mouseover image changes". There are a few different things you could mean.
I check this thread hoping that someone will post something better :)
<html>
<head>
<style>
#buttons div,
#group0 div
{
width:150px;height:
40px;margin:15px;border:solid 1px #ccc;
}#buttons div{cursor: pointer; cursor:hand;}
#group0 div {visibility: hidden; }
#one {visibility: visible;}
</style>
<script>var currVisibleId;
function togVisible(id)
{
if(currVisibleId)
document.getElementById(currVisibleId).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";
currVisibleId = id;
}</script>
<head>
<body><div id="buttons">
<div onclick="togVisible('one')">one</div>
<div onclick="togVisible('two')">two</div>
<div onclick="togVisible('tre')">tre</div>
</div><div id="group0">
<div id="one">ONE</div>
<div id="two">TWO</div>
<div id="tre">TRE</div>
</div></body>
</html>
And this is what I understand by "Multiple Mouseover" in Makepox post. hey Makepox, where are U?
Why not simply adding another fuction as the example below.
I would appreciate if you could write your toogle function both for Netscape (hide) and IE (hidden)
Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head>
<style>
#buttons div {width:150px; height:40px; margin:15px; border:solid 1px #ccc; }
#group0 div {width:150px; height:40px; margin:15px; border:solid 1px #ccc; position:absolute;}
#group1 div {width:150px; height:40px; margin:15px; border:solid 1px #666; position:absolute;}
#buttons div{cursor:pointer; cursor:hand;}
#group0 div {visibility:hidden;}
#group1 div {visibility:hidden;}
#one {visibility: visible;} </style>
<script>
var currVisibleId;
function togVisible(id) { if(currVisibleId) document.getElementById(currVisibleId).style.visibility="hidden"; document.getElementById(id).style.visibility="visible"; currVisibleId=id; }
var currVisibleId2;
function togVisible2(id) { if(currVisibleId2) document.getElementById(currVisibleId2).style.visibility="hidden"; document.getElementById(id).style.visibility="visible"; currVisibleId2=id; }
</script>
</head>
<body>
<div id="buttons">
<div onmouseover="togVisible('one'),togVisible2('one1')">one</div>
<div onmouseover="togVisible('two'),togVisible2('two1')">two</div>
<div onmouseover="togVisible('tre'),togVisible2('tre1')">tre</div>
</div>
<div id="group0">
<div id="one">ONE</div>
<div id="two">TWO</div>
<div id="tre">TRE</div>
</div>
<br><br><br>
<div id="group1">
<div id="one1">ONE1</div>
<div id="two1">TWO1</div>
<div id="tre1">TRE1</div>
</div>
</body></html>
I have taken the actual action out into another function.
The whole idea is easy to develop to cover anything. The notion of what a 'group' is, or what 'group members' are can be abstracted as far as you like. They could be processes.
[pre]
<html>
<head>
<style>
#buttons div,
#elements div
{
width:150px;height:40px;
margin:15px;border:solid 1px #ccc;
}#elements div{visibility: hidden;}
.buttons div{cursor: pointer; cursor:hand;}
#apple,
#dog
{visibility: visible;}
</style>
<script>
var toggler = {fruit: 'apple', mammal: 'cat'};
// or, if no initial: // toggler = {};
function togVisible(id,set)
{
if(toggler[set])
setVisibility(toggler[set],false);
setVisibility(id,true);
toggler[set] = id;
}
function setVisibility(id,on)
{
document.getElementById(id).style.visibility =
on? "visible":"hidden";
}
</script>
<head>
<body>
<div style = "float:left">
<div id="buttons">
<div onclick="togVisible('apple','fruit')">apple</div>
<div onclick="togVisible('pear','fruit')">pear</div>
<div onclick="togVisible('banana','fruit')">banana</div>
<div onclick="togVisible('dog','mammal')">dog</div>
<div onclick="togVisible('cat','mammal')">cat</div>
<div onclick="togVisible('dolphin','mammal')">dolphin</div>
</div>
</div>
<div style = "float:left">
<div id="elements">
<div id="apple" style="visibility: visible;">APPLE</div>
<div id="pear">PEAR</div>
<div id="banana">BANANA</div>
<div id="dog">DOG</div>
<div id="cat" style="visibility: visible;">CAT</div>
<div id="dolphin">DOLPHIN</div>
</div>
</div>
</body>
</html>
[/pre]
I would appreciate if you could write your toogle function both for Netscape (hide) and IE (hidden)
Where have you been? :)
That's only for Netscape 4, which as far as I'm concerned is dead - although nobody's got around to burying it yet (under 1%?). Anyway, the setVisibility function wraps that up, so if you like, you can just amend them implementation.
..but there's more too:
For it to work in NN4
- getElementById doesn't work
- The target divs will need to be positioned
- To reference the elements, since they are nested in abs pos divs, we need to do a recursive process, because NN4 considers them separate documents.
Sorry if you have to get used to my home grown terminology. In the case you just posted, (in my little world) I consider that you still have just one 'toggle group'. Each element of this group is made up of a pair of elements. You avoid having to write two function calls in the event handler by making your functions more generic. Perhaps by taking my example, and calling setVisibility twice in the first function.
Try it out.
hmmm... Just lost! It was an old script and was not aware that it was only for NS4 :)
Yeah, I understand now what you mean by one toggle group.
Indeed, I am not use to your terminology (bit hard for me to get it right). But, still, this is a great post, I will keep it to mofidy my OLD example.
Thanks Bernard
Don't modify it too much. I had a think in-between. I managed to confuse myself a little, because I don't often use event handlers, but have the script add behaviour (not IE behaviors) according to type or position. This system does need some kind of initialisation though.
What I was suggesting in my last won't actually work, as is.
The code you posted is, on the balance of simplicity, as good as any. Any complaint I had about the original has gone. If you have 400 pairs, you still only have 2 function calls per event handler...and what's wrong with that? Nothing really.
In fact, without a script that involves some kind of initialisation, or ids hard-coded into arrays, it would be the best way, if, for instance, the elements in each pair had to do something different {eg: one shows, the other turns blue}.
Just for the sake of it, and considering that in the current case both elements in a pair do the same thing, I have done a version that only has one call per event handler, and is expandable in this 'dimension' too, and you don't ahve to turn the same number of elements on/off each time if you don't want.
function call:
togVisible(['one','one1'])[pre]
var currVisibleIds = [];
function togVisible(ids)
{
var id, k;
k=0;
while(id=currVisibleIds[k++])
setVisibility(id,false);
k=0;
while(id=ids[k++])
setVisibility(id,true); currVisibleIds=ids;
}
function setVisibility(id,on)
{
document.getElementById(id).style.visibility =
on? "visible":"hidden";
}
[/pre]
Note that, by having an array to start with, even if it's empty, then we get rid of the 'if' condition in the function, which was upsetting it's aesthetic purity.
To get it to work with multiple groups, just amend it so that the global 'holding' variable becomes an object. That does mean, though, that the 'if' condition will have to go back into our function - unless you feel like explicitly setting every possible group's array from the start:
var toggler = {group0:[],group1:[]};..it's probably not worth it just to avoid an 'if(toggler[set])' in the function.
toggle group
A collection of 'members'. The only concept that necessarily connects the members of a group is the simple fact that when one goes to an 'on' state, any previous one goes to 'off'.
toggle group member
Could be anything. An element, a collection of elements, global variables etc
- or an active process.
Each member could also be part of another group.
on/off state
Anything. A member's constituents might do different things.
Could be "do what you do" / "stop doing what you do".
It's all an abstraction. A group could have two members.
#1 A set of divs. on: visible; off: hidden
#2 An image of a rabbit. on: moving in circles; off: moving up and down
When we show the divs (via the group) the rabbit stops circling, and moves up and down.
Alternatively, with an old-style TV set, a group would consist of members that were a each composite of {button,channel,your mum's mood}
I'll give them all a roll...
But to specify myself. On the site, there will be maybe 20 pictures. Once the mouse goes over them, they change to a second picture, but don't switch back to the original when the mouse leaves the picture. I've had problems with this, because scripts I've written won't support many mouseover effects on the same page, and I couldn't figure out how to stop it from switching back.
onmouseout
