B&W to Color on MouseOver slideshow with links to pages for each picture HELP...

Hey guys, I am looking for some help. I have looked everywhere online for code to do this but I can't find exactly what I am looking for or if I think I have, it doesn't work. I am fresh meat at this so I don't know how to do a lot, but can figure a lot of things out. The website I am most trying to model is : http://coldwellbankerpreviews.com/. B&W to Color on MouseOver slideshow with links to pages for each picture is what I am trying to do like the one on the main page. If someone can help me, I would greatly appreciate it. If you need more information from me, please let me know..

Thank you,
Andy

In principle with the background images chnged to your B&W images

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <style type="text/css"> /*<![CDATA[*/ #slideshow { position:absolute;left:100px;top:100px;width:350px;height:263px;background-Color:#FFCC66; } .page { position:absolute;left:0px;top:0px;width:350px;height:263px;background-Color:#FFFFCC; } .page IMG { position:absolute;left:0px;top:-300px;width:350px;height:263px;border-Width:0px; } .page0 { background-Image:url(http://www.vicsjavascripts.org/StdImages/0.gif); } .page1 { background-Image:url(http://www.vicsjavascripts.org/StdImages/1.gif); } .page2 { background-Image:url(http://www.vicsjavascripts.org/StdImages/2.gif); } #forward { position:absolute;z-Index:10;left:0px;top:100px;width:30px;height:50px;background-Color:#CCFFFF;border:solid red 1px;cursor:pointer; } #back { position:absolute;z-Index:10;right:0px;top:100px;width:30px;height:50px;background-Color:#CCFFFF;border:solid red 1px;cursor:pointer; } /*]]>*/ </style></head> <body> <input type="button" name="" value="GoTo 0" onclick="zxcSlideShow.GoTo('slideshow',0);"/> <input type="button" name="" value="GoTo 1" onclick="zxcSlideShow.GoTo('slideshow',1);"/> <input type="button" name="" value="GoTo 2" onclick="zxcSlideShow.GoTo('slideshow',2);"/> <div id="slideshow" > <div class="page page0" > page 0 <a href="http://www.vicsjavascripts.org/"><img src="http://www.vicsjavascripts.org/StdImages/Egypt5.jpg" alt="img" /></a> </div> <div class="page page1" > page 1 <img src="http://www.vicsjavascripts.org/StdImages/Egypt6.jpg" alt="img" /> </div> <div class="page page2" > page 2 <img src="http://www.vicsjavascripts.org/StdImages/Egypt6.jpg" alt="img" /> </div> <div id="forward" ></div> <div id="back" ></div> </div> <script type="text/javascript"> /*<![CDATA[*/ // Mouseover Fade Slide Show. (21-March-2014) // by - Vic Phillips - http://www.vicsjavascripts.org/ var zxcSlideShow={ Next:function(id,ud){ var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1; if (o){ o.ud=ud; this.rotate(o,o.n+ud); } }, GoTo:function(id,n){ var o=this['zxc'+id]; if (o){ this.Pause(o.id); if (o.a[n]&&n!=o.n){ o.ud=n>o.n?1:-1; this.rotate(o,n); } } }, Auto:function(id,ms){ var oop=this,o=this['zxc'+id]; if (o){ o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200); } }, Pause:function(id){ var o=this['zxc'+id]; if (o){ clearTimeout(o.to); o.auto=false; } }, init:function(o){ var id=o.ParentID,ms=o.FadeDuration,add=o.AddEvents,h=o.AutoHold,s=o.AutoStart,p=document.getElementById(id),pgs=p?this.bycls(o.PageClass,p,'DIV'):[]; if (pgs[0]){ var n=0,add=add instanceof Array?add:[],i,z0=0,z1=0; o.a=[] for (;z0<pgs.length;z0++){ i=pgs[z0].getElementsByTagName('IMG')[0]||document.createElement('IMG'); i.style.top='-3000px'; pgs[z0].style.top=(z0!=n?-3000:0)+'px'; o.a[z0]=[[pgs[z0],z0!=n?0:100],[i,0]]; } o.id=id; o.n=n; o.ud=1; o.lgth=z0-1; o.ms=typeof(ms)=='number'&&ms>20?ms:1000; o.h=typeof(h)=='number'&&h>20?h:o.ms*4; this.addevt(p,'mouseover','mse',o,false); this.addevt(p,'mouseout','mse',o,true); for (;z1<add.length;z1++){ if (add[z1]&&add[z1][0]){ n=document.getElementById(add[z1][0]); i=add[z1][1]; if (n&&this[add[z1][2]]){ this.addevt(n,i=='mouseup'||i=='mouseover'||i=='mouseout'||i=='mousedown'?i:'click',add[z1][2],o.id,add[z1][3]); } } } this['zxc'+id]=o; typeof(s)=='number'&&s>20?this.Auto(id,s):null; } }, mse:function(o,ud){ ud===false?this.Pause(o.id):null; this.animate(o,o.a[o.n][1],o.a[o.n][1][1],ud?0:100,new Date(),o.ms,ud?'hide':''); o.a[o.n][1][0].style.top='0px'; }, rotate:function(o,a){ this.Pause(o.id); this.mse(o,true); o.auto=a===true; var n=o.auto?o.n+o.ud:a; n=n<0?o.lgth:n>o.lgth?0:n; o.a[o.n][0][0].style.zIndex='0'; this.animate(o,o.a[o.n][0],o.a[o.n][0][1],0,new Date(),o.ms,'hide'); o.a[n][0][0].style.zIndex='1'; o.a[n][0][0].style.top='0px'; this.animate(o,o.a[n][0],o.a[n][0][1],100,new Date(),o.ms,'auto'); o.n=n; }, animate:function(o,a,f,t,srt,mS,x){ clearTimeout(a[5]); var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f; if (isFinite(n)){ a[1]=n; oop.opc(a[0],a[1]); } if (ms<mS){ a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,x); },10); } else { a[1]=t; oop.opc(a[0],t); x=='hide'?a[0].style.top='-3000px':null; x=='auto'&&o.auto?oop.Auto(o.id,o.h):null; } }, opc:function zxcOpacity(o,n){ o.style.filter='alpha(opacity='+n+')'; o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001; }, bycls:function (n,o,t){ for (var o=o||document.body,c=o.getElementsByTagName(t||'*'),a=[],z0=0; z0<c.length;z0++){ if((' '+c[z0].className+' ').match(' '+n+' ')){ a.push(c[z0]); } } return a; }, addevt:function(o,t,f,p,p1){ var oop=this; o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null; } } zxcSlideShow.init({ ParentID:'slideshow', // the unique ID name of the slide show parent DIV. (string) PageClass:'page', // the common class name of the slide show pages. (string) FadeDuration:1000, //(optional) the fade duration in milliseconds. (number, default = 1000) AddEvents:[ //(optional) an array defining the event call to add to elements to control the script. (array, default = inline event calls) // field 0 = the unique ID name of the element. // field 1 = the event type. // field 2 = the script function name. // field 3 = the control parameter to pass to the function. ['slideshow','mouseout','Auto'], ['forward','mouseup','Next',1], ['back','mouseup','Next',-1] ], AutoHold:2000, //(optional) the auto rotation fade 'hold' delay in milli seconds. (number, default = FadeDuration*4) AutoStart:2000 //(optional) the delay before starting auto rotation. (number, default = no auto start) }); /*]]>*/ </script> </body> </html>

