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"></s cript>
<script src="rotator/jquery-ui-per sonalized- 1.5.3.pack ed.js" type="text/javascript"></s cript>
<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/ima ges/tabs_b gr.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-c hild 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.jp g) 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_us ers.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-pr otection.j pg) 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>C hoose Us</span> <span class="red">& 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>R emote</spa n> <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>H ome 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>B usiness</s pan> <span class="red">Solutions</spa n> <br />
<span class="gray">Call Now</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"><span>B ackup & </span> <span class="red">Disaster</span > <br />
<span class="gray">Recovery</spa n></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 -->
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"></s
<script src="rotator/jquery-ui-per
<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/ima
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-
border-left:0;
}
li.ui-tabs-nav-item:last-c
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
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_
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_us
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
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-pr
padding:40px 15px 15px 40px;
z-index:0;
}
</style>
<script type="text/javascript">
$(document).ready(function
$("#rotator > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate",
});
</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>C
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><span>R
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><span>H
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><span>B
<span class="gray">Call Now</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"><span>B
<span class="gray">Recovery</spa
</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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
i will reward you guys for trying to help me
thank you