Use these to jump around or read it all…
Warning!At the moment, (4/17/00) this is an Internet Explorer 5.0 only deal. There’s no equal in Netscape. You have to be running IE 5.0 to see this effect.
With the advent of IE 5.0, a whole lot of events that had been beyond a programmer’s reach became available. Now, for example, users can place your page in their Favorites lists, or you can offer to print your page, all with the click of a button. With CSS, you can even state where the page breaks will occur within that print.
In addition, you can now use one short line of DHTML to set your page as the home page for your users. I don’t mean on their site, I mean in their browser. Look at the top of your browser. See that button that reads “HOME”? By using this little script, you’ll be able to set it so that when the user clicks on that button, he or she will come to your page.
The Code
I’ll show you how it’s done, but a word of warning first. Only offer this as something the user can click on to enact. Yes, it is possible to set this script to an onLoad event handler so that it happens as soon as the user logs into your page. Don’t do that. For one thing, the process doesn’t happen without your users knowing. A little box pops up once the script runs, asking if the user really wants your page set to be the home page. Don’t make them click “no” every time they come in. Keep everyone happy and let them choose whether to set your page as their home page or not.
There. Now that I’ve put the soapbox away, let’s get down to code. Dig this:
HTML Goodies Your Home Page
Go ahead, click it. When the box pops up, choose yes, then click on your Home button to prove that the system works. You can always change it back to whatever you had before by choosing Tools >> Internet Options >> and then changing your home page address at the top of that new window.
I have my own browsers set to open to blank pages. I just like it that way. But enough about me. Here’s the code. Get this all onto one line:
<SPAN STYLE=”cursor:hand; color:blue; text-decoration:underline”
onClick=”this.style.behavior=’url(#default#homepage)’;
this.setHomePage(‘https://www.htmlgoodies.com’);”>
Click Here to Make HTML Goodies Your Home Page
</SPAN>
Alter It
The code is fairly stable. To use it on your page, you really only need to make two changes:
- Change the URL https://www.htmlgoodies.comto your page
- Change the text of the phrase Click Here… to be appropriate to your page
Other than that, just make sure you get the entire code onto one line or you’ll get some nasty errors.
Other Changes
If you want, you can also play with the cursor, the color of the text, and whether the text will be underlined or not. See that in the STYLE= section? You’ll find a list of 17 different cursors here. You can set the color to any one you want. Just remember that if you use a hex code, then you’ll need to put the pound sign (#) in front (eg: #FFCCFF).
How About A Button?
Don’t mind if I do! Notice this effect is achieved via an onClick Event Handler. Because the Event Handler sets it in motion, you can use the code pretty much anywhere an Event Handler comes into play. Here’s that button:
And here’s the code that did it:
<FORM>
<INPUT TYPE=”button”
VALUE=”Make This Page Your Home Page”
onClick=”this.style.behavior=’url(#default#homepage)’;
this.setHomePage(‘https://www.htmlgoodies.com’);”>
</FORM>
Again, the code has been broken down into separate lines because of space constraints, but get that entire INPUT line onto one line in your code.
That’s That
This is a fun piece of code, but remember to set it up so that your users are offered the choice to click or not. Don’t fire this from an onLoad.
Also keep in mind that this code only works with IE 5.0. Hey! Maybe you should think about putting a block of script code in your page that only displays it to those using that browser. What a good idea! I happen to have a tutorial on doing just that right here.
Enjoy!
