How to create a widget like the Pick Your Theme widget here? Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
3 posters

    How to create a widget like the Pick Your Theme widget here?

    Diana
    Diana
    Active Poster


    Female Posts : 1286
    Reputation : 21
    Language : English

    Solved How to create a widget like the Pick Your Theme widget here?

    Post by Diana October 23rd 2010, 1:59 pm

    How to create a widget like the Pick Your Theme widget here?
    What is the code for it?
    MrMario
    MrMario
    Helper
    Helper


    Male Posts : 22186
    Reputation : 1839
    Language : test

    Solved Re: How to create a widget like the Pick Your Theme widget here?

    Post by MrMario October 23rd 2010, 6:32 pm

    This would be the code.

    Sometimes you can get the code by clicking the source code on the page. Wink
    Code:
    <style type="text/css">
     
    .picshow { z-index:444; position:relative; background-color:#ffffff; width: 100%; height: 135px}
     
    .picshow_main { position: relative; width: 180px; height: 135px}
     
    .picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward); width: 180px; height: 135px}
     
    .picshow_change {position: absolute; text-align: left; bottom: 0px; height: 30px; right: 0px; left: 100px;}
     
    .picshow_change img {width:15px; height: 15px}
     
    .picshow_change a { border: 1px solid; display: block; float: left; margin-right: 5px;  -display: inline}
     
    a.axx { border-color: #555}
     
    a.axx:hover {border-color: #000}
     
    a.axx img { filter: alpha(opacity=40); opacity: 0.4; -moz-opacity: 0.4}
     
    a.axx:hover img {filter: alpha(opacity=100); opacity: 1.0; -moz-opacity: 1.0}
     
    a.bxx { border-color: #000}
     
    a.bxx:hover {border-color: #000}
     
    img{
     
    border:0px}
     
    </style>
     
    <SCRIPT language=javascript>
     
     var counts = 3;
     
     img1 = new Image();
     
     img1.src = 'http://hitskin.com/themes/13/27/62/thumb.png';
     
     img2 = new Image();
     
     img2.src = 'http://hitskin.com/themes/12/62/62/thumb.jpg';
     
     img3 = new Image();
     
     img3.src = 'http://hitskin.com/themes/13/82/61/thumb.png';
     
     
     
     var smallImg = new Array();
     
     smallImg[0] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton1.gif';
     
     smallImg[1] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton2.gif';
     
     smallImg[2] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton3.gif';
     
     
     
     url1 = 'http://en.hitskin.com/search-a-skin/black-gold-132762.htm';
     
     url2 = 'http://en.hitskin.com/search-a-skin/360-elite-126262.htm';
     
     url3 = 'http://en.hitskin.com/search-a-skin/ipvista-138261.htm';
     
     
     
     alt1 = new Image();
     
     alt1.alt = 'Black Gold';
     
     alt2 = new Image();
     
     alt2.alt = '360 Elite';
     
     alt3 = new Image();
     
     alt3.alt = 'IP Vista';
     
     var nn = 1;
     
     var key = 0;
     
     function change_img() {
     
      if (key == 0) {
     
      key = 1;
     
      } else if (document.all) {
     
      document.getElementById("pic").filters[0].Apply();
     
      document.getElementById("pic").filters[0].Play(duration = 2);
     
      }
     
      eval('document.getElementById("pic").src=img' + nn + '.src');
     
      eval('document.getElementById("url_theme").href=url' + nn);
     
      eval('document.getElementById("pic").alt=alt' + nn + '.alt');
     
      if (nn == 1) {
     
      document.getElementById("url_theme").target = "_blank";
     
      document.getElementById("url_theme").style.cursor = "pointer";
     
      } else {
     
      document.getElementById("url_theme").target = "_blank"
     
      document.getElementById("url_theme").style.cursor = "pointer"
     
      }
     
     
     
      for ( var i = 1; i <= counts; i++) {
     
      document.getElementById("xxjdjj" + i).className = 'axx';
     
      }
     
      document.getElementById("xxjdjj" + nn).className = 'bxx';
     
      nn++;
     
      if (nn > counts) {
     
      nn = 1;
     
      }
     
      tt = setTimeout('change_img()', 7000);
     
     }
     
     function changeimg(n) {
     
      nn = n;
     
      window.clearInterval(tt);
     
      change_img();
     
     }
     
     function ImageShow() {
     
      document.write('<div class="picshow_main">');
     
      document.write('<div><a id="url_theme"><img id="pic" class="imgbig" /></a></div>');
     
      document.write('<div class="picshow_change">');
     
      for ( var i = 0; i < counts; i++) {
     
      document.write('<a href="javascript:changeimg(' + (i + 1)
     
        + ');" id="xxjdjj' + (i + 1)
     
        + '" class="axx" target="_self"><img src="' + smallImg[i]
     
        + '"></a>');
     
      }
     
      document.write('</div></div>');
     
      change_img();
     
     }
     
    </SCRIPT>
     
    <SCRIPT language="javascript" type="text/javascript">
     
     ImageShow();
     
    </SCRIPT>
    Diana
    Diana
    Active Poster


    Female Posts : 1286
    Reputation : 21
    Language : English

    Solved Re: How to create a widget like the Pick Your Theme widget here?

    Post by Diana October 23rd 2010, 7:02 pm

    Thanks, MrMario.

    I totally forgot about checking the source code.

    That reminds me though - is there anyway to hide the source code cause there have been some people using the things I have spent so much time and effort on?
    MrMario
    MrMario
    Helper
    Helper


    Male Posts : 22186
    Reputation : 1839
    Language : test

    Solved Re: How to create a widget like the Pick Your Theme widget here?

    Post by MrMario October 23rd 2010, 7:17 pm

    Nope.
    Diana
    Diana
    Active Poster


    Female Posts : 1286
    Reputation : 21
    Language : English

    Solved Re: How to create a widget like the Pick Your Theme widget here?

    Post by Diana October 23rd 2010, 8:10 pm

    Ok thanks, solved! Smile
    Sanket
    Sanket
    ForumGuru


    Male Posts : 48766
    Reputation : 2830
    Language : English
    Location : Mumbai

    Solved Re: How to create a widget like the Pick Your Theme widget here?

    Post by Sanket October 24th 2010, 5:44 am

    Since this thread appears to be solved, I will lock this thread and mark it as solved.
    How to create a widget like the Pick Your Theme widget here? 2j4t5a8

    Sanket Smile