Link to home
Start Free TrialLog in
Avatar of flf4eva
flf4eva

asked on

how do i get the picture size for Jquery

hi

I have a Jquery on my website, and i need to change all the pictures for the banners, i am getting the new pictures from MS word 2010, I print screen on the word and past it in the paint and save it from the paint. after i save it from paint and put it in the jquery banners its going out of the space

I tried to convert 978px to cm as a width and 354px to cm as a hieght but it didnt work

the jquery as the following


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="rotator/jquery-ui-personalized-1.5.3.packed.js" type="text/javascript"></script>
<style type="text/css">
/* Rotator Styles */
#wrapper {
      width:978px;
      border:1px solid #92a5bc;
      margin:0 auto;
}

#rotator {
      background:#FFF;
      color:#000;
      height:354px;
      position:relative;

      margin:0;
      font-size:16px;
}

/* Tabs */


ul.ui-tabs-nav, li.ui-tabs-nav-item, li.ui-tabs-nav-item a:link, li.ui-tabs-nav-item a:visited {
      margin:0;
      padding:0;
      border:0;
      outline:0;
      line-height:1.3;
      text-decoration:none;
      font-size:100%;
      list-style:none;
      float:left;
      font-family:Arial, Helvetica, sans-serif;
        width: 195.4px;
        height: 102px;
}

ul.ui-tabs-nav {
      position:absolute;
      bottom:0px;
      left:0;
      z-index:1;
      width:100%;
      border:none;
}

ul.ui-tabs-nav li {
      background:url(rotator/images/tabs_bgr.png) 0 -102px no-repeat;
      border-radius:0 0 2px 2px;
}

ul.ui-tabs-nav li:hover,
ul.ui-tabs-nav li.ui-tabs-selected {
      background-position: 0 1px;
}

/* Non-Selected Tabs */
li.ui-tabs-nav-item a:link,
li.ui-tabs-nav-item a:visited {      
      font-size:1.2em;
      font-weight:bold;
      text-align:center;
      color:#000;
      height:55px;
      padding-top:25px;
      margin-top:22px;
      border-left:solid 1px #ccc;
      border-right:solid 1px #fff;

}

li.ui-tabs-nav-item:first-child a {
      border-left:0;
}

li.ui-tabs-nav-item:last-child a {
      border-right:0;
}

/* Hovered Tab */


#rotator .ui-tabs-nav-item a span {
      cursor:pointer;

}

#rotator .ui-tabs-nav-item a span.red {
      color:#de0505;

}

#rotator .ui-tabs-nav-item a span.gray {
      color:#797979;

}

#rotator .ui-tabs-nav-item a:hover span,
#rotator .ui-tabs-nav-item a:active span {
      background-position: 0 0;
      color:#fff;
       
}

/* Active Tab */
#rotator .ui-tabs-selected a:link span,
#rotator .ui-tabs-selected a:visited span,
#rotator .ui-tabs-selected a:hover span,
#rotator .ui-tabs-selected a:active span{
      background-position: 0 0;
      color:#fff;
       
}

/* Content Panels */
#rotator .ui-tabs-panel {
      font-family:Arial, Helvetica, sans-serif;
      clear:left;
      color:#000;
      height:275px;
}

#rotator .ui-tabs-hide {
      display:none;
}

/* Background Images */
#rotator #fragment-1 {
      position:absolute;
      top:0;
      left:0;
      width:100%;
      background:transparent url(rotator/banner/pricing_n_signup.jpg) no-repeat top left;
        padding:40px 15px 15px 540px;
            z-index:0;
}

#rotator #fragment-2 {
      position:absolute;
      top:0;
      left:0;
      width:975px;
      background:transparent url(rotator/banner/remote_support.jpg) no-repeat top left;
        padding:40px 15px 15px 540px;
            z-index:0;
}

#rotator #fragment-3 {
      position:absolute;
      top:0;
      left:0;
      width:975px;
      background:transparent url(rotator/banner/home_users.jpg) no-repeat top left;
      padding:40px 15px 15px 540px;
      z-index:0;
}

#rotator #fragment-4 {
      position:absolute;
      top:0;
      left:0;
      width:975px;      
      background:transparent url(rotator/banner/asd.jpg) no-repeat top left;
      padding:40px 15px 15px 540px;
      z-index:0;
}

#rotator #fragment-5 {
      position:absolute;
      top:0;
      left:0;
      width:975px;      
      background:transparent url(rotator/banner/spam-protection.jpg) no-repeat top left;
      padding:40px 15px 15px 40px;
      z-index:0;
}

</style>

<script type="text/javascript">
      $(document).ready(function(){
            $("#rotator > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000, false);
      });
</script>
<div id="wrapper">
      <div id="rotator">
            <!-- Tabs -->
          <ul class="ui-tabs-nav">
              <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><span>Choose Us</span> <span class="red">&amp; Save</span><br /><span class="gray">Book Online</span></a></li>
              <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><span>Remote</span> <span class="red">Support</span><br /><span class="gray">Fix it Now</span></a></li>
              <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><span>Home User</span> <span class="red">Support</span><br /><span class="gray">Call Now</span></a></li>
              <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><span>Business</span> <span class="red">Solutions</span> <br />
              <span class="gray">Call Now</span></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"><span>Backup &amp; </span> <span class="red">Disaster</span> <br />
                              <span class="gray">Recovery</span></a></li>

          </ul>
          
          <!-- First Content -->
          <a href="http://mywebsite.com.au/BookOnline.asp"><div id="fragment-1" class="ui-tabs-panel" style="">
          </div></a>
          
          <!-- Second Content -->
          <a href="http://mywebsite.com.au/Remotesupport.asp"><div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
          </div></a>
          
          <!-- Third Content -->
          <a href="http://mywebsite.com.au/getquote.asp"><div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
          </div></a>
          
          <!-- Fourth Content -->
          <a href="http://www.mywebsite.com.au/services.asp?id=20"><div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
          </div></a>
       
         <!-- Fifth Content -->
          <a href="http://www.mywebsite.com.au/services.asp?id=6"><div id="fragment-5" class="ui-tabs-panel ui-tabs-hide" style="">
          </div></a>
      </div><!-- end rotator -->
</div>
<!-- end wrapper -->
SOLUTION
Avatar of tailoreddigital
tailoreddigital
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of flf4eva
flf4eva

ASKER

what i did I opened the original images in paint and i got the exact size
i will reward you guys for trying to help me

thank you