[x]
Posted via EE Mobile

Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again.
09/15/2009 at 11:13AM PDT, ID: 24733874
[x]
Attachment Details
[x]
The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

  • The Grade of the Solution
  • The Zone Rank of the Expert Providing the Solution
  • The Number of Author and Expert Comments
  • The Number of Experts Contributing
  • The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!
8.1

Creating a disjointed rollover effect with a slow fade

Asked by JustDuckyDesigns in Web Services, JavaScript, Adobe Dreamweaver

I have created a disjointed rollover effect here: http://justduckydesigns.com/test2/women.html
 This is working exactly the way I want it to with one exception. When you rollover the text on the bottom left side of the screen, the center image becomes faded and some text appears. My client wants the image and text to appear more slowly and less "harshly".

Is there something I can add to the current code to make this effect? Everything else about the way this works needs to stay in place. P 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chic Inspiration For Women</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Tahoma;
	color: #3A3A3A;
	font-size: 14px;
}
body {
	background-color: #FFFFFF;
	margin-top: 16px;
	margin-bottom: 0px;
}
a:link {
	color: #CCCCCC;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #CCCCCC;
}
a:hover {
	text-decoration: none;
	color: #819DE7;
}
a:active {
	text-decoration: none;
	color: #819DE7;
}
#nav a {
	font-size: 12px;
	font-variant: normal;
	text-decoration: none;
	color: #9A9A9A;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bolder;
	font-style: normal;
}
#nav a:hover {
	color: #3a3a3a;
	text-decoration: none;
}
 
#tdspace {
	background-image: url(2009Images/divider2.png);
	background-repeat: no-repeat;
	background-position: center top;
}
.style27 {font-size: 10px; font-family: Arial, Helvetica, sans-serif; color: #333333; }
.style28 {color: #333333}
.style31 {
	font-family: "Arial Narrow";
	color: #999999;
	font-size: 28px;
	top: 10px;
	clip: rect(0px,auto,auto,auto);
	z-index: 0;
	margin: 0px;
	padding: 0px;
	vertical-align: text-top;
	letter-spacing: -1.2pt;
}
#homepagetext .style41 br {
	line-height: 50px;
}
#homepagetext .style30 {
	overflow: hidden;
}
.style34 {
	font-size: 11px;
	font-family: "Arial Rounded MT Bold";
	color: #333333;
}
.style38 {font-size: 12px; color: #666666; font-family: Arial, Helvetica, sans-serif; }
#tdwom a:hover {
	color: #3a3a3a;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 20px;
	text-decoration: none;
	font-size: 11px;
}
#tdwom a {
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 20px;
	color: #9a9a9a;
}
div#style_analysis  a  span  {
	display: none;
}
#tdwom #style_analysis a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
	display: block;
	padding: 5px;
	width: 450px;
	position: absolute;
	left: 450px;
	top: 450px;
}
#womroll ul {
	padding: 0px;
	list-style: none;
	line-height: 20px;
}
 
#rollover li a {
	text-decoration:none;
	list-style-type: none;
	list-style-image: none;
	color: 9a9a9a;
}
 
#rollover li a span {
	visibility:hidden;
	display:block;
	position:absolute;
	/**adjust disjointed text position in % or px**/ 
left:30%;
	top:225px;
	color:#666;
	border: 2px solid silver;
	padding: 5px;
	width: 500px;
	list-style-image: none;
	background-color: #cccccc;
}
 
#rollover li a:hover span, #rollover li a:active span, #rollover li a:focus span {
visibility:visible;
}
 
#rollover li a:hover, #rollover li a:focus{
	text-decoration: none;
	color:#333333;
	visibility:visible;
}
 
-->
</style>
 
 
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
 
<body onload="MM_preloadImages('newimages/Women/style1.jpg')">
<table width="850" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><table width="850" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td colspan="17"><img src="newimages/chic-logo.JPG" alt="Chic Inspiration" width="219" height="35" vspace="10" /><br /></td>
      </tr>
      <tr id="nav">
        <td><div align="left"><span class="style34"><a href="index4.html">HOME</a></span></div></td>
        <td><span class="style28"></span><img src="newimages/SPACER25.jpg" width="25" height="1" /></td>
        <td><span class="style27"><a href="aboutus.html">ABOUT</a></span></td>
        <td><span class="style28"><img src="newimages/SPACER25.jpg" width="25" height="1" /></span></td>
        <td><span class="style27"><a href="#">FOR WOMEN</a></span></td>
        <td><span class="style28"><img src="newimages/SPACER25.jpg" width="25" height="1" /></span></td>
        <td><span class="style27"><a href="#">FOR MEN</a></span></td>
        <td><span class="style28"><img src="newimages/SPACER25.jpg" width="25" height="1" /></span></td>
        <td><span class="style27"><a href="#">CORPORATE</a></span></td>
        <td><span class="style28"></span><img src="newimages/SPACER25.jpg" width="25" height="1" /></td>
        <td><span class="style27"><a href="#">NYC SHOPPING TOURS</a></span></td>
        <td><img src="newimages/spacer20.png" width="20" height="1" /></td>
        <td><span class="style27"><a href="#">CLIENTS</a></span></td>
        <td><span class="style28"></span><img src="newimages/SPACER25.jpg" width="25" height="1" /></td>
        <td><span class="style27"><a href="press.html">PRESS</a></span></td>
        <td><span class="style28"><img src="newimages/SPACER25.jpg" width="25" height="1" /></span></td>
        <td><div align="right"><span class="style27"><a href="#">CONTACT</a></span></div></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><div align="center"></div>
    <img src="newimages/mainphotos373/img_splash_1.jpg" name="one" width="850" height="373" id="one" /></td>
  </tr>
  <script type="text/javascript" src="jquery.overscroll.js"></script>
 
  <tr>
    <td valign="top"><table width="850" border="0" cellspacing="5" cellpadding="5">
      <tr>
        <td width="239" valign="top" id="womroll"><p><img src="newimages/spacer239.png" width="239" height="1" /></p>
          <p><br />
            <br />
            </p>
          <ul id="rollover">
