Getting rid of button highlight on Swiss Army controls?

[linda614]

1) Script Title: Swiss Army Image Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

3) Describe problem:

I am using the Swiss Army slideshow on my site (http://blissweddingstudio.com/gallery.shtm) without any problems; however I'm noticing that in Firefox, when I cycle through the slideshow manually using the 'back' and 'next' controls, there's a gray highlight on the top and left side of the buttons.

Specifying

slides.button_highlight='#270012';

eliminates the highlight around the control (as I set it to the same color as my background) but does not eliminate the smaller highlight I'm seeing now.

How do I get rid of this? Thanks for your help.

[jscheuer1]

You could use a style like so:


td td {
background-color:#270012!important;
border:none!important;
padding:none!important;
}

But that will affect other styles on your page. If instead, you gave the td that has the slide show in it an id:


<td id="theshow"><script type="text/javascript">
new inter_slide(slides)</script></td>

Then you could be much more selective:


#theshow td {
background-color:#270012!important;
border:none!important;
padding:none!important;
}

But, this might still negate some styles that you don't want removed and/or cause other problems. If so, forget about style modifications, you can edit the script instead:


inter_slide.prototype.ibute=function(obj, i){
if(!obj.parentNode)
return;
if(i==1)
obj.parentNode.style.backgroundColor=this.ibut_hc? this.ibut_hc : 'yellow';
else if(i==2)
obj.parentNode.style.backgroundColor='transparent';
else if(i==3){
obj.parentNode.style.borderTop=obj.parentNode.style.borderLeft='1px solid gray';
obj.parentNode.style.paddingRight='1px';obj.parentNode.style.paddingBottom=0;
}
if (i==2||i==4){
obj.parentNode.style.borderTop=obj.parentNode.style.borderLeft='none';
obj.parentNode.style.paddingRight='2px';obj.parentNode.style.paddingBottom='1px';
}
}

Change the color gray highlighted in the above to your background color or to a complimentary color like #502F3D.

[jscheuer1]

The more I looked at this, the more I favor editing the swissarmy.js script.

Use this inter_slide.prototype.ibute function:


inter_slide.prototype.ibute=function(obj, i){
if(!obj.parentNode)
return;
if(i==1)
obj.parentNode.style.backgroundColor=this.ibut_hc? this.ibut_hc : 'yellow';
else if(i==2)
obj.parentNode.style.backgroundColor='transparent';
else if(i==3){
obj.parentNode.style.borderTop=obj.parentNode.style.borderLeft='1px solid '+(this.ibut_depress_hc? this.ibut_depress_hc : 'gray');
obj.parentNode.style.paddingRight='1px';obj.parentNode.style.paddingBottom=0;
}
if (i==2||i==4){
obj.parentNode.style.borderTop=obj.parentNode.style.borderLeft='none';
obj.parentNode.style.paddingRight='2px';obj.parentNode.style.paddingBottom='1px';
}
}

add this code (highlighted) near the top of the swissarmy.js script:


. . .
this.utit=imgs.use_title;
this.fadecolor=imgs.fadecolor;
this.ibut_hc=imgs.button_highlight;
this.ibut_depress_hc=imgs.button_depressed_highlight;
this.dp=imgs.desc_prefix? imgs.desc_prefix : ' ';
this.imbcolor=imgs.border_color;
this.imbstyle=imgs.bor . . .

Then you may activate all that with a property in your on page script:


. . . ng_photo_69.jpg", "Bliss Wedding Photography"];
slides[69] = ["gallery/wedding_photo_70.jpg", "Bliss Wedding Photography"];
slides[70] = ["gallery/wedding_photo_71.jpg", "Bliss Wedding Photography"];
slides[71] = ["gallery/wedding_photo_72.jpg", "Bliss Wedding Photography"];
slides[72] = ["gallery/wedding_photo_73.jpg", "Bliss Wedding Photography"];
slides[73] = ["gallery/wedding_photo_74.jpg", "Bliss Wedding Photography"];
slides.image_controls=1;
slides.button_highlight='#270012';
slides.no_descriptions=1;
slides.use_alt=1;
slides.use_alt=1;
slides.border=0;
slides.no_added_linebreaks=1;
slides.button_depressed_highlight='#502F3D';

[linda614]

Thank you! That worked.