christopher shaun kainaw wagner

Kainaw's Flower Button

A Flower Button is a button that blooms into multiple buttons when you click on it.

Download

Click Here to download the flower button script. The instructions for use are in the script file.

Examples

This is an example of the script in action. In this example, a green button blooms into links to multiple websites. Click the green button to make it bloom. Click it again to close it.

Multiple buttons may be on a page. It may also be all text: click

HTML

The HTML to produce the top flower button follows. The parts relating directly to the flower button code are in red.

	<script language='javascript' src='kfb.js'></script>
	<body onload='kfb_init();'>
	<a id='flower_test' href='#'><img src='click_me.png' border='0' title='click me'></a>
	<script language='javascript'>
		var flower_test = new kfb_Flower("flower_test", 30);
		flower_test.addPetal("http://kainaw.com", "<img src='kainaw.png' border='0'>");
		flower_test.addPetal("http://yahoo.com", "<img src='yahoo.png' border='0'>");
		flower_test.addPetal("http://google.com", "<img src='google.png' border='0'>");
		flower_test.addPetal("http://slashdot.org", "<img src='slashdot.png' border='0'>");
		flower_test.addPetal("http://php.net", "<img src='php.png' border='0'>");
	</script>

Note

I have received multiple complaints that this script does not work on Internet Explorer. The claim is that you get "The page cannot be displayed" error. This happens if you put the "kfb_init()" function in the page. It must be set to run onload as shown in the example on this page. If you use it in the page, it will attempt to add buttons to the page while it is loading. That will cause IE to die and claim the page cannot be displayed.