<li>
  <div align="right"><a href="#" onmouseover="MM_swapImage('one','','newimages/Women/style1.jpg',1)" onmouseout="MM_swapImgRestore()">Style Analysis<span>
  <div align="left"><strong>Style Analysis</strong><br /><br />
    We will review and highlight your lifestyle to determine your true style identity.  How would you like to be viewd? What impression would you like to give other both socially and professionally? Well review your favorite designers and stores.  We'll also do a color analysis to determine which colors one should be wearing based on their skin complexion, hair color and eye color.</span></div>
  </a></div>
</li>
<li>
  <div align="right"><a href="#" onmouseover="MM_swapImage('one','','newimages/Women/style1.jpg',1)" onmouseout="MM_swapImgRestore()">Wardrobe Renovation<span><div align="left">We clean out your closet! We will do a full edit of your entire seasonal wardrobe and make a list of what additional pieces are needed to update and complete your current wardrobe. We will then organize your existing clothes so that everything is neat and easy to find.</span></div></a></div>
</li>
<li>
  <div align="right"><a href="#" onmouseover="MM_swapImage('one','','newimages/Women/style1.jpg',1)" onmouseout="MM_swapImgRestore()">Shopping<span><div align="left">With our shopping services you will learn how to dress for your specific body type and how to build a wardrobe with a solid foundation. We will work within your specified budget and pre-selection the pieces beforehand so that your shopping experience is a faster, smoother, more enjoyable process</span></div></a></div>
</li>
<li>
  <div align="right"><a href="#" onmouseover="MM_swapImage('one','','newimages/Women/style1.jpg',1)" onmouseout="MM_swapImgRestore()">Tie It All Together<span><div align="left">We go back into your closet and incorporate the new with the old pieces to create a stable of optimal looks for all the various aspects of your lifestyle. A beautiful, photographed look-book of you in your outfits is then compiled for quick and stress-free reference. </span></div></a></div>
</li>
</ul>
 
          </p></td>
        <td width="60" valign="bottom"><p><img src="newimages/horizontalline.png" width="60" height="350" align="top" /><br />
            <br />
          </p>          </td>
        <td width="435" valign="top"><div class="cushycms" id="homepagetext">
          <p class="style31"><br />
            <img src="newimages/header_home.gif" alt="Chic Inspiration" width="401" height="31" /><br />
          </p>
          <p class="style38"><br />
              <img src="newimages/capitalH.jpg" width="26" height="42" hspace="2" vspace="0" align="left" />ave you looked in your closet and thought, &quot;I have all these clothes, and nothing to wear?&quot; Have you found yourself putting smething on only to take it off again a few minutes later? Do you keep going back to the same outfits?</p>
          <p class="style38">Many clothing purchases turn out to be big mistankes and most articles are worn only once or twice. Undertanding what styles work for you helps you avoid making costly mistakes in the future. Chic Inspiration will collaborate with you to coordinate your true image. We will help you discover what colors, shapes and styles work best for you always feel comfortable and look put together.</p>
          <p class="style38">&nbsp;</p>
          </div></td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>
 
Keywords: Creating a disjointed rollover effect wit…
Title
1 Need to descrease download time
 
Loading Advertisement...
 
[+][-]09/15/09 12:31 PM, ID: 25338404

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]09/24/09 01:16 PM, ID: 25417402

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]09/25/09 03:44 AM, ID: 25421603

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]09/25/09 07:06 AM, ID: 25423080

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]09/28/09 01:31 AM, ID: 25437535

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]09/30/09 04:08 PM, ID: 25464540

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]10/01/09 12:06 AM, ID: 25466479

View this solution now by starting your 30-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zones: Web Services, JavaScript, Adobe Dreamweaver
Sign Up Now!
Solution Provided By: Rouchie
Participating Experts: 1
Solution Grade: A
 
 
[+][-]10/01/09 12:06 AM, ID: 25466480

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
 
Loading Advertisement...
20091111-EE-VQP-91 - Hierarchy / EE_QW_3_20080625