basic rollover image script... This is just a basic rollover image script but still can be very helpful for beginners just starting for some image tricks... and if a tutorial about this has been posted before... you can trash this post mods... [b]Credits:[/b] All Javascript Tutorial sites... coz honestly i always see this trick on most tutorial sites... just different names and applications...but still the same trick... i been using this code for a long time so i already forgotten the site where i saw this first... and i'm really thankful whoever the original author of this code. [b]What does it do...[/b] This script just simply make a certain image change.. means... enlarge, turn to a different image or both when you mouseover/out on it in a simple manner... you can apply [b]multiple images[/b] in it too even if it's in a different area or box using only one rollover script... so if you have a customized image in your page and you want it to changed when hovered... you can use this... for example you have a small siggy and you want it to get big when hovered... here's the code below... but first... make a [b]bigger[/b] image of your siggy that you want to appear when hovered... but not too big... coz bigger bytes tend to load slowwwwwwww...... the code... [quote][b]//rollover image script[/b] if (document.images) { image[color=violet]1[/color]=new Image; image[color=violet]1[/color].src="put URL of [b]SMALL[/b] siggy here"; image[color=orange]2[/color]=new Image; image[color=orange]2[/color].src="put URL of [b]BIG[/b] siggy here"; } function chgImg(name, image) { if (document.images) { document[name].src = eval(image+".src"); } }[/quote] //put it anywhere in your js compilations or inside the WVMtracker codes after the addbox clause... [b]Illustration...[/b] [quote]function onProfileLoad() { addBox("RIGHT","WVM TRACKER BOX",TRACKER.div.innerHTML,"tracker",null); [b]}[/b] [b]//YOU CAN PUT IT HERE AFTER THE Clause ' } ' character above...[/b] /*rest of TRACKER CODES below...*/[/quote] next... insert the code below at the image tag... [b]onMouseOver/Out code[/b] [quote]onMouseOver=\"chgImg('[color=red]ImageName[/color]', 'image[color=orange]2[/color]')\" onMouseOut=\"chgImg('[color=red]ImageName[/color]', 'image[color=violet]1[/color]')\"[/quote] but first... give a name on your image... let's use '[b]siggy[/b]' then insert the code... [quote]<img name='[color=red]siggy[/color]' src=\"put URL of [b]SMALL[/b] siggy here\" border=\"0\" [b]onMouseOver=\"chgImg('[color=red]siggy[/color]', 'image[color=orange]2[/color]')\" onMouseOut=\"chgImg('[color=red]siggy[/color]', 'image[color=violet]1[/color]')\"[/b]>[/quote] If with target link... [quote]<a href=\"PUT URL OF TARGET SITE HERE\" [b]onMouseOver=\"chgImg('[color=red]siggy[/color]', 'image[color=orange]2[/color]')\" onMouseOut=\"chgImg('[color=red]siggy[/color]', 'image[color=violet]1[/color]')\"[/b] target='_blank'><img name='[color=red]siggy[/color]' src=\"put URL of [b]SMALL[/b] siggy here\" border=\"0\"></a>[/quote] let's do an example with an image URL this time... lets say below is your [b] siggy[/b] located somewhere in your page... [quote]<img src=\"[b]http://i37.tinypic.com/foto.gif[/b]\" border=\"0\">[/quote] just gave it a name then insert the [b]onMouseOver/Out code[/b] [quote]<img name='[color=red]siggy[/color]' src=\"[b]http://i37.tinypic.com/foto.gif[/b]\" border=\"0\" [b]onMouseOver=\"chgImg('[color=red]siggy[/color]', 'image[color=orange]2[/color]')\" onMouseOut=\"chgImg('[color=red]siggy[/color]', 'image[color=violet]1[/color]')\"[/b]>[/quote] then make a bigger siggy... example: [b]http://i37.tinypic.com/bigfoto.gif[/b] you don't do nothing on it... you just put it on the [b]//rollover image script[/b] together with the URL of your original siggy... like this below... [quote][b]//rollover image script[/b] if (document.images) { //small siggy(original siggy image) image[color=violet]1[/color]=new Image; image[color=violet]1[/color].src="[b]http://i37.tinypic.com/foto.gif[/b]"; //big siggy(new bigger image) image[color=orange]2[/color]=new Image; image[color=orange]2[/color].src="[b]http://i37.tinypic.com/bigfoto.gif[/b]"; } function chgImg(name, image) { if (document.images) { document[name].src = eval(image+".src"); } }[/quote] then that's it... but if you want the more advance way... you can use the [b]tooltips or mootools[/b] effects... coz this is a [b]poor man's version[/b] only heheh... let's try [b]multiple images[/b] and customization... let's say we make a low-tech version of [b]unmaskedluke's[/b] Friends rollover image effect see here... [url=http://theftalk.com/t38109-Friends-rollover-image-effect.html]Friends-rollover-image-effect[/url] let's [b]Customized the Friends Box[/b]... let's put 4 friends there wherein each one of them have a [b]SMALL[/b] photo for display and a [b]BIG[/b] one when hovered... visit my page to see a [b]PREVIEW[/b]: [url=http://profiles.friendster.com/97631908]My Page[/url] first... make 2 images per friends... 1 [b]SMALL[/b] and 1 [b]BIG[/b]... add borders on both images to make it look much better... (i made mine at mytheme.com) [b]Customized Friends Box w/ Basic Image Rollover (low-tech version hehehh)[/b] [b]CSS[/b] : --- in your css extension file [quote]/*CSS SUPPORT FOR CUSTOMIZED FRIENDS BOX*/ .friends { background-color: transparent !important; background-image:url(PUT URL OF BACKGROUND IMAGE HERE); background-attachment: fixed; background-repeat: repeat; background-position: center; border: 1px solid #ff0033; height: auto; }[/quote] that's it... just edit it at your liking... [b]JS[/b] : --- add in your js extension file... [b]JScript 1:[/b] [quote][b]//Rollover Multiple Images Script[/b] if (document.images) { //friend 1 image[color=red]1[/color]=new Image; image[color=red]1[/color].src="[color=green]put URL of SMALL friend1 photo here[/color]"; image[color=blue]2[/color]=new Image; image[color=blue]2[/color].src="put URL of BIG friend1 photo here"; //friend 2 image[color=red]3[/color]=new Image; image[color=red]3[/color].src="[color=green]put URL of SMALL friend2 photo here[/color]"; image[color=blue]4[/color]=new Image; image[color=blue]4[/color].src="put URL of BIG friend2 photo here"; //friend 3 image[color=red]5[/color]=new Image; image[color=red]5[/color].src="[color=green]put URL of SMALL friend3 photo here[/color]"; image[color=blue]6[/color]=new Image; image[color=blue]6[/color].src="put URL of BIG friend3 photo here"; //friend 4 image[color=red]7[/color]=new Image; image[color=red]7[/color].src="[color=green]put URL of SMALL friend4 photo here[/color]"; image[color=blue]8[/color]=new Image; image[color=blue]8[/color].src="put URL of BIG friend4 photo here"; } function chgImg(name, image) { if (document.images) { document[name].src = eval(image+".src"); } }[/quote] see above illustration on where to put the codes... [b]NOTE:[/b] you can also arrange the images links like below... just choose whatever suits you... [quote]image1=new Image; image2=new Image; image3=new Image; image4=new Image; image5=new Image; image6=new Image; image7=new Image; image8=new Image; image1.src="put URL of SMALL friend1 photo here"; image2.src="put URL of BIG friend1 photo here"; image3.src="put URL of SMALL friend2 photo here"; image4.src="put URL of BIG friend2 photo here"; image5.src="put URL of SMALL friend3 photo here"; image6.src="put URL of BIG friend3 photo here"; image7.src="put URL of SMALL friend4 photo here"; image8.src="put URL of BIG friend4 photo here";[/quote] [b]NOTE:[/b] just study the number and image name pattern carefully... [b]Then follow the steps on the first example above.[/b] (about inserting onMouseOver/Out code) [b]JScript 2:[/b] [quote][b]//Customized Friends Box[/b] //put anywhere in your file but better inside the onloadhandler var friendsroll=document.getElementById("content_2"); var myfriends="<div align='center' id='myfriends'>"+ "<br>"+ "<center><table width='250px' align='center'><div style='background:url(PUT URL OF BACKGROUND IMAGE HERE) repeat fixed center; border:2px solid #fffafa;'><br><center><a href=\"PUT FRIENDSTER URL OF FRIEND HERE\" onMouseOver=\"chgImg('friend1', 'image[color=blue]2[/color]')\" onMouseOut=\"chgImg('friend1', 'image[color=red]1[/color]')\" target='_blank'><img name='friend1' src=\"[color=green]put URL of SMALL photo here[/color]\" border=\"0\"></a></center><center><a href=\"PUT FRIENDSTER URL OF FRIEND HERE\" target=\"_blank\">PUT TEXT OR FRIEND NAME HERE</a></center></div></table></center>"+ "<center><table width='250px' align='center'><div style='background:url(PUT URL OF BACKGROUND IMAGE HERE) repeat fixed center; border:2px solid #ff0033;'><br><center><a href=\"PUT FRIENDSTER URL OF FRIEND HERE\" onMouseOver=\"chgImg('friend2', 'image[color=blue]4[/color]')\" onMouseOut=\"chgImg('friend2', 'image[color=red]3[/color]')\" target='_blank'><img name='friend2' src=\"[color=green]put URL of SMALL photo here[/color]\" border=\"0\"></a></center><center><a href=\"PUT FRIENDSTER URL OF FRIEND HERE\" target=\"_blank\">PUT TEXT OR FRIEND NAME HERE</a></center></div></table></center>"+ "<center><table width='250px' align='center'><div style='background:url(PUT URL OF BACKGROUND IMAGE HERE) repeat fixed center; border:2px solid #fffafa;'><br><center><a href=\"PUT FRIENDSTER URL OF FRIEND HERE\" onMouseOver=\"chgImg('friend3', 'image[color=blue]6[/color]')\" onMouseOut=\"chgImg('friend3', 'image[color=red]5[/color]')\" target='_blank'><img name='friend3' src=\"[color=green]put URL of SMALL photo here[/color]\" border=\"0\"></a></center><center><a href=\"PUT FRIENDSTER URL OF FRIEND HERE\" target=\"_blank\">PUT TEXT OR FRIEND NAME HERE</a></center></div></table></center>"+ "<center><table width='250px' align='center'><div style='background:url(PUT URL OF BACKGROUND IMAGE HERE) repeat fixed center; border:2px solid #ff0033;'><br><center><a href=\"PUT FRIENDSTER URL OF FRIEND HERE\" onMouseOver=\"chgImg('friend4', 'image[color=blue]8[/color]')\" onMouseOut=\"chgImg('friend4', 'image[color=red]7[/color]')\" target='_blank'><img name='friend4' src=\"[color=green]put URL of SMALL photo here[/color]\" border=\"0\"></a></center><center><a href=\"PUT FRIENDSTER URL OF FRIEND HERE\" target=\"_blank\">PUT TEXT OR FRIEND NAME HERE</a></center></div></table></center>"+ "<br>"+ "</div>"; friendsroll.innerHTML=myfriends; friendsroll.style.height="auto";friendsroll.style.overflow="hidden";[/quote] sorry about my html guys... it still s#*@ks!! heheh... That's it... If adding more friends... or want the trick also in other area... just add the image links on the codes and just add the next number pattern... for example... adding the siggy above our first example... after the //friend 4... just add the siggy links and change the image number pattern... [b]IMPORTANT:[/b] synchronize the number pattern when adding so...(1,2,3,4,...and so on...) [quote]//friend 4 image[color=red]7[/color]=new Image; image[color=red]7[/color].src="[color=green]put URL of SMALL friend4 photo here[/color]"; image[color=blue]8[/color]=new Image; image[color=blue]8[/color].src="put URL of BIG friend4 photo here"; image[color=violet]9[/color]=new Image; image[color=violet]9[/color].src="put URL of [b]SMALL[/b] siggy here"; image[color=orange]10[/color]=new Image; image[color=orange]10[/color].src="put URL of [b]BIG[/b] siggy here"; and so on...[/quote] That's it!! but... To make it more cool... let's add a shake trick on images... i think it's also possible to add some tooltips on this... sorry... i'm too busy being lazy to try it... hehehh let's just put a shake on it... [b]Credits:[/b] Dynamic Drive (www.dynamicdrive.com) add in your css extension file [quote]/*CSS SUPPORT FOR SHAKE IMAGE TRICK*/ .shakeimage { position:relative; }[/quote] add in your js extension file... you can put it at the bottom part of your js compilation... [b]JScript 3:[/b] [quote]/* Shake image script (onMouseover)- © Dynamic Drive (www.dynamicdrive.com) For full source code, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com */ //configure shake degree (where larger # equals greater shake) var rector=4 ///////DONE EDITTING/////////// var stopit=0 var a=1 function init(which){ stopit=0 shake=which shake.style.left=0 shake.style.top=0 } function rattleimage(){ if ((!document.all&&!document.getElementById)||stopit==1) return if (a==1){ shake.style.top=parseInt(shake.style.top)+rector } else if (a==2){ shake.style.left=parseInt(shake.style.left)+rector } else if (a=){ shake.style.top=parseInt(shake.style.top)-rector } else{ shake.style.left=parseInt(shake.style.left)-rector } if (a<4) a++ else a=1 setTimeout("rattleimage()",50) } function stoprattle(which){ stopit=1 which.style.left=0 which.style.top=0 };[/quote] then add the code below in [b]'ALL'[/b] your [color=green]put URL of SMALL photo here[/color] at [b]Customized Friends Box[/b] code. [quote]class=\"shakeimage\" onMouseover=\"init(this);rattleimage()\" onMouseout=\"stoprattle(this);top.focus()\" onClick=\"top.focus()\"[/quote] like this below... [quote]<img name='friend1' src=\"[color=green]put URL of SMALL photo here[/color]\" border=\"0\" [b]class=\"shakeimage\" onMouseover=\"init(this);rattleimage()\" onMouseout=\"stoprattle(this);top.focus()\" onClick=\"top.focus()\"[/b]>[/quote] and then that's it... You now have a low-tech Customized Friends Box with rollover and shake when hovered hehehh... low-tech but still very cool ayt?!! hahahh!! can also be used on [b]customized buttons[/b] and etc... see other use here... [url=http://theftalk.com/t17739-Customized-NAVIGATION-AREA-vR-R-tracker.html]Customized Navigation Area (button and Image type) + addons[/url] ENJOY...

Last edited by Refresh/Reload (2009-06-14 08:25:50)