Hey Vic, Thank you for replying so quickly. I may be too much of a newb or this is just way over my head because I can't get it to work. When I add this all I get are three little buttons that say "go to 0, go to 1, and go to 2". Can you tell me what I am doing wrong (probably everything). I really appreciate any more help you can give me...

Andy

I have tested the script with IE and FF

see
http://www.vicsjavascripts.org/Demos/140321A.htm

It says the page cannot be displayed in Chrome and IE from the link. I am a realtor and most of the websites we use only work with Chrome...

I used chrome to view the link and it works for me

Hey Vic, like I said, thank you for taking the time to help me. I have half way figured it out but still having some problms.
1)How do I add the address for when you cllck on the picture?
2)After the last picture, the slide show yellows out. I tried to add more slides, but it just kept doing that after the first three..
3)How do I add more pics to the slide show? (Like I said, it yellows out after the first three)

I will add what I have done and I am sure you can look at it quickly and see if I have screwed something up.
Thanks again,
Andy
www.wbreg.com

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <style type="text/css"> /*<![CDATA[*/ #slideshow { position:absolute;left:0px;top:0px;width:1000px;height:600px;background-Color:#FFCC66; } .page { position:absolute;left:0px;top:0px;width:1000px;height:600px;background-Color:#FFFFCC; } .page IMG { position:absolute;left:0px;top:-0px;width:1000px;height:600px;border-Width:0px; } .page0 { background-Image:url(http://farm4.staticflickr.com/3833/1...1846a2_b.jpg); } .page1 { background-Image:url(http://farm4.staticflickr.com/3790/1...a80a3f_b.jpg); } .page2 { background-Image:url(http://farm8.staticflickr.com/7295/1...999185_b.jpg); } #forward { position:absolute;z-Index:50;left:0px;top:100px;width:30px;height:50px;background-Color:#CCFFFF;border:solid red 1px;cursor:pointer; } #back { position:absolute;z-Index:50;right:0px;top:100px;width:30px;height:50px;background-Color:#CCFFFF;border:solid red 1px;cursor:pointer; } /*]]>*/ </style></head> <body> <input type="button" name="" value="GoTo 0" onclick="zxcSlideShow.GoTo('slideshow',0);"/> <input type="button" name="" value="GoTo 1" onclick="zxcSlideShow.GoTo('slideshow',1);"/> <input type="button" name="" value="GoTo 2" onclick="zxcSlideShow.GoTo('slideshow',2);"/> <div id="slideshow" > <div class="page page0" > page 0 <a href=""><img src="http://farm4.staticflickr.com/3665/13370845404_cdbf18a61a_b.jpgg" alt="img" /></a> </div> <div class="page page1" > page 1 <img src="http://farm8.staticflickr.com/7176/13370485155_cc7da58226_b.jpg" alt="img" /> </div> <div class="page page2" > page 2 <img src="http://farm4.staticflickr.com/3665/13370845404_cdbf18a61a_b.jpg" alt="img" /> <div class="page page0" > </div> <div id="forward" ></div> <div id="back" ></div> </div> <script type="text/javascript"> /*<![CDATA[*/ // Mouseover Fade Slide Show. (21-March-2014) // by - Vic Phillips - http://www.vicsjavascripts.org/ var zxcSlideShow={ Next:function(id,ud){ var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1; if (o){ o.ud=ud; this.rotate(o,o.n+ud); } }, GoTo:function(id,n){ var o=this['zxc'+id]; if (o){ this.Pause(o.id); if (o.a[n]&&n!=o.n){ o.ud=n>o.n?1:-1; this.rotate(o,n); } } }, Auto:function(id,ms){ var oop=this,o=this['zxc'+id]; if (o){ o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200); } }, Pause:function(id){ var o=this['zxc'+id]; if (o){ clearTimeout(o.to); o.auto=false; } }, init:function(o){ var id=o.ParentID,ms=o.FadeDuration,add=o.AddEvents,h=o.AutoHold,s=o.AutoStart,p=document.getElementById(id),pgs=p?this.bycls(o.PageClass,p,'DIV'):[]; if (pgs[0]){ var n=0,add=add instanceof Array?add:[],i,z0=0,z1=0; o.a=[] for (;z0<pgs.length;z0++){ i=pgs[z0].getElementsByTagName('IMG')[0]||document.createElement('IMG'); i.style.top='-3000px'; pgs[z0].style.top=(z0!=n?-3000:0)+'px'; o.a[z0]=[[pgs[z0],z0!=n?0:100],[i,0]]; } o.id=id; o.n=n; o.ud=1; o.lgth=z0-1; o.ms=typeof(ms)=='number'&&ms>20?ms:1000; o.h=typeof(h)=='number'&&h>20?h:o.ms*4; this.addevt(p,'mouseover','mse',o,false); this.addevt(p,'mouseout','mse',o,true); for (;z1<add.length;z1++){ if (add[z1]&&add[z1][0]){ n=document.getElementById(add[z1][0]); i=add[z1][1]; if (n&&this[add[z1][2]]){ this.addevt(n,i=='mouseup'||i=='mouseover'||i=='mouseout'||i=='mousedown'?i:'click',add[z1][2],o.id,add[z1][3]); } } } this['zxc'+id]=o; typeof(s)=='number'&&s>20?this.Auto(id,s):null; } }, mse:function(o,ud){ ud===false?this.Pause(o.id):null; this.animate(o,o.a[o.n][1],o.a[o.n][1][1],ud?0:100,new Date(),o.ms,ud?'hide':''); o.a[o.n][1][0].style.top='0px'; }, rotate:function(o,a){ this.Pause(o.id); this.mse(o,true); o.auto=a===true; var n=o.auto?o.n+o.ud:a; n=n<0?o.lgth:n>o.lgth?0:n; o.a[o.n][0][0].style.zIndex='0'; this.animate(o,o.a[o.n][0],o.a[o.n][0][1],0,new Date(),o.ms,'hide'); o.a[n][0][0].style.zIndex='1'; o.a[n][0][0].style.top='0px'; this.animate(o,o.a[n][0],o.a[n][0][1],100,new Date(),o.ms,'auto'); o.n=n; }, animate:function(o,a,f,t,srt,mS,x){ clearTimeout(a[5]); var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f; if (isFinite(n)){ a[1]=n; oop.opc(a[0],a[1]); } if (ms<mS){ a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,x); },10); } else { a[1]=t; oop.opc(a[0],t); x=='hide'?a[0].style.top='-3000px':null; x=='auto'&&o.auto?oop.Auto(o.id,o.h):null; } }, opc:function zxcOpacity(o,n){ o.style.filter='alpha(opacity='+n+')'; o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001; }, bycls:function (n,o,t){ for (var o=o||document.body,c=o.getElementsByTagName(t||'*'),a=[],z0=0; z0<c.length;z0++){ if((' '+c[z0].className+' ').match(' '+n+' ')){ a.push(c[z0]); } } return a; }, addevt:function(o,t,f,p,p1){ var oop=this; o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null; } } zxcSlideShow.init({ ParentID:'slideshow', // the unique ID name of the slide show parent DIV. (string) PageClass:'page', // the common class name of the slide show pages. (string) FadeDuration:1000, //(optional) the fade duration in milliseconds. (number, default = 1000) AddEvents:[ //(optional) an array defining the event call to add to elements to control the script. (array, default = inline event calls) // field 0 = the unique ID name of the element. // field 1 = the event type. // field 2 = the script function name. // field 3 = the control parameter to pass to the function. ['slideshow','mouseout','Auto'], ['forward','mouseup','Next',1], ['back','mouseup','Next',-1] ], AutoHold:2000, //(optional) the auto rotation fade 'hold' delay in milli seconds. (number, default = FadeDuration*4) AutoStart:2000 //(optional) the delay before starting auto rotation. (number, default = no auto start) }); /*]]>*/ </script> </body> </html>

