Help Needed For Mouseover effect [Archive]

Click to See Complete Forum and Search --> : Help Needed For Mouseover effect

Jimmer120

07-28-2006, 05:00 PM

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

Wiz Creations

07-28-2006, 05:26 PM

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.

Jimmer120

07-28-2006, 07:41 PM

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">

</STYLE>

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

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

<SCRIPT TYPE="text/javascript">

</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>

Wiz Creations

07-28-2006, 08:15 PM

Can you post a link to the site page that this came from? I can't get it to work.

Jimmer120

07-28-2006, 08:43 PM

This is the URL for the page

http://www.dynamicdrive.com/dynamicindex5/popinfo2.htm

Wiz Creations

07-29-2006, 02:16 AM

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.<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.<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.<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.

Jimmer120

07-29-2006, 03:20 AM

Thanks very much. I really appreciate your help.

Regards

Jim