• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 353
  • Last Modified:

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>
0
markloessi
Asked:
markloessi
  • 3
  • 3
1 Solution
 
arantiusCommented:
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
0
 
markloessiAuthor Commented:
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>
0
 
arantiusCommented:
Well ok, you can use this javascript to create tooltips: http://www.arantius.com/ee/Q_21182877.html
Just use that <script> and put the onmouseover and onmouseout attributes where you need them.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
markloessiAuthor Commented:
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>
0
 
markloessiAuthor Commented:
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?
0
 
arantiusCommented:
In the link that I provided, in IE and FireFox, the tooltip is always just to the right of and below your mouse cursor.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now