WordPress.org

Ready to get started?Download WordPress

Forums

Skype Online Status
Custom image in transparent dropdown (5 posts)

  1. Anachoreo
    Member
    Posted 2 years 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[1]+"_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[1]+".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:

    <!-- Transparent Dropdown - http://www.skype.com/go/skypebuttons --><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><!-- voicemail_start --><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><!-- voicemail_end --><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/

  2. RavanH
    Member
    Plugin Author

    Posted 2 years 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!

  3. Anachoreo
    Member
    Posted 2 years 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?

  4. Anachoreo
    Member
    Posted 2 years 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.

  5. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    Cheers! :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic