...

View Full Version : how to create multiple corresponding text rollovers



bax
12-07-2009, 11:27 PM
i am creating a header for a webpage. the header has two text menus (no images). the first menu (menu A) is like this:

link 1a / link 2a / link 3a

the second menu (menu B) is like this:

link 1b
link 2b
link 3b

i would like to use javascript/css to do the following:

when you rollover link 1a, three things happen: link 1a changes color, link 1b changes color, and and link 1b adds a line of text (so it reads: link 1b : text 1b)

i would also like- and this is where i am having trouble- for the following to happen: when you rollover link 1b, link 1b changes color and adds the additional text, as well as link 1a changes color.

it doesn't seem so bad when i write it out here, but i can't figure out how to do it. any help is appreciated.

Old Pedant
12-08-2009, 02:28 AM
<html>
<head>
<style type="text/css">
a { text-decoration: none;
color: blue;
}
</style>
<script type="text/javascript">
function mover(which)
{
document.getElementById("linkA"+which).style.color="red";
document.getElementById("linkB"+which).style.color="red";
document.getElementById("text"+which).style.visibility="visible";
}
function mout(which)
{
document.getElementById("linkA"+which).style.color="blue";
document.getElementById("linkB"+which).style.color="blue";
document.getElementById("text"+which).style.visibility="hidden";
}
</script>
</head>
<body>
<a id="linkA1" href="#" onmouseover="mover(1)" onmouseout="mout(1)">ONE A</a>
&nbsp;&nbsp:&nbsp;&nbsp;
<a id="linkA2" href="#" onmouseover="mover(2)" onmouseout="mout(2)">TWO A</a>
&nbsp;&nbsp:&nbsp;&nbsp;
<a id="linkA3" href="#" onmouseover="mover(3)" onmouseout="mout(3)">THREE A</a>
<br/><br/>
<a id="linkB1" href="#" onmouseover="mover(1)" onmouseout="mout(1)">ONE B</a>
<span id="text1" style="visibility: hidden;">Text One</span>
<br/>
<a id="linkB2" href="#" onmouseover="mover(2)" onmouseout="mout(2)">ONE B</a>
<span id="text2" style="visibility: hidden;">Second message</span>
<br/>
<a id="linkB3" href="#" onmouseover="mover(3)" onmouseout="mout(3)">ONE B</a>
<span id="text3" style="visibility: hidden;">Three's a crowd</span>
<br/>
</body>
</html>

Other ways possible. This one is simple.

bax
12-08-2009, 03:45 PM
works perfectly
gracias

bax
12-22-2009, 08:00 PM
question: how could i use the same functionality, but different text styles? for example, in this case to make ONE A and ONE B red, and to make TWO a and TWO B purple?

Old Pedant
12-23-2009, 07:09 PM
You mean like this???

function mover(which)
{
document.getElementById("linkA"+which).style.color= which == 1 ? "red" : "green";
document.getElementById("linkB"+which).style.color= which == 1 ? "red" : "green";
document.getElementById("text"+which).style.visibility="visible";
}
If not that, explain more what you mean.

bax
12-23-2009, 09:05 PM
yes, that is what i meant. simple and works. thanks again

bax
01-07-2010, 11:45 PM
ok, sorry to beat this into the ground, but how then could i add one more color... in other words, to make link1a/1b red, 2a/2b purple, and 3a/3b green?

Old Pedant
01-08-2010, 12:43 AM
Not sure what you mean.

This?


<html>
<head>
<style type="text/css">
a { text-decoration: none;
color: blue;
}
</style>
<script type="text/javascript">
var choices = [ "blue", "red", "purple", "green" ];

function mover(which)
{
document.getElementById("linkA"+which).style.color=
document.getElementById("linkB"+which).style.color= choices[which];
document.getElementById("text"+which).style.visibility="visible";
}
function mout(which)
{
document.getElementById("linkA"+which).style.color="blue";
document.getElementById("linkB"+which).style.color="blue";
document.getElementById("text"+which).style.visibility="hidden";
}
</script>
</head>
<body>
<a id="linkA1" href="#" onmouseover="mover(1)" onmouseout="mout(1)">ONE A</a>
&nbsp;&nbsp:&nbsp;&nbsp;
<a id="linkA2" href="#" onmouseover="mover(2)" onmouseout="mout(2)">TWO A</a>
&nbsp;&nbsp:&nbsp;&nbsp;
<a id="linkA3" href="#" onmouseover="mover(3)" onmouseout="mout(3)">THREE A</a>
<br/><br/>
<a id="linkB1" href="#" onmouseover="mover(1)" onmouseout="mout(1)">ONE B</a>
<span id="text1" style="visibility: hidden;">Text One</span>
<br/>
<a id="linkB2" href="#" onmouseover="mover(2)" onmouseout="mout(2)">TWO B</a>
<span id="text2" style="visibility: hidden;">Second message</span>
<br/>
<a id="linkB3" href="#" onmouseover="mover(3)" onmouseout="mout(3)">THREE B</a>
<span id="text3" style="visibility: hidden;">Three's a crowd</span>
<br/>
</body>
</html>

Old Pedant
01-08-2010, 12:44 AM
Ahh...that is a1/b1 red, a2/b2 purple, a3/b3 green.

You should be able to rearrange it to what you need, no?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum