Hi. I* am done with my CSS my prob is the JS Linker, I know how to make a JS but dont know where to find the linker, please PM me, I have my CSS Linker perfectly working on my profile... Please help me on JS how to put on the Media Box... [quote=myparis]Works in IE and Firefox: [u][b]Introduction[/b][/u] In this tutorial I will show you another way how to create custom Banner with Navigation. Img Preview: [url]http://i173.photobucket.com/albums/w76/myparis16/p1-1.jpg[/url] Live Preview: http://profiles.friendster.com/markstestpage [u][b]Requirements[/b] [/u] 1. Banner Picture: like this http://i173.photobucket.com/albums/w76/myparis16/ms_hdrNEW.jpg 2. Your ready made navigation bar: or just use my navigation content, more on that later. [u][b]Step 1[/b][/u] Put this codes in your css. Dont copy the red part: [quote]#navLang, #search, #search form, #marketing, #logo, #subnav, #surfer, #mainnav, .secondary_links{display:none!important;} #navigation{ border:1px solid #000000; background-color:#000000; } #marketing_bg, #mainnav{ background-image:url(""); background-color:transparent; } #marketing_bg{ height:[color=red]HEIGHT OF YOUR NAVIGATION BAR. This time i will use 90px[/color]; } #navdivider{ background-image:url("[color=red]URL OF YOUR BANNER[/color]"); background-repeat:no-repeat; background-position:center top; border:0px solid #000000; height:[color=red]HEIGHT OF YOUR BANNER. This time i will use 390px[/color]; }[/quote] If you test now your page, the output should be like this: [url]http://i173.photobucket.com/albums/w76/myparis16/p2-1.jpg[/url] Notice that there is a blank space, that is for the Navigation Bar. [u][b]Step 2[/b][/u] In your JS file, insert a html content for the id of marketing_bg like this [quote]document.getElementById("marketing_bg").innerHTML = "<div style='background-color:#000000;width:100%;height:90px;background-image: url([color=red][b]BG_IMAGE[/b][/color]);'><table width='100%' border='0' cellspacing='0' cellpadding='0'><tr><td align='center'><a href='http://www.friendster.com/' target='_self'><img src='http://i173.photobucket.com/albums/w76/myparis16/home_1.jpg' border='0' alt='home'></a></td><td align='center'><a href='http://www.friendster.com/photos/[color=red][b]USER_ID[/b][/color]' target='_self'><img src='http://i173.photobucket.com/albums/w76/myparis16/fotos_1.jpg' border='0' alt='Fotos'></a></td><td align='center'><a href='http://www.friendster.com/sendmessage.php?uid=[color=red][b]USER_ID[/b][/color]' target='_self'><img src='http://i173.photobucket.com/albums/w76/myparis16/sendmsg_1.jpg' border='0' alt='Send message'></a></td><td align='center'><a href='http://www.friendster.com/friends/[color=red][b]USER_ID[/b][/color]' target='_self'><img src='http://i173.photobucket.com/albums/w76/myparis16/fans_nav.jpg' border='0' alt='Join group'></a></td><td align='center'><a href='http://friendster.com/myparis' target='_self'><img src='http://i173.photobucket.com/albums/w76/myparis16/downloads_1-1.jpg' border='0' alt='Downloads'></a></td><td align='center'><table width='100%' border='0' cellspacing='0' cellpadding='0'><tr><td align='center' style='font-family:Geneva, Arial, Helvetica, sans-serif; font-size:8px; color:#FFFFFF'>CLICK TO VOTE</td></tr><tr><td align='center'><a href='http://top.friendster-tweakers.com/'><img src='http://top.friendster-tweakers.com/button.php?u=emo_mark16' alt='Friendster Top Profiles' border='0' /></a></td></tr></table></td></tr></table></div>";[/quote] [u][b]Finish Product[/b][/u] [url]http://i173.photobucket.com/albums/w76/myparis16/p3-1.jpg[/url] [u] [b]Reminders[/b][/u] Make sure that you didn't hide this id's in your css file [color=red][b]#marketing_bg #navdivider[/b][/color] Thats all. not sure if this will work on your profile but mines work.[/quote]

