DIV+CSS弹出提示框脚本_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

DIV+CSS弹出提示框脚本_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:31 PM

DIV+CSS弹出提示框脚本，效果如下：

JS代码如下

Code
/*
使用方法：
          直接调用showhint()方法即可，showhint()方法中参数说明：obj为要显示提示信息的控件对象，info为提示内容
          例：
          onmouseover="showhint(this,'这是地球人都知道的东西，没什么好提示的。')"
          onmouseout="hidehintinfo()"
*/
document.write("");
function showhint(obj,info)
{
    var top=obj.offsetTop;
    var showtype="up";
    var topimg="/ControlsTest/images/hint/hintuptop.gif";
    var bottomimg="/ControlsTest/images/hint/hintupbottom.gif";
    var hintimg="/ControlsTest/images/hint/ydot.png";
    if(top    {
        showtype="down";
        topimg="/ControlsTest/images/hint/hintdowntop.gif";
        bottomimg="/ControlsTest/images/hint/hintdownbottom.gif";
    }
    showhintinfo(obj,0,0,'提示',info,0,showtype,topimg,bottomimg,hintimg);
}
function showhintinfo(obj, objleftoffset,objtopoffset, title, info , objheight, showtype ,topimg,bottomimg,hintimg)
{
    var p = getposition(obj);
    if((showtype==null)||(showtype ==""))
    {
        showtype =="up";
    }
    //以下是自己修改
    var html="

DIV+CSS弹出提示框脚本_html/css_WEB-ITnose

"+info+"

DIV+CSS弹出提示框脚本_html/css_WEB-ITnose

";
    //以上是自己修改
//    document.getElementById('hintiframe'+showtype).style.height= objheight + "px";
//    var frame;
//    frame=document.getElementById('hintiframe'+showtype).style.height;
//    document.getElementById('hintinfo'+showtype).innerHTML = info;
//    document.getElementById('hintdiv'+showtype).style.display='block';
    document.getElementById('hintdiv').style.display='block';

        if(objtopoffset == 0)
        {
            document.getElementById("hintdiv").innerHTML=html;
            if(showtype=="up")
            {
                document.getElementById('hintiframe').style.height= objheight + "px";
                document.getElementById('hintdiv').style.top=(p['y']-document.getElementById('hintinfo'+showtype).offsetHeight-43)+"px";
            }
            else
            {
                document.getElementById('hintiframe').style.height= objheight + "px";
                document.getElementById('hintdiv').style.top=p['y']+obj.offsetHeight+3+"px";
            }
        }
        else
        {
            document.getElementById('hintdiv').style.top=p['y']+objtopoffset+"px";
        }

    document.getElementById('hintdiv').style.left=p['x']+objleftoffset+"px";
}

function hidehintinfo()
{
    document.getElementById('hintdiv').style.display='none';
//    document.getElementById('hintdivdown').style.display='none';
}
function getposition(obj)
{
    var r = new Array();
    r['x'] = obj.offsetLeft;
    r['y'] = obj.offsetTop;
    while(obj = obj.offsetParent)
    {
        r['x'] += obj.offsetLeft;
        r['y'] += obj.offsetTop;
    }
    return r;
}

DIV+CSS弹出提示框脚本_html/css_WEB-ITnose

"+info+"

DIV+CSS弹出提示框脚本_html/css_WEB-ITnose

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML的未来：进化和趋势May 13, 2025 am 12:01 AM

HTML的未来将朝着更加语义化、功能化和模块化的方向发展。1)语义化将使标签更明确地描述内容，提升SEO和无障碍访问。2)功能化将引入新元素和属性，满足用户需求。3)模块化将支持组件化开发，提高代码复用性。

为什么HTML属性对Web开发很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外观和功能

Alt属性的目的是什么？为什么重要？May 11, 2025 am 12:01 AM

alt属性是HTML中标签的重要部分，用于提供图片的替代文本。1.当图片无法加载时，alt属性中的文本会显示，提升用户体验。2.屏幕阅读器使用alt属性帮助视障用户理解图片内容。3.搜索引擎索引alt属性中的文本，提高网页的SEO排名。

HTML，CSS和JavaScript：示例和实际应用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在网页开发中的作用分别是：1.HTML用于构建网页结构；2.CSS用于美化网页外观；3.JavaScript用于实现动态交互。通过标签、样式和脚本，这三者共同构筑了现代网页的核心功能。

如何在标签上设置lang属性？为什么这很重要？May 08, 2025 am 12:03 AM

设置标签的lang属性是优化网页可访问性和SEO的关键步骤。1)在标签中设置lang属性，如。2)在多语言内容中，为不同语言部分设置lang属性，如。3)使用符合ISO639-1标准的语言代码，如"en"、"fr"、"zh"等。正确设置lang属性可以提高网页的可访问性和搜索引擎排名。

HTML属性的目的是什么？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外观和互动，使网站互动，响应式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，类，类型，类型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中创建列表？May 06, 2025 am 12:01 AM

toCreateAlistinHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulleTedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，customeizableWithTheTtheTthetTheTeTeptTributeFordTributeForderForderForderFerentNumberingSnumberingStyls。