[Plugin: Skype Online Status] Custom image in transparent dropdown

Anachoreo
(@anachoreo)

11 years, 8 months ago
Hi,

I’m working on this website. Trying to replace the standard skype transparent dropdown with a custom image.
I downloaded the script from http://download.skype.com/share/skypebuttons/buttons/transparent_dropdown/dropdown.js and edited all the links to the relevant image. Then I uploaded it to my site.

It now looks like this: `document.write(‘<link rel=”stylesheet” href=”http://download.skype.com/share/skypebuttons/buttons/transparent_dropdown/dropdown.css” type=”text/css” media=”screen” />’);

SkpTransparent_preload1 = new Image();
SkpTransparent_preload1.src = “http://www.freemontgroup.com/wp-content/uploads/2012/08/skype-button3.png”;
SkpTransparent_preload2 = new Image();
SkpTransparent_preload2.src = “http://www.freemontgroup.com/wp-content/uploads/2012/08/skype-button3.png”;
SkpTransparent_preload3 = new Image();
SkpTransparent_preload3.src = “http://download.skype.com/share/skypebuttons/buttons/transparent_dropdown/up.png”;
SkpTransparent_preload4 = new Image();
SkpTransparent_preload4.src = “http://download.skype.com/share/skypebuttons/buttons/transparent_dropdown/down.png”;
SkpTransparent_preload5 = new Image();
SkpTransparent_preload5.src = “http://download.skype.com/share/skypebuttons/buttons/transparent_dropdown/2_over.png”;
SkpTransparent_preload6 = new Image();
SkpTransparent_preload6.src = “http://download.skype.com/share/skypebuttons/buttons/transparent_dropdown/3_over.png”;
SkpTransparent_preload7 = new Image();
SkpTransparent_preload7.src = “http://download.skype.com/share/skypebuttons/buttons/transparent_dropdown/4_over.png”;
SkpTransparent_preload8 = new Image();
SkpTransparent_preload8.src = “http://download.skype.com/share/skypebuttons/buttons/transparent_dropdown/5_over.png”;
SkpTransparent_preload9 = new Image();
SkpTransparent_preload9.src = “http://download.skype.com/share/skypebuttons/buttons/transparent_dropdown/6_over.png”;

var timerTransparent = false;

function skpBtnOvr(where) {
skypeTransparentDrpDown()
var myId = where.id;
var myImage = document.getElementById(myId);
var idArray = myId.split(“-“);
myImage.src = “http://download.skype.com/share/skypebuttons/buttons/transparent_dropdown/”+idArray%5B1%5D+”_over.png”
}
function skpBtnOut(where) {
skypeTransparentDrpUp()
var myId = where.id;
var myImage = document.getElementById(myId);
var idArray = myId.split(“-“);
myImage.src = “http://download.skype.com/share/skypebuttons/buttons/transparent_dropdown/”+idArray%5B1%5D+”.png”
}
function skypeTransparentDrpDown() {
if(timerTransparent) { clearTimeout(timerTransparent); timerTransparent = false; }
var skypeTransparentDrpCall = document.getElementById(‘skypeTransparentDrpCall’);
var skypeTransparentDrpArrow = document.getElementById(‘skypeTransparentDrpArrow’);
var skypeDropdowntransparent = document.getElementById(‘skypeDropdown-transparent’);
skypeDropdowntransparent.style.display = “block”;
skypeTransparentDrpCall.src = “http://www.freemontgroup.com/wp-content/uploads/2012/08/skype-button3.png”;
skypeTransparentDrpArrow.src = “http://download.skype.com/share/skypebuttons/buttons/transparent_dropdown/up.png”;
}
function skypeTransparentDrpUp() {
timerTransparent = setTimeout(“skypeTransparentDrpClose()”, 600);
}
function skypeTransparentDrpClose() {
var skypeDropdowntransparent = document.getElementById(‘skypeDropdown-transparent’);
skypeDropdowntransparent.style.display = “none”;
var skypeTransparentDrpCall = document.getElementById(‘skypeTransparentDrpCall’);
var skypeTransparentDrpArrow = document.getElementById(‘skypeTransparentDrpArrow’);
skypeTransparentDrpCall.src = “http://www.freemontgroup.com/wp-content/uploads/2012/08/skype-button3.png”;
skypeTransparentDrpArrow.src = “http://download.skype.com/share/skypebuttons/buttons/transparent_dropdown/down.png”;`

