|
Step 1
Copy this JavaScript function to the HEAD of your document.
<script language="JavaScript">
<!--
var IE = (document.all) ? 1 : 0;
var NN = (document.layers) ? 1 : 0;
var div_seen = false;
function div_over(which, on) {
var div_str = '<table border=1 bordercolor=#99cccc cellpadding=5 bgcolor=#CCFFFF>'+
'<tr><td>Her Technology is dedicated to bringing you information on a'+
' wide range of web-related topics without a lot of geek-speak. '+
'<a href="javascript:void(\'Just Click\')" onclick="div_over(1,0)">Close</a>.'+
'</td></tr></table>';
if (IE) {
whichEl = eval("document.all.div" + which + ".style");
} else {
whichEl = eval("document.div" + which);
}
if (on) {
if (!div_seen) {
whichEl.visibility='visible';
if (NN) {
with (document.div1.document) {
open();
write(div_str);
close();
}
} else {
div1.innerHTML = div_str;
}
div_seen = true;
}
} else {
whichEl.visibility='hidden';
}
}
//-->
</script>
Step 2
Copy this link to your file, then modify it to use your image:
<a href="javascript:void()"
onMouseOver="div_over(1,1)" >
<img border=0 src="/graphics/logo.jpg"></a>
Step 3
Copy the DIV below at the end of your page, just BEFORE the /HTML tag.
<DIV id='div1' style='position:absolute;
visibility:hidden;
top:25px;
left:150px;
z-index:2;
width:400;
height:180;
float:left;'
onClick="div_over(1,0)">
</div>
</body>
Step 4
Customize for your page. You can do the following:
- Change the colors of the table in the div_str.
- Change the text in the div_str. Be careful. The string uses single
quotes to delimit the string. Any SINGLE QUOTE inside the string must
be escaped with a \ -- see the code where it says \'Just Click\'. You
must also NOT put a carriage return inside your string. As you can see in the
code, each segment of the string is delimited with ' and ', then there
is a + to concatenate the segment to the following segment. The last segment simply
has a ; (no +).
- Change the image src= to your image file name.
- Change the top: and left: in the DIV tag to be where you want
the box to appear on the screen.
- Change the width: and height: in the DIV tag for the size of the
box.
|