PDA

Click to See Complete Forum and Search --> : Rollover options

wds
09-23-2003, 01:50 PM
Hi,
I am trying to create a javascript rollover menu that when you place your cursor over your text link, a graphic appears next to it. Basically you place your cursor over one area and the image appears in a different area.

Here's an example: http://www.frontpageworld.com/frontpagetools/metabiz/index.html

if you go to that page above, and you place your cursor on the left side navigation, you'll notice that the little arrow image shows up next to the text on the right.

If someone has the code for this or knows where i can get it, it would be a BIG help! THANK YOU!

Sincerely,
Jill:confused:
Fang
09-23-2003, 03:21 PM
Here's one way of doing it:

<style type="text/css">
<!--
div {width:100px;}
img.menu {
position:absloute;
border:0;
visibility:hidden;
float:right;
}
div a {
display: block;
border:1px solid #333;
text-decoration: none;
color:#06f;
background:#ffc;
}
div a:hover {
color:#000;
background:#ff0;
}
-->
</style>
</head>
<body>
<div>
<a href="apple.htm" onmouseover="RollOver(1);" onmouseout="RollOver(1);"><img class="menu" id="menu1" src="Images/arrow.gif" width="20" height="20">apple</a>
<a href="banana.htm" onmouseover="RollOver(2);" onmouseout="RollOver(2);"><img class="menu" id="menu2" src="Images/arrow.gif" width="20" height="20">banana</a>
<a href="cranberry.htm" onmouseover="RollOver(3);" onmouseout="RollOver(3);"><img class="menu" id="menu3" src="Images/arrow.gif" width="20" height="20">cranberry</a>
</div>
</body>
Charles
09-23-2003, 03:30 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example</title>

<style type="text/css">
<!--
li a:link, li a:visited {list-style-image:url(http://forums.webdeveloper.com/images/smilies/frown.gif)}
li a:active, li a:hover {list-style-image:url(http://forums.webdeveloper.com/images/smilies/smile.gif)}
-->
</style>

<ul>
<li><a href="fee.html">Fee</a></li>
<li><a href="fie.html">Fie</a></li>
<li><a href="foe.html">Foe</a></li>
<li><a href="fum.html">Fum</a></li>
</ul>
wds
09-24-2003, 09:40 AM
Fang and Charles,
Thanks for posting the scripts! I'll have a go at both later today and see which one is easiest for me to work with. Have a good one!

Cheers,
Jill
wds
09-24-2003, 11:41 AM
Hi Charles,
I got your script to work really easily but i have a couple questions:

1) do you have to use the absolute URl or can i use a relative path to the folder the image is located in?

2) I wanted the image to the right of the text. Is there a way to do this???

Thanks! Jill
Charles
09-24-2003, 11:53 AM
Originally posted by wds
Hi Charles,
I got your script to work really easily but i have a couple questions:

1) do you have to use the absolute URl or can i use a relative path to the folder the image is located in?

2) I wanted the image to the right of the text. Is there a way to do this???

Thanks! Jill 1) Relative paths are fine, but it would have been easier for you try it out than to ask.

2) There is but it doesn't work in MSIE. On the other hand, what I posted above only does works in MSIE.