Then I proceded with editing the code on the plugin setting to this:
```
<script type="text/javascript" src="http://www.freemontgroup.com/wp-content/uploads/2012/08/skype-script.js"></script><div id="skypeTransparentDrp"><div id="skypeDropdown-transparent-head"><a href="skype:{skypeid}?call" id="skypeTransparentDrp-Call" title="{call}{sep1}{username}{sep2}{status}"><img src="http://www.freemontgroup.com/wp-content/uploads/2012/08/skype-button3.png" width="160" height="31" id="skypeTransparentDrpCall" alt="{call}{sep1}{username}{sep2}{status}" /></a><a href="#" id="skypeTransparentDrp-Switch" onclick="return false;"><img src="http://download.skype.com/share/skypebuttons/buttons/transparent_dropdown/down.png" width="30" height="31" id="skypeTransparentDrpArrow" alt="" onmouseover="skypeTransparentDrpDown()" onmouseout="skypeTransparentDrpUp();" /></a></div><div id="skypeDropdown-transparent" style="display: none;"><a href="skype:{skypeid}?chat" title="{chat}{sep1}{username}{sep2}{status}"><img src="http://download.skype.com/share/skypebuttons/buttons/transparent_dropdown/2.png" onmouseover="skpBtnOvr(this)" onmouseout="skpBtnOut(this)" width="173" height="26" id="SkpTranspBtn-2" alt="{chat}{sep1}{username}{sep2}{status}" /></a><a href="skype:{skypeid}?add" title="{add}{sep1}{username}{sep2}{status}"><img src="http://download.skype.com/share/skypebuttons/buttons/transparent_dropdown/3.png" onmouseover="skpBtnOvr(this)" onmouseout="skpBtnOut(this)" width="173" height="26" id="SkpTranspBtn-3" alt="{add}{sep1}{username}{sep2}{status}" /></a><a href="skype:{skypeid}?voicemail" title="{voicemail}{sep1}{username}{sep2}{status}"><img src="http://download.skype.com/share/skypebuttons/buttons/transparent_dropdown/4.png" onmouseover="skpBtnOvr(this)" onmouseout="skpBtnOut(this)" width="173" height="26" id="SkpTranspBtn-4" alt="{voicemail}{sep1}{username}{sep2}{status}" /></a><a href="skype:{skypeid}?userinfo" title="{userinfo}{sep1}{username}{sep2}{status}"><img src="http://download.skype.com/share/skypebuttons/buttons/transparent_dropdown/5.png" onmouseover="skpBtnOvr(this)" onmouseout="skpBtnOut(this)" width="173" height="26" id="SkpTranspBtn-5" alt="{userinfo}{sep1}{username}{sep2}{status}" /></a><a href="skype:{skypeid}?sendfile" title="{sendfile}{sep1}{username}{sep2}{status}"><img src="http://download.skype.com/share/skypebuttons/buttons/transparent_dropdown/6.png" onmouseover="skpBtnOvr(this)" onmouseout="skpBtnOut(this)" width="173" height="31" id="SkpTranspBtn-6" alt="{sendfile}{sep1}{username}{sep2}{status}" /></a></div></div>
```
I was hoping this would do the trick but it does not work at all. The script gets stuck on the href="#". Tried replacing that with "javascript:void(0)" but no effect.

I have never worked with js before so I’m kind of guessing in the dark. Is there a simple fix?

Thanks

http://wordpress.org/extend/plugins/skype-online-status/

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Author Rolf Allard van Hagen
(@ravanh)

11 years, 8 months ago
When working with javascript, it might be useful to get a developer toolbar extension to your browser(s) or use a browser that has developer tools integrated (like Opera, Chrome…) which includes a script console and error logging.

This usually gets you more information on script errors that are occurring on your site. In this case:
```
Syntax error at line 56 while loading: expected '}', got <end of file>
t_dropdown/down.png";
--------------------^
```
Hopefully, that tells you something. If not, you might want to study up on some javascript basics (please do not take this to be sarcastic, just a general pointer) before jumping in the deep end 😉

But even with more than beginner understanding of javascript, you might run in to difficulties, trying to change the Skype code without breaking it in some way. As I remember it, it’s a bit of a code soup and hard to figure out what’s what. So, good luck!
Thread Starter Anachoreo
(@anachoreo)

11 years, 8 months ago

Hi Ravanh,

Thanks for your help. I just missed that closing tag when I copied the script. It is working now, but the image won’t align. The default width is 143 + 30 px, but I replaced the original image width a custom one that is 160 + 30 px. Changed all the other pictures in the dropdown menu to 190 px and added align="right" to the small arrow pic without much effect. Somewhere there is a fixed width attribute but I don’t see where.

Any ideas?

Thread Starter Anachoreo
(@anachoreo)

11 years, 8 months ago

It does work when I shrink and replace the new image to 143 px. I guess I can modify the image to make it look good, so this topic is basically solved. Still it is strange that I did not find the dimension attributes apart from skypeDropdowntransparent.style.display = "block"

Maybe if I enlarge all the images to the same real width it would work too. Anyway time for a beer.

Plugin Author Rolf Allard van Hagen
(@ravanh)

11 years, 8 months ago

Cheers! 🙂

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘[Plugin: Skype Online Status] Custom image in transparent dropdown’ is closed to new replies.

Tags