your HTML code is a real mess with HTML before and after the <BODY> tag, you will need to sort that out
I tried to sort it out but it would be better to start again

the slideshow works fine

Code:

<!DOCTYPE html><html lang="en" dir="ltr"> <head> <title>Welcome </title> <style type="text/css"> /* <![CDATA[*/ #slideshow { position:absolute;left:0px;top:0px;width:1600px;height:1067px;background-Color:#FFCC66; } .page { position:absolute;left:0px;top:0px;width:1600px;height:1067px;background-Color:#FFFFCC; } .page IMG { position:absolute;left:0px;top:-0px;width:1600px;height:1067px;border-Width:0px; } .page0 { background-Image:url(https://farm8.staticflickr.com/7038/13372273565_3d948ff9a8_h.jpg); } .page1 { background-Image:url(https://farm3.staticflickr.com/2868/13372657464_8d78f46ad0_h.jpg); } .page2 { background-Image:url(https://farm8.staticflickr.com/7300/13372287985_7728e1c0a3_h.jpg); } #forward { position:absolute;z-Index:250;left:0px;top:100px;width:30px;height:50px;background-Color:#CCFFFF;border:solid red 1px;cursor:pointer; } #back { position:absolute;z-Index:250;right:0px;top:100px;width:30px;height:50px;background-Color:#CCFFFF;border:solid red 1px;cursor:pointer; } /*]]>*/ </style> </head> <body> ;"/> <div id="slideshow" > <div class="page page0" > <a href=""> <img src="http://www.vicsjavascripts.org/StdImages/0.gif" alt="img" /> </a> </div> <div class="page page1" > <img src="http://www.vicsjavascripts.org/StdImages/1.gif" alt="img" /> </div> <div class="page page2" > <img src="http://www.vicsjavascripts.org/StdImages/2.gif" alt="img" /> </div> <div id="forward" > </div> <div id="back" > </div> </div> <script type="text/javascript"> /*<![CDATA[*/ // Mouseover Fade Slide Show. (21-March-2014) // by - Vic Phillips - http://www.vicsjavascripts.org/ var zxcSlideShow={ Next:function(id,ud){ var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1; if (o){ o.ud=ud; this.rotate(o,o.n+ud); } }, GoTo:function(id,n){ var o=this['zxc'+id]; if (o){ this.Pause(o.id); if (o.a[n]&&n!=o.n){ o.ud=n>o.n?1:-1; this.rotate(o,n); } } }, Auto:function(id,ms){ var oop=this,o=this['zxc'+id]; if (o){ o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200); } }, Pause:function(id){ var o=this['zxc'+id]; if (o){ clearTimeout(o.to); o.auto=false; } }, init:function(o){ var id=o.ParentID,ms=o.FadeDuration,add=o.AddEvents,h=o.AutoHold,s=o.AutoStart,p=document.getElementById(id),pgs=p?this.bycls(o.PageClass,p,'DIV'):[]; if (pgs[0]){ var n=0,add=add instanceof Array?add:[],i,z0=0,z1=0; o.a=[] for (;z0<pgs.length;z0++){ i=pgs[z0].getElementsByTagName('IMG')[0]||document.createElement('IMG'); i.style.top='-3000px'; pgs[z0].style.top=(z0!=n?-3000:0)+'px'; o.a[z0]=[[pgs[z0],z0!=n?0:100],[i,0]]; } o.id=id; o.n=n; o.ud=1; o.lgth=z0-1; o.ms=typeof(ms)=='number'&&ms>20?ms:1000; o.h=typeof(h)=='number'&&h>20?h:o.ms*4; this.addevt(p,'mouseover','mse',o,false); this.addevt(p,'mouseout','mse',o,true); for (;z1<add.length;z1++){ if (add[z1]&&add[z1][0]){ n=document.getElementById(add[z1][0]); i=add[z1][1]; if (n&&this[add[z1][2]]){ this.addevt(n,i=='mouseup'||i=='mouseover'||i=='mouseout'||i=='mousedown'?i:'click',add[z1][2],o.id,add[z1][3]); } } } this['zxc'+id]=o; typeof(s)=='number'&&s>20?this.Auto(id,s):null; } }, mse:function(o,ud){ ud===false?this.Pause(o.id):null; this.animate(o,o.a[o.n][1],o.a[o.n][1][1],ud?0:100,new Date(),o.ms,ud?'hide':''); o.a[o.n][1][0].style.top='0px'; }, rotate:function(o,a){ this.Pause(o.id); this.mse(o,true); o.auto=a===true; var n=o.auto?o.n+o.ud:a; n=n<0?o.lgth:n>o.lgth?0:n; o.a[o.n][0][0].style.zIndex='0'; this.animate(o,o.a[o.n][0],o.a[o.n][0][1],0,new Date(),o.ms,'hide'); o.a[n][0][0].style.zIndex='1'; o.a[n][0][0].style.top='0px'; this.animate(o,o.a[n][0],o.a[n][0][1],100,new Date(),o.ms,'auto'); o.n=n; }, animate:function(o,a,f,t,srt,mS,x){ clearTimeout(a[5]); var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f; if (isFinite(n)){ a[1]=n; oop.opc(a[0],a[1]); } if (ms<mS){ a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,x); },10); } else { a[1]=t; oop.opc(a[0],t); x=='hide'?a[0].style.top='-3000px':null; x=='auto'&&o.auto?oop.Auto(o.id,o.h):null; } }, opc:function zxcOpacity(o,n){ o.style.filter='alpha(opacity='+n+')'; o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001; }, bycls:function (n,o,t){ for (var o=o||document.body,c=o.getElementsByTagName(t||'*'),a=[],z0=0; z0<c.length;z0++){ if((' '+c[z0].className+' ').match(' '+n+' ')){ a.push(c[z0]); } } return a; }, addevt:function(o,t,f,p,p1){ var oop=this; o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null; } } zxcSlideShow.init({ ParentID:'slideshow', // the unique ID name of the slide show parent DIV. (string) PageClass:'page', // the common class name of the slide show pages. (string) FadeDuration:1000, //(optional) the fade duration in milliseconds. (number, default = 1000) AddEvents:[ //(optional) an array defining the event call to add to elements to control the script. (array, default = inline event calls) // field 0 = the unique ID name of the element. // field 1 = the event type. // field 2 = the script function name. // field 3 = the control parameter to pass to the function. ['slideshow','mouseout','Auto'], ['forward','mouseup','Next',1], ['back','mouseup','Next',-1] ], AutoHold:2000, //(optional) the auto rotation fade 'hold' delay in milli seconds. (number, default = FadeDuration*4) AutoStart:2000 //(optional) the delay before starting auto rotation. (number, default = no auto start) }); /*]]>*/ </script> </body> </html>

Like I said, I am a newb. This site is actually done through godaddy's website builder so blame them for the messy code. I am just good at copying and pasting what you have sent. I am very happy with what you set me up with so i just wanted to say thank you...
Andy