کد جاوا اسکریپت - نمایش توضیح زیر لینک پس از قرار گرفتن نشانگر موس بر روی آن

deltang · #1 03-16-2009

توضیح با آوردن موس بر روی لینک متن شما در زیر آن ظاهر می شود :

کد HTML:

 
<!-- Start of MouseOver Text Appear JavaScript -->
<!-- Instructions: 
 1.  Copy the coding into the HEAD of your HTML document
 2.  Add the last code into the BODY of your HTML document  -->
<!-- Script supplied with CoffeeCup HTML Editor -->
<!--             www.coffeecup.com              -->
<html>
<head>
<TITLE>menu visibility</title>    
<style type="text/css"> 
.Menu {
                position: absolute;   
                width: 80%; 
        border: 1px white; 
        background-color: white; 
        layer-background-color: white;                     
                top: 100px;
                left : 10%;
                line-height : 25px;
                font-family : Arial;
        visibility: hidden;                                     
                                        } 
.Mo {
                position: absolute;                     
                text-decoration : none; 
        border: 0px white; 
        background-color: white; 
        layer-background-color: white;                     
                top: 100px;
                left: 10%;
        width: 80%;
        font-family : Arial;
                visibility: hidden;                                     
                                        } 
.hide {
                visibility: hidden;
                font-family : Arial;
                } 
</style>
<script>
        var mo_lastMenu;
        var lastMenu = "null";
        if (document.layers) {  
                visible = 'show';  hidden = 'hide';
                                                } 
        else if (document.all) {  
                visible = 'visible';  hidden = 'hidden';
        }
    
function toggle(menu) {
        if (document.layers) {
        Menu = document.layers[menu];  
        } 
        else if (document.all) {
        Menu = document.all(menu).style;  
        }        
        if (Menu.visibility == visible) {
        Menu.visibility = hidden;  
        } 
        else {    
        clean(lastMenu);
                Menu.visibility = visible;  
        }
        lastMenu = Menu;
        }
    
function clean(Menu){
        if (Menu == "null"){
                return; 
        }
        if (Menu.visibility == visible) {
        Menu.visibility = hidden;  
        } 
        }
    
function mo_toggle(menu) {
        if (document.layers) {
        Menu = document.layers[menu];  
        } 
        else if (document.all) {
        Menu = document.all(menu).style;  
        }        
        if (Menu.visibility == visible) {
        Menu.visibility = hidden;  
        } 
        else {    
                Menu.visibility = visible;  
        }
        mo_lastMenu = Menu;
        }
    
    
</script>
</head>
<body bgcolor="White">
<CENTER>
<A href="#" onclick="toggle('clickWeb');return false;" onmouseout="javascript:mo_toggle('mo_web');return false;" onmouseover="javascript:mo_toggle('mo_web');return false;" >
<B><font size="+1" color="purple" face="Arial">Put Mouse Over Here here</A></B></FONT> 
</CENTER>

<div id="mo_web" class="Mo">
<FONT SIZE="+2" COLOR="green" face="Arial"><CENTER>
This is what happens!!
</FONT></CENTER>
</div>  

<div id="clickWeb" class="Menu">
<FONT SIZE="+2" COLOR="red" face="Arial"><CENTER>
Clicking the link presents these results.
</FONT></CENTER>
</div>  
<BR>

</body>
</html>
<!-- End of MouseOver Text Appear JavaScript -->
</body>
</html>