asked on

control the amount of time that onMouseOver verbiage is present

Hello,
I'm trying to implement onMouseOver which will provide my portal users with a message regarding the 'thing they are mousing over', I'm having trouble though in that the amount of time the message is available is sometimes not long enough, is there a corresponding 'setting' of some kind to specify the minimum amount of time the message will stay visible?

Or is there another way to do this.

I need to use the Image map most notably even though there are two other examples here.

Here is the code I'm using:
<p>
<center>
<img src="http://hosted5.faulknertechnologies.com/vhosts/markinson/knowledgebase/library/images/popup_demo_image" width=148 height=87 border=0 alt="An image map" usemap="#mymap">
</center>
<map name="mymap">
<area shape="RECT" COORDS='4,3,100,22' name="navigation"
alt="The Navigation Tree is a mechanism used to provide Portal users with a method of getting around the Portal."
title="navigation" onmouseover="window.status='blue'; return true" onmouseout="window.status=''; return true">
<area shape="RECT" COORDS='19,35,81,52' name="home"
alt="The link to the HOME area in the Navigation Tree is a link that brings the user back to a 'standard' area of the Portal, it is this area that should provide Guidance to Portal users regarding what to do within the Portal."
title="home" onmouseover="window.status='red'; return true" onmouseout="window.status=''; return true">
<area shape="RECT" COORDS='20,59,87,85' name="folder"
alt="Other links in the Navigation Tree are to either areas of the Portal, Products in the Portal or Content within the Portal."
title="folder" onmouseover="window.status='yellow'; return true" onmouseout="window.status=''; return true">
</map>
</p>
<p>
HTML links can also have a mouse over comment, try this one
<a href="http://www.google.com" target="blank" onmouseover="window.status=''; return true" onmouseout="window.status=''; return true" title="This link will pop open a new broswer window and take you to Google">this link</a>
</p>

<p title="It works in other tags as well!">
Now place your mouse over this paragraph... See what I mean? Simply add a title specification to your paragraph tag.
</p>

arantius

You're not using javascript (or even onmouseover) to do any of this. You're using a built in browser feature that cannot be controlled. Perhaps you should investigate another approach, like:

http://psacake.com/web/jl.asp

markloessi

ASKER

Very nice stuff but I need to be able to do this with image maps, the examples given only use 'an' image. I've included the code for both concepts below, what I need is the functionality of the first concept incorporated into the image map mechanism.

<head>

<style>
a.info{
position:relative; /*this is the key*/
z-index:24; background-color:#ccc;
color:#000;
text-decoration:none}

a.info:hover{z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #0cf;
background-color:#cff; color:#000;
text-align: center}
</style>
</head>
<a class=info href="#">
<img src="http://hosted5.faulknertechnologies.com/vhosts/markinson/knowledgebase/library/images/popup_demo_image"
width=148 height=87 border=0><span>an
aiding text that appears just when you roll on with the mouse</span></a>

<center>
<img src="http://hosted5.faulknertechnologies.com/vhosts/markinson/knowledgebase/library/images/popup_demo_image" width=148 height=87 border=0 usemap="#mymap">
</center>
<map name="mymap">
<area shape="RECT" COORDS='6,4,100,20' name="navigation" title="yellow" onmouseover="window.status='yellow'; return true" onmouseout="window.status=''; return true">
<area shape="RECT" COORDS='18,34,77,51' name="home" title="red" onmouseover="window.status='red'; return true" onmouseout="window.status=''; return true">
<area shape="RECT" COORDS='19,58,86,83' name="member_profiles" title="blue" onmouseover="window.status='blue'; return true" onmouseout="window.status=''; return true">
</map>

ASKER CERTIFIED SOLUTION

arantius

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

markloessi

ASKER

For those interested the complete solution looked like this:
(meaning both ideas put together)

<head>
<style>
.popup {
      border: 2px solid black;
      background-color: #F9F9C5;
      width: 350px;
      padding: 3px;
      position: absolute;
      display: none;
}
</style>

<script type="text/javascript">
var popup, xOffset, yOffset;
//detect browser
var ns=document.getElementById&&!document.all;
var ie=document.all;

document.onmousemove=get_mouse;
xOffset=5, yOffset=10;

function get_mouse(e) {
      popup=document.getElementById("notesPopup");
      var x=(ns)?(e.pageX):(event.x+document.body.scrollLeft);
      popup.style.left=x+xOffset;
      var y=(ns)?(e.pageY):(event.y+document.body.scrollTop);
      popup.style.top=y+yOffset;
}

function showPopup(msg) {
      popup.innerHTML=msg;
      popup.style.display="block";
}
function hidePopup() {
      popup.style.display="none";
}

</script>
</head>
<body>
<center>
<img src="http://hosted5.faulknertechnologies.com/vhosts/markinson/knowledgebase/library/images/popup_demo_image" width=148 height=87 border=0 usemap="#mymap">
</center>
<map name="mymap">
<area shape="RECT" COORDS='5,3,97,22' name="yellow" onmouseover="javascript:showPopup('This is the Navigation Tree, it is a mechanism that lists the folders and documents on this portal.');" onmouseout="javascript:hidePopup();">
<area shape="RECT" COORDS='20,35,78,49' name="red" onmouseover="javascript:showPopup('This is the Home area link, it will bring you back to the home page of the portal.');" onmouseout="javascript:hidePopup();">
<area shape="RECT" COORDS='18,59,89,86' name="blue" onmouseover="javascript:showPopup('This is a link to the Members Profiles area of this site where user management takes place.');" onmouseout="javascript:hidePopup();">
</map>
<div style="display: none;" class="popup" id="notesPopup"></div>

<span onmouseover="javascript:showPopup('This is my tooltip.');" onmouseout="javascript:hidePopup();">This text displays a tooltip</span><br />
This does not<br />
<span onmouseover="javascript:showPopup('This is my other tooltip.');" onmouseout="javascript:hidePopup();">This text displays a tooltip</span><br />
</body>
</html>

markloessi

ASKER

There is one last oddity that I cannot seem to grab contol over.

It would appear that the popups position on the scrren is 'set' and due to this not always in the viewable area of the screen. for instance if the image is too close to the top of the scrren and the user runs their mouse over the image the message may actually show up 'above' and out of the viewable area of the screen. Is there a way to either set specifically where the popup shows up on the scrren or to adjust where in relation to the cursor this popup shows up?

arantius

In the link that I provided, in IE and FireFox, the tooltip is always just to the right of and below your mouse cursor.