www.webdeveloper.com
Results 1 to 7 of 7

Thread: Help Needed For Mouseover effect

  1. #1
    Join Date
    Jul 2006
    Posts
    4

    Help Needed For Mouseover effect

    I've designed a site using Contribute 3 and I can edit pages externally in Dreamweaver. I want to add code that will produce an information box when you mouseover menu buttons. I found a few scripts that looked suitable, but I'm a novice with code and they were always vague about exactly where to put the code in the Head and Body. Can anyone direct me to some code and give me instructions exactly how and where to add it? If need be, I'll send you the code of an actual page on the site. Thanks

    Jimmer120@hotmail.com

  2. #2
    I think the code you write of is javascript. Depending on how it is written, you can put it anywhere in the <head></head> tags. Sometimes you need to place it in the appropriate place of the <body>, though. If you post it here I could probably tell you which.
    I know XHTML and CSS, but my knowledge is below basic in any other language.

  3. #3
    Join Date
    Jul 2006
    Posts
    4

    Code For Mouseover

    Here's the code and instructions for the mouseover effect I'd like to use. Let me know if you need a sample web page. Thanks a lot.

    Jim

    Directions:

    Step 1: Insert the following stylesheet into the <head> section of your page:

    <STYLE TYPE="text/css">
    <!--
    #dek {POSITION:absolute;VISIBILITY:hidden;Z-INDEX:200;}
    //-->
    </STYLE>

    Step 2: Insert the below code into the <body> section of your page:


    <DIV ID="dek"></DIV>

    <SCRIPT TYPE="text/javascript">
    <!--

    //Pop up information box II (Mike McGrath (mike_mcgrath@lineone.net, http://website.lineone.net/~mike_mcgrath))
    //Permission granted to Dynamicdrive.com to include script in archive
    //For this and 100's more DHTML scripts, visit http://dynamicdrive.com

    Xoffset=-60; // modify these values to ...
    Yoffset= 20; // change the popup position.

    var old,skn,iex=(document.all),yyy=-1000;

    var ns4=document.layers
    var ns6=document.getElementById&&!document.all
    var ie4=document.all

    if (ns4)
    skn=document.dek
    else if (ns6)
    skn=document.getElementById("dek").style
    else if (ie4)
    skn=document.all.dek.style
    if(ns4)document.captureEvents(Event.MOUSEMOVE);
    else{
    skn.visibility="visible"
    skn.display="none"
    }
    document.onmousemove=get_mouse;

    function popup(msg,bak){
    var content="<TABLE WIDTH=150 BORDER=1 BORDERCOLOR=black CELLPADDING=2 CELLSPACING=0 "+
    "BGCOLOR="+bak+"><TD ALIGN=center><FONT COLOR=black SIZE=2>"+msg+"</FONT></TD></TABLE>";
    yyy=Yoffset;
    if(ns4){skn.document.write(content);skn.document.close();skn.visibility="visible"}
    if(ns6){document.getElementById("dek").innerHTML=content;skn.display=''}
    if(ie4){document.all("dek").innerHTML=content;skn.display=''}
    }

    function get_mouse(e){
    var x=(ns4||ns6)?e.pageX:event.x+document.body.scrollLeft;
    skn.left=x+Xoffset;
    var y=(ns4||ns6)?e.pageY:event.y+document.body.scrollTop;
    skn.top=y+yyy;
    }

    function kill(){
    yyy=-1000;
    if(ns4){skn.visibility="hidden";}
    else if (ns6||ie4)
    skn.display="none"
    }

    //-->
    </SCRIPT>


    Step 3: Finally, add the following inside any link that will contain a popup:

    ONMOUSEOVER="popup('Link description here','yellow')"; ONMOUSEOUT="kill()"

    where the first parameter inside popup() dictates the text to be displayed, and the second, the color of the box itself. Here are a couple of examples:

    <a href="http://wsabstract.com" ONMOUSEOVER="popup('Website Abstraction, the definitive JavaScript site on the net.','lightgreen')"; ONMOUSEOUT="kill()">Website Abstraction</a>

    <a href="http://webmonkey.com" ONMOUSEOVER="popup('Tutorials and tips for the advanced webmaster','lightgreen')"; ONMOUSEOUT="kill()">WebMonkey</a>

  4. #4
    Can you post a link to the site page that this came from? I can't get it to work.
    I know XHTML and CSS, but my knowledge is below basic in any other language.

  5. #5
    Join Date
    Jul 2006
    Posts
    4

    URL for mouseover code page


  6. #6
    The <style></style> and stuff inside can go anywhere in the <head> tags. If you have an external stylesheet, you can put them there if you want.
    HTML Code:
    <head>
    
    <style>
    #dek {
    position:absolute;
    visibility:hidden;
    z-index:200;
    }
    </style>
    
    </head>
    Make sure that the div with id="dek" is before your links. Place the <script></script> and all the javascript somewhere before your links.
    HTML Code:
    <body>
    <div id="dek"></div>
    
    <script type="text/javascript" language="javascript">
    //Pop up information box II (Mike McGrath (mike_mcgrath@lineone.net, http://website.lineone.net/~mike_mcgrath))
    //Permission granted to Dynamicdrive.com to include script in archive
    //For this and 100's more DHTML scripts, visit http://dynamicdrive.com
    
    Xoffset=-60; // modify these values to ...
    Yoffset= 20; // change the popup position.
    
    var old,skn,iex=(document.all),yyy=-1000;
    
    var ns4=document.layers
    var ns6=document.getElementById&&!document.all
    var ie4=document.all
    
    if (ns4)
    skn=document.dek
    else if (ns6)
    skn=document.getElementById("dek").style
    else if (ie4)
    skn=document.all.dek.style
    if(ns4)document.captureEvents(Event.MOUSEMOVE);
    else{
    skn.visibility="visible"
    skn.display="none"
    }
    document.onmousemove=get_mouse;
    
    function popup(msg,bak){
    var content="<TABLE WIDTH=150 BORDER=1 BORDERCOLOR=black CELLPADDING=2 CELLSPACING=0 "+
    "BGCOLOR="+bak+"><TD ALIGN=center><FONT COLOR=black SIZE=2>"+msg+"</FONT></TD></TABLE>";
    yyy=Yoffset;
    if(ns4){skn.document.write(content);skn.document.close();skn.visibility="visible"}
    if(ns6){document.getElementById("dek").innerHTML=content;skn.display=''}
    if(ie4){document.all("dek").innerHTML=content;skn.display=''}
    }
    
    function get_mouse(e){
    var x=(ns4||ns6)?e.pageX:event.x+document.body.scrollLeft;
    skn.left=x+Xoffset;
    var y=(ns4||ns6)?e.pageY:event.y+document.body.scrollTop;
    skn.top=y+yyy;
    }
    
    function kill(){
    yyy=-1000;
    if(ns4){skn.visibility="hidden";}
    else if (ns6||ie4)
    skn.display="none"
    }
    </script>
    Modify these links to your needs. Notice how in the second link I placed \' in Kashou. If you want a quote or something like that, you need to place a \ in front of it.
    HTML Code:
    <a href="http://wizcreations.com" onMouseOver="popup('Wiz Creations web design','lightblue')"; onMouseOut="kill()">Wiz Creations</a>
    
    <a href="http://kevinkashou.com" onMouseOver="popup('Kevin Kashou\'s work portfolio','lightgreen')"; onMouseOut="kill()">Kevin Kashou</a>
    </body>

    Post if you still need help. I may not be able to answer though because I'm going out of town.
    I know XHTML and CSS, but my knowledge is below basic in any other language.

  7. #7
    Join Date
    Jul 2006
    Posts
    4

    RE: Mouseover Script

    Thanks very much. I really appreciate your help.

    Regards

    Jim

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles