• ARCHIVES 
  • » [b]Description[/b] :arrow: This Trick will make your Featured Friends expand when mouseover :thumbsup: Credits :arrow: [b]dhteumeuleu[/b] step 1 :arrow: SAve this as [b].html[/b] :thumbsdown: [quot

Pages: 1

[b]Description[/b] :arrow: This Trick will make your Featured Friends expand when mouseover :thumbsup: Credits :arrow: [b]dhteumeuleu[/b] step 1 :arrow: SAve this as [b].html[/b] :thumbsdown: [quot

simpleMe
» FTalkManiac
FTalk Level: zero
949
0
1969-12-31

[b]Description[/b] :arrow: This Trick will make your Featured Friends expand when mouseover :thumbsup: Credits :arrow: [b]dhteumeuleu[/b] step 1 :arrow: SAve this as [b].html[/b] :thumbsdown: [quot

[b]Description[/b] :arrow: This Trick will make your Featured Friends expand when mouseover :thumbsup: Credits :arrow: [b]dhteumeuleu[/b] step 1 :arrow: SAve this as [b].html[/b] :thumbsdown: [quote]<html> <head> <title>Featured Friends Expand Image when Mouseover</title> <style type="text/css"> body { background: [b]transparent[/b]; overflow: hidden; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } #screen span { position:absolute; overflow:hidden; border:#FFF solid 1px; background:#FFF; } #screen img{ position:absolute; left:-32px; top:-32px; cursor: pointer; } #caption, #title{ color: [b]#ff0000[/b]; font-family: georgia, 'times new roman', times, veronica, serif; font-size: 1em; text-align: center; } #caption b { font-size: 2em; } </style> <script type="text/javascript"><!-- // =========================================================== // =========================================================== // window.onerror = new Function("return true"); var obj = []; var scr; var spa; var img; var W; var Wi; var Hi; var wi; var hi; var Sx; var Sy; var M; var xm; var ym; var xb = 0; var yb = 0; var ob = - 1; var cl = false; /* needed in standard mode */ px = function(x) { return Math.round(x) + "px"; } /* center image - do not resize for perf. reason */ img_center = function(o) { with(img[o]) { style.left = px( - (width - Wi) / 2); style.top = px( - (height - Hi) / 2); } } ////////////////////////////////////////////////////////// var Nx = 4; //size grid x var Ny = 4; //size grid y var Tx = 4; // image width var Ty = 4; // image height var Mg = 40; // margin var SP = 1; // speed ////////////////////////////////////////////////////////// function Cobj(o, x, y) { this.o = o; this.ix = Math.min(Nx - Tx, Math.max(0, Math.round(x - (Tx / 2)))); this.iy = Math.min(Ny - Ty, Math.max(0, Math.round(y - (Ty / 2)))); this.li = ((this.ix * M + this.ix * Sx) - (x * M + x * Sx)) / SP; this.ti = ((this.iy * M + this.iy * Sy) - (y * M + y * Sy)) / SP; this.l = 0; this.t = 0; this.w = 0; this.h = 0; this.s = 0; this.mv = false; this.spa = spa[o].style; this.img = img[o]; this.txt = img[o].alt; img[o].alt = ""; /* zooming loop */ this.zoom = function() { with(this) { l += li * s; t += ti * s; w += wi * s; h += hi * s; if ((s > 0 && w < Wi) || (s < 0 && w > Sx)) { /* force window.event */ window.focus(); /* loop */ setTimeout("obj[" + o + "].zoom()", 16); } else { /* finished */ mv = false; /* set final position */ if (s > 0) { l = ix * M + ix * Sx; t = iy * M + iy * Sy; w = Wi; h = Hi; } else { l = x * M + x * Sx; t = y * M + y * Sy; w = Sx; h = Sy; } } /* html animation */ with(spa) { left = px(l); top = px(t); width = px(w); height = px(h); zIndex = Math.round(w); } } } this.click = function() { with(this) { img_center(o); /* zooming logic */ if ( ! mv || cl) { if (s > 0) { if (cl || Math.abs(xm - xb) > Sx * .4 || Math.abs(ym - yb) > Sy * .4) { s = - 2; mv = true; zoom(); cap.innerHTML = txt; } } else { if (cl || ob != o) { if (ob >= 0) { with(obj[ob]) { s = - 2; mv = true; zoom(); } } ob = o; s = 1; xb = xm; yb = ym; mv = true; zoom(); cap.innerHTML = txt; } } } } } /* hook up events */ img[o].onmouseover = img[o].onmousemove = img[o].onmouseout = new Function("cl=false;obj[" + o + "].click()"); img[o].onclick = new Function("cl=true;obj[" + o + "].click()"); img[o].onload = new Function("img_center(" + o + ")"); /* initial display */ this.zoom(); } /* mouse */ document.onmousemove = function(e) { if ( ! e) { e = window.event; } xm = (e.x || e.clientX); ym = (e.y || e.clientY); } /* init */ function load() { /* html elements */ scr = document.getElementById("screen"); spa = scr.getElementsByTagName("span"); img = scr.getElementsByTagName("img"); cap = document.getElementById("caption"); /* mouseover border */ document.getElementById("border").onmouseover = function() { cl = true; if(ob >= 0 && obj[ob].s > 0) obj[ob].click(); ob = -1; } /* global variables */ W = parseInt(scr.style.width); H = parseInt(scr.style.height); M = W / Mg; Sx = (W - (Nx - 1) * M) / Nx; Sy = (H - (Ny - 1) * M) / Ny; Wi = Tx * Sx + (Tx - 1) * M; Hi = Ty * Sy + (Ty - 1) * M; SP = M * Tx * SP; wi = (Wi - Sx) / SP; hi = (Hi - Sy) / SP; /* create objects */ for (k = 0, i = 0; i < Nx; i ++) { for (j = 0; j < Ny; j ++) { obj[k] = new Cobj(k ++, i, j); } } } //--> </script> </head> <body> <div style="position:absolute;left:50%;top:50%"> <div id="title" style="position:absolute;width:440px;height:40px;left:-220px;top:-200px"></div> <div id="border" style="position:absolute;width:440px;height:340px;left:-220px;top:-170px;background:#000;border:#555 solid 1px"></div> <div id="screen" style="position:absolute;width:400px;height:300px;left:-200px;top:-150px;background:#000"> <span><a href="[b]Friends Link[/b]"><img src="[b]Friends Image Link[/b]" alt="<b>[b]Friends Name[/b]</b>"></a></span> <span><a href="[b]Friends Link[/b]"><img src="[b]Friends Image Link[/b]" alt="<b>[b]Friends Name[/b]</b>"></a></span> <span><a href="[b]Friends Link[/b]"><img src="[b]Friends Image Link[/b]" alt="<b>[b]Friends Name[/b]</b>"></a></span> <span><a href="[b]Friends Link[/b]"><img src="[b]Friends Image Link[/b]" alt="<b>[b]Friends Name[/b]</b>"></a></span> <span><a href="[b]Friends Link[/b]"><img src="[b]Friends Image Link[/b]" alt="<b>[b]Friends Name[/b]</b>"></a></span> <span><a href="[b]Friends Link[/b]"><img src="[b]Friends Image Link[/b]" alt="<b>[b]Friends Name[/b]</b>"></a></span> <span><a href="[b]Friends Link[/b]"><img src="[b]Friends Image Link[/b]" alt="<b>[b]Friends Name[/b]</b>"></a></span> <span><a href="[b]Friends Link[/b]"><img src="[b]Friends Image Link[/b]" alt="<b>[b]Friends Name[/b]</b>"></a></span> <span><a href="[b]Friends Link[/b]"><img src="[b]Friends Image Link[/b]" alt="<b>[b]Friends Name[/b]</b>"></a></span> <span><a href="[b]Friends Link[/b]"><img src="[b]Friends Image Link[/b]" alt="<b>[b]Friends Name[/b]</b>"></a></span> <span><a href="[b]Friends Link[/b]"><img src="[b]Friends Image Link[/b]" alt="<b>[b]Friends Name[/b]</b>"></a></span> <span><a href="[b]Friends Link[/b]"><img src="[b]Friends Image Link[/b]" alt="<b>[b]Friends Name[/b]</b>"></a></span> <span><a href="[b]Friends Link[/b]"><img src="[b]Friends Image Link[/b]" alt="<b>[b]Friends Name[/b]</b>"></a></span> <span><a href="[b]Friends Link[/b]"><img src="[b]Friends Image Link[/b]" alt="<b>[b]Friends Name[/b]</b>"></a></span> <span><a href="[b]Friends Link[/b]"><img src="[b]Friends Image Link[/b]" alt="<b>[b]Friends Name[/b]</b>"></a></span> <span><a href="[b]Friends Link[/b]"><img src="[b]Friends Image Link[/b]" alt="<b>[b]Friends Name[/b]</b>"></a></span> </div> <div id="caption" style="position:absolute;width:440px;height:60px;left:-220px;top:175px">- my friends - </div> </div> <script type="text/javascript"><!-- // starter load(); //--> </script> </body> </html>[/quote] just edit the bold parts :thumbsup: recommended size of image :arrow: 440x330 btw, you can used jpg, png, gif images :thumbsup: Step 2 :arrow: Paste this on your Onload Handler :thumbsdown: [spoiler]var tax = "<iframe style='FILTER: chroma(color=transparent)' allowtransparency='true' frameborder=0 width='[b]520[/b]' height='[b]420[/b]' scrolling='no' src=[b]Link of your .html[/b]></iframe><br><br><center><a href=\"http://www.friendster.com/friends/[b]62346457[/b]\"><b>View All Friends</b></a><br><br></center>"; addBox("LEFT","[b]Featured Friends[/b]",tax,"div_987","6");[/spoiler] just edit the bold parts with your own then your done :thumbsup: preview :arrow: http://profiles.friendster.com/62346457

Last edited by simpleMe (2008-07-13 04:38:20)

samuel_nathan_jude
» n00b
FTalk Level: zero
1
0
1969-12-31

Re: [b]Description[/b] :arrow: This Trick will make your Featured Friends expand when mouseover :thumbsup: Credits :arrow: [b]dhteumeuleu[/b] step 1 :arrow: SAve this as [b].html[/b] :thumbsdown: [quot

i gonna try this one. nice trick!
mhedge
» FTalkGeek
FTalk Level: zero
1027
0
1969-12-31

Re: [b]Description[/b] :arrow: This Trick will make your Featured Friends expand when mouseover :thumbsup: Credits :arrow: [b]dhteumeuleu[/b] step 1 :arrow: SAve this as [b].html[/b] :thumbsdown: [quot

wow!! :o nice effect!! tnss for diz =)
joenathan
» FTalkAddict
FTalk Level: zero
375
0
1969-12-31

Re: [b]Description[/b] :arrow: This Trick will make your Featured Friends expand when mouseover :thumbsup: Credits :arrow: [b]dhteumeuleu[/b] step 1 :arrow: SAve this as [b].html[/b] :thumbsdown: [quot

cool :thumbsup:... i use this :thumbsup: thanks for sharing.. :thumbsup: +1 for u :lol:
Yellow Flash
» Banned
FTalk Level: zero
1781
0
1969-12-31

Re: [b]Description[/b] :arrow: This Trick will make your Featured Friends expand when mouseover :thumbsup: Credits :arrow: [b]dhteumeuleu[/b] step 1 :arrow: SAve this as [b].html[/b] :thumbsdown: [quot

...

Last edited by Yellow Flash (2009-06-04 00:22:22)

simpleMe
» FTalkManiac
FTalk Level: zero
949
0
1969-12-31

Re: [b]Description[/b] :arrow: This Trick will make your Featured Friends expand when mouseover :thumbsup: Credits :arrow: [b]dhteumeuleu[/b] step 1 :arrow: SAve this as [b].html[/b] :thumbsdown: [quot

thanks for the comments [b]samuel_nathan_jude[/b] & [b]mhedge[/b] :thumbsup: and thanks also bro [b]Yellow Flash[/b] & [b]joenathan[/b] for the comments & +repu =)

Last edited by simpleMe (2008-07-13 09:51:26)

switpotato
» FTalkGeek
FTalk Level: zero
1027
0
1969-12-31

Re: [b]Description[/b] :arrow: This Trick will make your Featured Friends expand when mouseover :thumbsup: Credits :arrow: [b]dhteumeuleu[/b] step 1 :arrow: SAve this as [b].html[/b] :thumbsdown: [quot

wahehehe tax tax tax.... nothing... u really getting better and better... muahhss... enx for this..
simpleMe
» FTalkManiac
FTalk Level: zero
949
0
1969-12-31

Re: [b]Description[/b] :arrow: This Trick will make your Featured Friends expand when mouseover :thumbsup: Credits :arrow: [b]dhteumeuleu[/b] step 1 :arrow: SAve this as [b].html[/b] :thumbsdown: [quot

[quote=switpotato]wahehehe tax tax tax.... nothing... u really getting better and better... muahhss... enx for this..[/quote] your welcome [b]swit[/b] :rose:
areyaa
» FTalkAddict
FTalk Level: zero
549
0
1969-12-31

Re: [b]Description[/b] :arrow: This Trick will make your Featured Friends expand when mouseover :thumbsup: Credits :arrow: [b]dhteumeuleu[/b] step 1 :arrow: SAve this as [b].html[/b] :thumbsdown: [quot

wowowoow........... nice one........ cool effects........ thanks brother.........
simpleMe
» FTalkManiac
FTalk Level: zero
949
0
1969-12-31

Re: [b]Description[/b] :arrow: This Trick will make your Featured Friends expand when mouseover :thumbsup: Credits :arrow: [b]dhteumeuleu[/b] step 1 :arrow: SAve this as [b].html[/b] :thumbsdown: [quot

[quote=areyaa]wowowoow........... nice one........ cool effects........ thanks brother.........[/quote] your welcome dude :thumbsup:
dale
» FTalkAgent
FTalk Level: zero
2122
0
1969-12-31

Re: [b]Description[/b] :arrow: This Trick will make your Featured Friends expand when mouseover :thumbsup: Credits :arrow: [b]dhteumeuleu[/b] step 1 :arrow: SAve this as [b].html[/b] :thumbsdown: [quot

bro. it works only on FF? :paranoid:
simpleMe
» FTalkManiac
FTalk Level: zero
949
0
1969-12-31

Re: [b]Description[/b] :arrow: This Trick will make your Featured Friends expand when mouseover :thumbsup: Credits :arrow: [b]dhteumeuleu[/b] step 1 :arrow: SAve this as [b].html[/b] :thumbsdown: [quot

[quote=dale]bro. it works only on FF? :paranoid:[/quote] works both FF & IE bro :thumbsup:
duchess
» FTalkElite
FTalk Level: zero
6453
0
1969-12-31

Re: [b]Description[/b] :arrow: This Trick will make your Featured Friends expand when mouseover :thumbsup: Credits :arrow: [b]dhteumeuleu[/b] step 1 :arrow: SAve this as [b].html[/b] :thumbsdown: [quot

^ :/ i cant see the trick in your preview. im using IE :rolleyes:
art_phil2005@hotmail.com
» n00b
FTalk Level: zero
39
0
1969-12-31

Re: [b]Description[/b] :arrow: This Trick will make your Featured Friends expand when mouseover :thumbsup: Credits :arrow: [b]dhteumeuleu[/b] step 1 :arrow: SAve this as [b].html[/b] :thumbsdown: [quot

bawawow im using this now so cool!!!:thumbsup: ah tips to noobs like me i made it work when I used positioning script!!!

Last edited by art_phil2005@hotmail.com (2008-07-26 13:38:28)

simpleMe
» FTalkManiac
FTalk Level: zero
949
0
1969-12-31

Re: [b]Description[/b] :arrow: This Trick will make your Featured Friends expand when mouseover :thumbsup: Credits :arrow: [b]dhteumeuleu[/b] step 1 :arrow: SAve this as [b].html[/b] :thumbsdown: [quot

[quote=ducheszv]:/ i cant see the trick in your preview. im using IE :rolleyes:[/quote] preview fix now :thumbsup:[quote=art_phil2005@hotmail.com]bawawow im using this now so cool!!!:thumbsup: ah tips to noobs like me i made it work when I used positioning script!!![/quote] im glad it works in your page, mah friend :thumbsup:
chibon
» FTalker
FTalk Level: zero
193
0
1969-12-31

Re: [b]Description[/b] :arrow: This Trick will make your Featured Friends expand when mouseover :thumbsup: Credits :arrow: [b]dhteumeuleu[/b] step 1 :arrow: SAve this as [b].html[/b] :thumbsdown: [quot

:thumbsup::thumbsup::thumbsup: good JOB :penguin::penguin::penguin:
robin182
» FTalkAddict
FTalk Level: zero
471
0
1969-12-31

Re: [b]Description[/b] :arrow: This Trick will make your Featured Friends expand when mouseover :thumbsup: Credits :arrow: [b]dhteumeuleu[/b] step 1 :arrow: SAve this as [b].html[/b] :thumbsdown: [quot

featured fren is so cool.. great share.. thx before.. :D
  • ARCHIVES 
  • » [b]Description[/b] :arrow: This Trick will make your Featured Friends expand when mouseover :thumbsup: Credits :arrow: [b]dhteumeuleu[/b] step 1 :arrow: SAve this as [b].html[/b] :thumbsdown: [quot

Pages: 1

Board footer

© 2024 F Talk

Current time is 22:17

[ 10 queries - 0.039 second ]
Privacy Policy