|
Page 3 of 3 Calling Link
Now we need to put a link somewhere that will display the hidden <div> layer and "pop-up" the login box. <a xhref="http://www.troozers.com/#" onClick="toggleBox('LoginBox',1); return false;"> <img xsrc="/templates/andy/images/password.png" width="75" height="75" border="0" /> </a> The important part here is the "OnClick=" statement which does the actual showing of the login box. If you look at the statements for the DIV login box itself you will see I have put an image at the bottom with an "OnClick=" element which re-hides the box. CSS Settings
The last thing we need to do now, is to define the placement and look of the DIV box via a CSS entry within your template_css.css file. #LoginBox {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
visibility: hidden;
border: 1px solid;
background-color: #ffffff;
} I have tested this solution in IE, FireFox and Opera under windows, plus Mozilla and Opera under Linux and it works with no problem - no testing done under MacOS as yet, so I can't verify whether it works there unfortunately. This has been implemented in a slightly different manner to Jason Murphy's website, and I don't know if there are any advantages/disadvantages with the JavaScript methods between the two - I leave that to better minds than my own. Hope this is useful to someone, and contact me via the webpage if you have any further questions or additions ;-)
|