just sharing bro... you can add this idea of another image when hovered... example... If you have 3 links([b]home, profile, and logout[/b]) create 2 images for each one, one for the default image and one when hovered or on mouseover... so 6 Images/Links all in all... then add this js code and the image links... on top of profile or inside the WVM tracker code after the sideboxes. [quote]if (document.images) { image1 = new Image; image2 = new Image; image3 = new Image; image4 = new Image; image5 = new Image; image6 = new Image; image1.src = "DIRECT LINK OF [b]home[/b] IMAGE"; image2.src = "DIRECT LINK OF home second IMAGE"; image3.src = "DIRECT LINK OF [b]profile[/b] IMAGE"; image4.src = "DIRECT LINK OF profile second IMAGE"; image5.src = "DIRECT LINK OF [b]logout[/b] IMAGE"; image6.src = "DIRECT LINK OF logout second IMAGE"; } function chgImg(name, image) { if (document.images) { document[name].src = eval(image+".src"); } }[/quote] put in... [quote][b]//here[/b] function onProfileLoad() { //sidebox or other codes here addBox("RIGHT","Viewers and Visitors",TRACKER.div.innerHTML,"tracker",null); [b]}[/b] [b]//or here after the clause...[/b] if (typeof TRACKER == "undefined") { TRACKER = {}; } //rest of tracker codes here[/quote] then change your target links like this... [quote]<a href=\"http://www.friendster.com/\" onMouseOver=\"chgImg('[color=red]home[/color]', 'image[b]2[/b]')\" onMouseOut=\"chgImg('[color=red]home[/color]', 'image[b]1[/b]')\" target='_self'><img name='[color=red]home[/color]' src=\"DIRECT LINK OF [b]home[/b] IMAGE\" border=\"0\"></a> <a href=\"http://profiles.friendster.com/user.php\" onMouseOver=\"chgImg('[color=red]profile[/color]', 'image[b]4[/b]')\" onMouseOut=\"chgImg('[color=red]profile[/color]', 'image[b]3[/b]')\" target='_self'><img name='[color=red]profile[/color]' src=\"DIRECT LINK OF [b]profile[/b] IMAGE\" border=\"0\"></a> <a href=\"http://www.friendster.com/logout.php\" onMouseOver=\"chgImg('[color=red]logout[/color]', 'image[b]6[/b]')\" onMouseOut=\"chgImg('[color=red]logout[/color]', 'image[b]5[/b]')\" target='_self'><img name='[color=red]logout[/color]' src=\"DIRECT LINK OF [b]logout[/b] IMAGE\" border=\"0\"></a>[/quote] That's it!! hope this would be useful...

Last edited by Refresh/Reload (2008-04-27 19:29:26)

[quote]myparis wrote: @mabuhay: tnx bro.. yah you can edit it..[/quote] thanks bro. i use & edit ur codes like this & it works [quote]document.getElementById("marketing_bg").innerHTML = "<div style='background-color:#000000;width:100%;height:90px;background-image: url(BG_IMAGE);'><table width='100%' border='0' cellspacing='0' cellpadding='0'><tr><td align='center'><a href='http://www.friendster.com/' target='_self'><img src='[b]http://i173.photobucket.com/albums/w76/myparis16/home_1.jpg[/b]' border='0' alt='home'></a></td><td align='center' style='font-family:Geneva; font-size:12px; color:#00ff00'>[b]MGA LARAWAN[/b]<br><a href='[b]http://www.friendster.com/photos/MY userID[/b]' target='_self'><img src='[b]http://photos.friendster.com/photos/15/46/userID/1_920849372l.jpg[/b]' width='[b]100px' height='75px[/b]' border='0' alt='[b]LARAWAN[/b]'></a></td><td align='center' style='font-family:Geneva; font-size:12px; color:#00ff00'>[b]MENSAHE[/b]<br><a href='http://www.friendster.com/sendmessage.php?uid=[b]userID[/b]' target='_self'><img src='[b]http://photos.friendster.com/photos/15/46/MYuserID/1_367367306l.jpg[/b]' [b]width='100px' height='75px[/b]' border='0' alt='[b]MENSAHE[/b]'></a></td><td align='center' style='font-family:Geneva; font-size:12px; color:#00ff00'>[b]MGA KAIBIGAN[/b]<br><a href='[b]http://www.friendster.com/friends/MYuserID[/b]' target='_self'><img src='[b]http://photos.friendster.com/photos/15/46/MYuserID/1_182769037l.jpg[/b]' width='100px' height='75px' border='0' alt='[b]MGA KAIBIGAN[/b]'></a></td><td align='center' style='font-family:Geneva; font-size:12px; color:#00ff00'>[b]LARO TAYO NG CHESS[/b]<br><a href='[b]http://instantchess.com[/b]' target='_self'><img src='[b]http://photos.friendster.com/photos/15/46/MYuserID/1_745355705l.jpg[/b]' width='100px' height='75px' border='0' alt='[b]CHESS TAYO[/b]'></a></td><td align='center'><table width='100%' border='0' cellspacing='0' cellpadding='0'><tr><td align='center' style='font-family:Geneva, Arial, Helvetica, sans-serif; font-size:12px; color:#00ff00'>[b]ARTMANN CHESS CHAMPION[/b]</td></tr><tr><td align='center'><a href='[b]http://www.friendster.com/photos/MYuserID/1/564697554[/b]'><img src='[b]http://photos.friendster.com/photos/15/46/MYuserID/1_564697554l.jpg[/b]' width='100px' height='75px' alt='[b]SALAMAT[/b]'></a></td></tr></table></td></tr></table></div>";[/quote]

Last edited by mabuhay (2008-04-30 01:53:37)

2 myparis: i think theres something wrong with your codes..its not working..

@ myparis plz check this codes..it doesn't work on my profile. #navLang, #search, #search form, #marketing, #logo, #subnav, #surfer, #mainnav, .secondary_links{display:none!important;} #navigation{ border:1px solid #000000; background-color:#000000; } #marketing_bg, #mainnav{ background-image:url(""); background-color:transparent; } #marketing_bg{ height: 90px ; } #navdivider{ background-image:url(http://i173.photobucket.com/albums/w76/ � hdrNEW.jpg); background-repeat:no-repeat; background-position:center top; border:0px solid #000000; height: 390px; }

Nice Job bro... I try letter : tengs 4 sare

not work in mine .. it just doesn't appear ...

Cool Banner Trick.. Hmm.. I love this.. Thanks for sharing bro..

di q mgets un step 2......... uhuhuhu...................................

nice tutorial..