[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 515
  • Last Modified:

Mouseover Popup

How can I create popups as are found on http://www.sportsline.com/mlb/teams/depth-chart/ATL when the mouse passes over one of the players?
0
Bob3975
Asked:
Bob3975
1 Solution
 
HonorGodCommented:
<html>
<head>
<title></title>
<style type="text/css">
@CHARSET "ISO-8859-1";

input.btn,select.btn {
  color               : black;
  font-family         : 'Trebuchet MS', helvetica, sans-serif;
  font-size           : 84%;
  font-weight         : bold;
  background-color    : #ccf;
  border              : 1px solid;
  border-top-color    : #696;
  border-left-color   : #696;
  border-right-color  : #363;
  border-bottom-color : #363;
}

input.btnhov{
  border-top-color    : #c63;
  border-left-color   : #c63;
  border-right-color  : #930;
  border-bottom-color : #930;
  background-color    : #c63;
}

#hintbox {                           /* CSS for pop up hint box */
    position        : absolute;
    top             : 0;
    color           : blue;
    background-color: lightyellow;
    width           : 150px;         /* Default hint box width */
    padding         : 3px;
    border          : 1px solid black;
    font            : normal 11px Arial;
    line-height     : 18px;
    z-index         : 100;
    border-right    : 3px solid black;
    border-bottom   : 3px solid black;
    visibility      : hidden;
}

.hintanchor {                        /* CSS for hint link */
    font-weight     : bold;
    color           : navy;
    margin          : 3px 8px;
    text-decoration : none;
}
</style>
<script type="text/javascript">
//--------------------------------------------------------------------
// Show Hint script- © Dynamic Drive (www.dynamicdrive.com)
// This notice MUST stay intact for legal use
// Visit http://www.dynamicdrive.com/ for this script and 100s more.
//--------------------------------------------------------------------
            
var horizontal_offset = '9px' // horizontal offset of hint box from anchor link

//--------------------------------------------------------------------
// No further editting needed
//--------------------------------------------------------------------

var vertical_offset = '0'     // vertical offset of hint box from anchor link. No need to change.
var ie  = document.all
var ns6 = document.getElementById && !document.all

//--------------------------------------------------------------------
// Name: getposOffset()
// Role: Compute (and return) the element offset of the potentially
//       nexted object
// Note: Using offsetParent attribute to locate an object is described
//       on http://www.quirksmode.org/js/findpos.html
//--------------------------------------------------------------------
function getposOffset( obj, offsettype ) {
    var totaloffset = ( offsettype == 'left' ) ? obj.offsetLeft : obj.offsetTop;
    var parentEl    = obj.offsetParent;
    while ( parentEl != null ) {
        totaloffset += ( offsettype == 'left' ) ? parentEl.offsetLeft : parentEl.offsetTop;
        parentEl = parentEl.offsetParent;
    }
    return totaloffset;
}

//--------------------------------------------------------------------
// Name: iecompattest()
// Role: Identify, and return, the appropriate object based upon IE
//       compatibility
//--------------------------------------------------------------------
function iecompattest() {
    return ( document.compatMode && document.compatMode != 'BackCompat' ) ? document.documentElement : document.body
}

//--------------------------------------------------------------------
// Name: clearbrowseredge()
// Role:
//--------------------------------------------------------------------
function clearbrowseredge( obj, whichedge ) {
    var edgeoffset = 0
    if ( whichedge == 'rightedge' ) {
        var windowedge = ie && !window.opera ? iecompattest().scrollLeft + iecompattest().clientWidth - 30 : window.pageXOffset + window.innerWidth - 40
        HintBox.contentmeasure = HintBox.offsetWidth
        if ( windowedge - HintBox.x < HintBox.contentmeasure )
            edgeoffset = HintBox.contentmeasure + obj.offsetWidth + parseInt( horizontal_offset )
        else
            edgeoffset = parseInt( horizontal_offset ) * -1
    } else {
        var windowedge = ie && !window.opera ? iecompattest().scrollTop + iecompattest().clientHeight - 15 : window.pageYOffset + window.innerHeight - 18
        HintBox.contentmeasure = HintBox.offsetHeight
        if ( windowedge - HintBox.y < HintBox.contentmeasure )
            edgeoffset = HintBox.contentmeasure-obj.offsetHeight
        else
            edgeoffset = parseInt( vertical_offset ) * -1
    }
    return edgeoffset
}

//--------------------------------------------------------------------
// Name: showhint()
// Role: method invoked to cause the hint box to be displayed
// Note: global HintBox is assigned the reference to hint box object
//--------------------------------------------------------------------
function showhint( message, obj, e, boxWidth ) {
    if ( ( ie || ns6 ) && document.getElementById( 'hintbox' ) ) {
        HintBox = document.getElementById( 'hintbox' )
        HintBox.innerHTML  = message
        HintBox.style.left = HintBox.style.top = -500
        if ( boxWidth != '' ) {
            HintBox.widthobj = HintBox.style
            HintBox.widthobj.width = boxWidth
        }
        HintBox.x = getposOffset( obj, 'left' )
        HintBox.y = getposOffset( obj, 'top'  )
        HintBox.style.left = HintBox.x - clearbrowseredge( obj, 'rightedge'  ) + obj.offsetWidth + 'px'
        HintBox.style.top  = HintBox.y - clearbrowseredge( obj, 'bottomedge' ) + 'px'
        HintBox.style.visibility = 'visible'
        obj.onmouseout = hideHint
    }
}

//--------------------------------------------------------------------
// Name: hideHint()
// Role: Used to hide, and relocate hint box off the browser window
// Note: The parameter is provided by the onmouseout event handler
//--------------------------------------------------------------------
function hideHint( e ) {
    HintBox.style.visibility = 'hidden'
    HintBox.style.left = '-500px'
}

//--------------------------------------------------------------------
// Name: createHintBox()
// Role: Create a div section for the hintbox
// Note: Using this routine guarantees that the hint box will be
//       properly created
//--------------------------------------------------------------------
function createHintBox() {
    var divblock = document.createElement( 'div' )
    divblock.setAttribute( 'id', 'hintbox' )
    document.body.appendChild( divblock )
}

//--------------------------------------------------------------------
// Name: main()
// Role: Initialize hint box creation - independent of browser type
//--------------------------------------------------------------------
if ( window.addEventListener )
    window.addEventListener( 'load', createHintBox, false )
else if ( window.attachEvent )
    window.attachEvent( 'onload', createHintBox )
else if ( document.getElementById )
    window.onload = createHintBox
</script>
</head>
<body>
What would you like to know<a href='#' class='hintanchor' onMouseover="showhint('Why is there air?', this, event, '175px')">?</a>
</body>
</html>
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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