PDA

View Full Version : Mouse Over Help

Kram
07-13-2004, 02:35 AM
I was wondering if you can have a small list (vertically) of letters A through to Q (ie. A B C D ... Q) and when you out your mouse over one of those letters a little message appears aboue the letter explaining what will be under each link? I was thinking along the lines of div hidden properties, but I dont know how to implement it.

Please Help Champions!
Pauliostro
07-13-2004, 03:08 AM
Cut and paste this into a new .html document... is it what your after?? (I know not the cleanest code) ...


<html>
<head>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<div id="a" style="position:absolute; left:19px; top:56px; width:121px; height:118px; z-index:1; background-color: #FFFF00; layer-background-color: #FFFF00; border: 1px none #000000; visibility: hidden;">apples<br>a..<br>etc</div>
<div id="b" style="position:absolute; left:19px; top:73px; width:121px; height:118px; z-index:1; background-color: #FFFF00; layer-background-color: #FFFF00; border: 1px none #000000; visibility: hidden;">bananas<br>b...<br>etc</div>
<div id="c" style="position:absolute; left:19px; top:91px; width:121px; height:118px; z-index:1; background-color: #FFFF00; layer-background-color: #FFFF00; border: 1px none #000000; visibility: hidden;">carrots<br>c... <br>etc</div>
<div id="d" style="position:absolute; left:19px; top:108px; width:121px; height:118px; z-index:1; background-color: #FFFF00; layer-background-color: #FFFF00; border: 1px none #000000; visibility: hidden;">dogs<br>d..<br>etc</div>
<div id="e" style="position:absolute; left:19px; top:129px; width:121px; height:118px; z-index:1; background-color: #FFFF00; layer-background-color: #FFFF00; border: 1px none #000000; visibility: hidden;">eggs<br>e..<br>etc</div>
<a href="#" onMouseOver="MM_showHideLayers('a','','show')" onMouseOut="MM_showHideLayers('a','','hide')"><br>
a</a><br>
<a href="#" onMouseOver="MM_showHideLayers('b','','show')" onMouseOut="MM_showHideLayers('b','','hide')">b</a><br>
<a href="#" onMouseOver="MM_showHideLayers('c','','show')" onMouseOut="MM_showHideLayers('c','','hide')">c</a><br>
<a href="#" onMouseOver="MM_showHideLayers('d','','show')" onMouseOut="MM_showHideLayers('d','','hide')">d</a><br>
<a href="#" onMouseOver="MM_showHideLayers('e','','show')" onMouseOut="MM_showHideLayers('e','','hide')">e</a>
</body>
</html>
Kram
07-13-2004, 06:13 AM
First of all Thanks, but Im getting an object expercted error at line 39
IKLOP
07-13-2004, 06:28 AM
have to remove the sad face ;)

<html>
<head>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<div id="a" style="position:absolute; left:19px; top:56px; width:121px; height:118px; z-index:1; background-color: #FFFF00; layer-background-color: #FFFF00; border: 1px none #000000; visibility: hidden;">apples<br>a..<br>etc</div>
<div id="b" style="position:absolute; left:19px; top:73px; width:121px; height:118px; z-index:1; background-color: #FFFF00; layer-background-color: #FFFF00; border: 1px none #000000; visibility: hidden;">bananas<br>b...<br>etc</div>
<div id="c" style="position:absolute; left:19px; top:91px; width:121px; height:118px; z-index:1; background-color: #FFFF00; layer-background-color: #FFFF00; border: 1px none #000000; visibility: hidden;">carrots<br>c... <br>etc</div>
<div id="d" style="position:absolute; left:19px; top:108px; width:121px; height:118px; z-index:1; background-color: #FFFF00; layer-background-color: #FFFF00; border: 1px none #000000; visibility: hidden;">dogs<br>d..<br>etc</div>
<div id="e" style="position:absolute; left:19px; top:129px; width:121px; height:118px; z-index:1; background-color: #FFFF00; layer-background-color: #FFFF00; border: 1px none #000000; visibility: hidden;">eggs<br>e..<br>etc</div>
<a href="#" onMouseOver="MM_showHideLayers('a','','show')" onMouseOut="MM_showHideLayers('a','','hide')"><br>
a</a><br>
<a href="#" onMouseOver="MM_showHideLayers('b','','show')" onMouseOut="MM_showHideLayers('b','','hide')">b</a><br>
<a href="#" onMouseOver="MM_showHideLayers('c','','show')" onMouseOut="MM_showHideLayers('c','','hide')">c</a><br>
<a href="#" onMouseOver="MM_showHideLayers('d','','show')" onMouseOut="MM_showHideLayers('d','','hide')">d</a><br>
<a href="#" onMouseOver="MM_showHideLayers('e','','show')" onMouseOut="MM_showHideLayers('e','','hide')">e</a>
</body>
</html>
Kram
07-13-2004, 06:33 AM
Ok great start...

few things:

1. (not hard I know) but i need the horizontally, i know i said vertically, but i get them confused sometimes.

2. I need them to appear in the same spot directly above the list of letters. Kind of like those "alt" things over images. But in one spot
Subjective Effe
07-13-2004, 12:43 PM
If the letters themselves are links forget that cumbersome javascript and use css.
Like this:

CSS
div#links a span{display: none;}
div#links a:hover span{
display: block;
position: absolute;
top: 20px;
left: 310px;
}

HTML
<div id="links">
<a href="">A<span>Link details</span></a>
<a href="">B<span>Link details</span></a>
</div>

And you can set the span text to display anywhere you want by altering the highlighted top and left.
Sweet. Derived from the method at css/edge.
Kram
07-13-2004, 07:50 PM
ok that looks easier, but heres what Ive goy so far:


<html>

<head>
<style>
div#links a span{display: none;}
div#links a:hover span{
display: block;
position: absolute;
top: 20px;
left: 310px;
}
</style>
</head>


<body>

<div id="links">
<a href="">A<span>Link details</span></a>
<a href="">B<span>Link details</span></a>
</div>

</body>

</html>


Whats wrong? Nothing shows up yet, I would look into it more but im at work and have alot of work to do. So i really do appreciate the help guys! :)
Kram
07-13-2004, 08:25 PM
I suppose just for clarification. Here is what I would like it to look like:


|-----------------|
| empty cell |
|-----------------|
| A B C D E F G H |
|-----------------|


so when you put the mouse over A or B or C then the empty cell would suddenly have text in it according to the letter you hover over.
Kind of like an upwards menu i guess. :)
Subjective Effe
07-13-2004, 10:39 PM
The code I posted can be used for that. You can add positioning to the div#link and different positioning for the text that is revealed on mouseover.

Check my site for exactly that. :D

www.medicaltextbooks.co.uk
Kram
07-14-2004, 12:11 AM
kick ass, thats exactly what I want, could i please have a look at your style sheet used to do that?

<edit>its ok i got it, cheers buddy...
for anyone who is interested:

<html>
<head>
<style>
div#links a:hover{
background:none;
}

div#links a{
text-decoration: none;
}
div#links a span{display: none;}
div#links span{display: none;}
div#links a:hover span{
display: block;
position: absolute;
top: 10px;
left: 10px;
color: black;
}
</style>
</head>

<body>
<br>
<div id="links">
<a href="">A<span>Link details A</span></a>
<a href="">B<span>Link details B</span></a>
<a href="">C<span>Link details C</span></a>
<a href="">D<span>Link details D</span></a>
</div>
</body>

</html>

</edit>
Subjective Effe
07-14-2004, 03:09 PM
Yeah, css is great!