Closed Thread Icon

Topic awaiting preservation: mouse over menu that goes up (Page 1 of 1) Pages that link to <a href="http://ozoneasylum.com/backlink?for=21404" title="Pages that link to Topic awaiting preservation: mouse over  menu that goes up (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: mouse over  menu that goes up <span class="small">(Page 1 of 1)</span>\

 
bluedogrose
Nervous Wreck (II) Inmate

From:
Insane since: Apr 2004

posted posted 04-17-2004 02:05

I have a client that wants links at the bottom of the page, several of which, on mouse over, she wants the sublinks to appear above the link text. Does anyone know a script for this that isn't too complicated?
I found one on dynamic drive that "floats" on mouse over, but this has a variable depending on where the mouse hits the link. All the scripts for menus I've found so far work with the sublinks appearing beneath the link text.

Anyone that can point me in the right (or better) direction? I don't want to get into flash, but I can change the text links to images if need be. My knowledge of javascript is about a months worth of heavy surfing and getting a headache from the visual quickstart guide, so speak slowly please, and no big words.

Thanks.

bluedogrose
Nervous Wreck (II) Inmate

From:
Insane since: Apr 2004

posted posted 04-18-2004 01:41

okay here's what I did:

Changed text links into small .jpg images of the text. Created alternate images that showed the sub links text appearing.
Inserted images as mouse roll over images with the images mapped for the sublinks.

I guess these aren't really menus, just a form of using images as links for navigation. My ignorance is showing.

I would still like to know the script for doing this with text, not images, if anyone can still point me in the right direction.

[code]
<html>
<head>
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v2.0
if (document.MM_swapImgData != null)
for (var i=0; i<(document.MM_swapImgData.length-1); i+=2)
document.MM_swapImgData[i].src = document.MM_swapImgData[i+1];
}

function MM_preloadImages() { //v2.0
if (document.images) {
var imgFiles = MM_preloadImages.arguments;
if (document.preloadArray==null) document.preloadArray = new Array();
var i = document.preloadArray.length;
with (document) for (var j=0; j<imgFiles.length; j++) if (imgFiles[j].charAt(0)!="#"){
preloadArray[i] = new Image;
preloadArray[i++].src = imgFiles[j];
} }
}

function MM_swapImage() { //v2.0
var i,j=0,objStr,obj,swapArray=new Array,oldArray=document.MM_swapImgData;
for (i=0; i < (MM_swapImage.arguments.length-2); i+=3) {
objStr = MM_swapImage.arguments[(navigator.appName == 'Netscape')?i:i+1];
if ((objStr.indexOf('document.layers[')==0 && document.layers==null) ||
(objStr.indexOf('document.all[') ==0 && document.all ==null))
objStr = 'document'+objStr.substring(objStr.lastIndexOf('.'),objStr.length);
obj = eval(objStr);
if (obj != null) {
swapArray[j++] = obj;
swapArray[j++] = (oldArray==null || oldArray[j-1]!=obj)?obj.srcldArray[j];
obj.src = MM_swapImage.arguments[i+2];
} }
document.MM_swapImgData = swapArray; //used for restore
}
//-->
</script>
</head>

<body bgcolor="#000000" text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" onLoad="MM_preloadImages('images/aboutb.jpg','#1082233580875')">
<p>
<div align="center"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('document.about','document.about','images/aboutb.jpg','#1082233580875')"><img name="about" border="0" src="images/about.jpg" width="89" height="93" usemap="#moreabout" alt="About"></a></div>
</p>
<map name="moreabout">
<area shape="rect" coords="1,49,71,67" href="aboutlinks.html" alt="links">
<area shape="rect" coords="0,25,71,48" href="about.html" alt="contact">
<area shape="rect" coords="0,0,71,25" href="aboutbio.html" alt="bio">
</map>
</body>
</html>

norm
Paranoid (IV) Inmate

From: [s]underwater[/s] under-snow in Juneau
Insane since: Sep 2002

posted posted 04-18-2004 06:09

bluedogrose:

I'm not sure you are going to find 'the script' to do what you described, because there is no one single way to do anything in programming. That chunk of Javascript that Dreamweaver spits out when you click on your selection can be written in more ways than it is possible to count. And to me, most of those ways just won't make a damn bit of sense to me, because I didn't go through the process of thinking them out and coding them.

Of course I don't need to understand them for them to work. But what if I want to make the code do something just a little different, like making a menu pop up instead of drop down.....?

What I'm suggesting is that you dig out that visual quickstart javascript book, and maybe an O'Reilly manual and start to code. Here is a spot to start from:

1) make a few 'pop-up menus' in your html code, use CSS to set their display to none and absolute positioning to place them where you want them to appear. And let's adjust the z-index to make sure it's on top.

code:
<div id="popM1" style="position:absolute;top:400px;left:200px;display:none;z-index:10">
<table>
<tr>
<td>
<a href="page1.html">link 1</a><br />
<a href="page2.html">link 2</a><br />
<a href="page3.html">link 3</a><br />
</td>
</tr>
</table>
</div>



2) write a javascript function to toggle the display of the menu to 'block'.

code:
function popMenu(which){
document.getElementById(which).style.display='block';
}


now call this function with an on mouseover event handler- onmouseover="popMenu('popM1')"


Now when you mouse-over what ever element you assigned the eventhandler to, your first menu will appear right where you want it to.

3) write a javascript function to toggle the menu's display back to 'none', so you can make it go away. This function should be fairly easy to figure out by examining the first one and making a few changes. Of course, you then need to assign it to an event handler (or more than one) to call this function.

By now, if you are actually coding this, you will probably want to get fancy and make menus go away after a set period of time. So dig into your books and look up 'setTimeout()'........

Good Luck and have fun coding!
Post your results here and we will all admire your handywork, or pitch in with advice, whichever seems appropriate.

/* Sure, go ahead and code in your fancy IDE. Just remember: it's all fun and games until someone puts an $i out */

bluedogrose
Nervous Wreck (II) Inmate

From: Seattle WA
Insane since: Apr 2004

posted posted 04-19-2004 22:44

thanks Norm

I will get to work, being a little dislexic I often get lost and overwhelmed in the books. Time was of the essence in this case, but I will follow your suggestions to see if I can get my head around it..

Courtney Killed Kurt.

« BackwardsOnwards »

Show Forum Drop Down Menu