[align=center][b]- Phatfusion Imagemenu -[/b] is back~! [sub]updated 18 May 2009[/sub] [/align] credit to [img]http://i282.photobucket.com/albums/kk264/unmaskedluke/phat.png[/img] [align=center] How to turn : [img]http://www.webappers.com/img/2007/09/image-menu.png[/img] [img]http://4.bp.blogspot.com/_fufFXoAi6aE/SWTwfmlnKRI/AAAAAAAAACA/R2yEWOBGnqI/s200/GreenDownArrow.png[/img] [img]http://i282.photobucket.com/albums/kk264/unmaskedluke/imageasf.png[/img] Effect = reveals more of the image as you rollover it. [url=http://profiles.friendster.com/nelnel90]Preview[/url] Browser compatibility - Firefox only. *sad* ------------------------------------------------------------------------------------------------------------------ 1st download this file [url=http://www.mediafire.com/download.php?zyd33h1qmyn]imgmenu.js[/url] upload it to your hosting site. then paste this code at the very top of your js ext. <">[/align] 2nd, edit this code [quote]window.addEvent('domready', function() { var imgmenu="<div id=\"example\">"+ "<div id=\"imageMenu\">"+ "<ul>"+ "<li class=\"1\"><a href=\"[b]url_link_to_your_friends_profile[/b]\">1</a></li>"+ "<li class=\"2\"><a href=\"[b]url_link_to_your_friends_profile[/b]\">2</a></li>"+ "<li class=\"3\"><a href=\"[b]url_link_to_your_friends_profile[/b]\">3</a></li>"+ "<li class=\"4\"><a href=\"[b]url_link_to_your_friends_profile[/b]\">4</a></li>"+ "</ul>"+ "</div>"+ "</div>"; document.getElementById('content_2').style.overflowY='hidden'; document.getElementById('content_2').innerHTML = "<table width='100%'><tr><td align='center'>"+imgmenu+"</td></tr></table>"; var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:230, border:2, onOpen:function(e,i){window.location=(e);}}); });[/quote] paste to ur js ext. 3rd, edit this css [quote]/************************************************************** Image Menu v 2.2 **************************************************************/ #example { width : 400px !important; } #imageMenu { position: relative; width: 400px; height: 175px; overflow: hidden; } #imageMenu ul { list-style: none; margin: 0px; display: block; height: 175px; width: 1000px; } #imageMenu ul li { float: left; } #imageMenu ul li a { text-indent: -1000px; background:#FFFFFF none repeat scroll 0%; border-right: 2px solid #fff; cursor:pointer; display:block; overflow:hidden; width:98px; height: 175px; } #imageMenu ul li.1 a { background: url(http://i282.photobucket.com/albums/kk264/unmaskedluke/joanne_phat.jpg) repeat scroll 0%; } #imageMenu ul li.2 a { background: url(http://i282.photobucket.com/albums/kk264/unmaskedluke/kristy_phat.jpg) repeat scroll 0%; } #imageMenu ul li.3 a { background: url(http://i282.photobucket.com/albums/kk264/unmaskedluke/shasha_phat.jpg) repeat scroll 0%; } #imageMenu ul li.4 a { background: url(http://i282.photobucket.com/albums/kk264/unmaskedluke/ben_phat.jpg) repeat scroll 0%; } .clear { clear: both; } /*************************************************************/[/quote] change the image link to your own image link. u can use the image as a guide in making ur own friends image remember to put their names at the left side of the image. then paste it in ur css ext. end. NOTES : u can put as many featured friends as you want. just adjust the width on the css.

Last edited by unmaskedluke (2009-05-18 12:05:42)