Create a layer with a message on mouseover

effendi · May 14, 2005

I know this sounds like javascript menu and perhaps it is, but I have
taken a look at menu codes and found it too difficult to revamp
quickly. What I would like to do is a place a text is my webform. This
text is labelled "Important Notice". Onmouseover, I like to call
another layer which basically contains the notice without opening
another window. Onmouseout, the layer disapper. Can someone give me an
idea how this can be done quickly.

Thanks in advanced.

Evertjan. · May 14, 2005

wrote on 14 mei 2005 in comp.lang.javascript:

I know this sounds like javascript menu and perhaps it is, but I have
taken a look at menu codes and found it too difficult to revamp
quickly. What I would like to do is a place a text is my webform. This
text is labelled "Important Notice". Onmouseover, I like to call
another layer which basically contains the notice without opening
another window. Onmouseout, the layer disapper. Can someone give me an
idea how this can be done quickly.

I use Overlib for years now, very versatile and handy:

Thanks in advanced.

Not too advanced I hope.

Lee · May 14, 2005

(e-mail address removed) said:

I know this sounds like javascript menu and perhaps it is, but I have
taken a look at menu codes and found it too difficult to revamp
quickly. What I would like to do is a place a text is my webform. This
text is labelled "Important Notice". Onmouseover, I like to call
another layer which basically contains the notice without opening
another window. Onmouseout, the layer disapper. Can someone give me an
idea how this can be done quickly.

Thanks in advanced.

<html>
<head>
<style type="text/css">
#popup {position:absolute;
top:50; left:50;
z-index:1;
visibility:hidden;
border-width:5px;
border-style:groove;
background-color:#FFFFCC;
text-align:center;
padding:1em;
}
</style>
</head>
<body>

<div id="popup">
<h3>Important Notice</h3>
<p>This is the popup text message.<p>
<p>This is also part of the text.</p>
<button onclick="this.parentNode.style.visibility='hidden'">Close</button>
</div>

<div>
<p>This is the main part of the page.
</p><p>You might want to read this <a href="#"
onclick="document.getElementById('popup').style.visibility='visible'">
Important Message</a>.</p>
<p>Or maybe not.</p>
</div>
</body>
</html>

Avar · May 15, 2005

Actually there is one pure CSS solution too:

<style>
/* CSS hack by

*/
a.h:link{visibility:hidden;text-decoration:none}
a.h:visited{visibility:hidden;text-decoration:none}
a.h:hover{visibility:visible;text-decoration:none}
span.m{text-decoration:none;color:navy;position:absolute;background-color:li
ghtyellow;border:solid gray 1px;padding:8px}
span.v{visibility:visible;text-decoration:underline}
</style>
<body>
Some text <a href="#" class="h"><span class="v">Link</span>
<span class="m"><b>Important Notice</b><br><br>First line,<br>second
line,<br>etc</span></a> text continues

Avar Pentel

Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
why can't I set a value on mouseover?	1	Apr 25, 2009
Using scriptaculous, how to trigger mouseover effect ONLY if mousedover for a period of time	2	Apr 28, 2008
Executing a mouseover associated with another element	2	Jul 21, 2006
mouseover change image and text color.	2	May 19, 2006
Missing event targets with mouseover/mouseout in Firefox 2.0	2	Apr 28, 2008
Display image when mouseover on anchor	4	Sep 22, 2008
How to hide SELECT box under layer with transparency ?	0	Jan 26, 2007

Create a layer with a message on mouseover

effendi

Evertjan.

Lee

Avar

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads