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 -->
flf4evaAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Plk_In_EEConnect With a Mentor Commented:
Hello,
using Jquery .width method you can find out the and width and height of the image as below,

$(document).ready(function() {
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});

Hope this helps.

Cheers,
Karuppan
0
 
tailoreddigitalConnect With a Mentor Commented:
You need to stay in px (pixels).

The easiest way to approach this is to check the current pictures sizes (in pixels),  then create the new pictures at the same size.     Once the pictures are edited and ready, upload them to your server to replace the current pictures.   You need to use the same file names or update the references to the images in the code.   Remember the file names are case sensitive.

BE SURE to backup your original pictures in case something goes wrong.
0
 
flf4evaAuthor Commented:
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
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.