Posting an Opera button on your website or blog is a great way to encourage people to try out the browser — but what if the visitor already uses Opera? It shows solidarity, but what if you could show them something else, something that is new to them?
You might want to replace your regular Opera banner with an ad for Opera Mini. Or show them another graphic of your own design. Or maybe not even a graphic, maybe post some sort of message, like “Opera spoken here!” or “Welcome, Opera visitors!”
It’s relatively simple to do this in PHP, or ASP, or some other server-side script…but sometimes you have to stick with static HTML. Well, client-side JavaScript can replace chunks of your page, and here’s how to do it.
1. Put the following script in a file called operalinks.js:
function replaceOperaLink(linkID) {
if(linkNode=document.getElementById(linkID)) {
if ( 0 <= navigator.userAgent.indexOf('Opera') ) {
var newButton=document.createElement('span');
newButton.innerHTML = '<a href="http://www.opera.com/">Glad to see you're using Opera!</a>';
var parentNode=linkNode.parentNode;
parentNode.replaceChild(newButton,linkNode);
}
}
}
For the innerHTML section, you can plug in a new link and banner, or a special message, or anything you want. (Just make sure that you put a backslash () in front of any apostrophes you use.)
2. Put a unique ID in the tag for your regular Opera button. Use the outermost tag that you want to replace. For example, let’s start it off with this:
<a id="OpLink" href="http://www.opera.com">Download Opera!</a>
3. Load the script in your document’s <head> section:
<script type="text/javascript" src="operalinks.js">
4. Call the function in the body onload event using the ID you chose in step 2:
<body onload="replaceOperaLink('OpLink')">
When the page loads, the script will check the visitor’s browser. If it’s Opera, it’ll replace the banner with whatever message you chose in step 1. It’s compatible with both HTML and XHTML, and you don’t need to worry about using <noscript> tags to make sure the banner still shows up for people with JavaScript disabled.
*This post originally appeared on Confessions of a Web Developer, my blog at the My Opera community.
