I have created a disjointed rollover effect here: http://justduckydesigns.co
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
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
If you look here:
http://justduckydesigns.co
You can see the way it is currently working. My client wants the text (that appears over the center photo) to stay in place on rollout and only change when the user rolls over a different question.
I really need an answer to this ASAP. I am desperate. Thank you!!
I need a few different fixes for this - and I really am desperate!
The text on the bottom left (the text that you roll over to create the effect on the image) is also fading in and out - I don't want this to happen - how do I fix that??
The image and text (the center image) should slowly fade in on rollover - I think this is working pretty well.
The image and text should stay that way on rollout - but should change to the different image and text when a different trigger is rolled over - how do I accomplish this?
My client is screaming at me to get this finished. I will be eternally grateful to anyone who can make this work the way I need it to.
When finished it should work exactly like this: http://chicinspiration.com
Thank you - Thank you - Thank you!
Well the second site you are trying to imitate uses Flash, so they've got the animation advantage straight away.
>> The text on the bottom left (the text that you roll over to create the effect on the image) is also fading in and out - I don't want this to happen - how do I fix that??
Try changing this:
<ul id="rollover" onclick="MM_effectAppearFa
to this:
<ul id="rollover" onclick="MM_effectAppearFa
>> The image and text should stay that way on rollout - but should change to the different image and text when a different trigger is rolled over - how do I accomplish this?
By removing...
onmouseout="MM_swapImgRest
from each hyperlink in the list of links.
Try the above then upload.
The solution for >>The text on the bottom left (the text that you roll over to create the effect on the image) is also fading in and out - I don't want this to happen - how do I fix that??>> worked. THANK YOU!
The solution for the image and text staying over the image on roll out didn't work.
It also seems that the fade effect is not working. Could you take another look? http://justduckydesigns.co
Do you need me to post the code or can you just do a view source?
You are truly saving my life here! I can't tell you how much I appreciate it.
Okay the problem you've got is that certain things you are fading are inside other elements, so when you apply the script to make one animate, the others are getting affected.
What you need to do is rebuild the page and seperate everything out. So you get something like this....
Note that each part of the code now has ID values to uniquely identify them. This allows us to apply animation effects without affecting the others:
<div class="mainimage">
<p><img src="newimages/mainphotos3
<div id="style">Style Analysis<p>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.</div>
<div id="clean">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.</div>
<div id="shopping">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</div>
<div id="closet">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. </div>
</div>
<ul>
<li>
<a href="#" onmouseover="MM_swapImage(
</li>
<li>
<a href="#" onmouseover="MM_swapImage(
</li>
<li>
<a href="#" onmouseover="MM_swapImage(
</li>
<li>
<a href="#" onmouseover="MM_swapImage(
</li>
</ul>
Note that when you run this page it will NOT LOOK GOOD! This is because what we need to do first is to get the fades wired up, after that we can add the styles to line everything up again. Styles is the easy bit.
So open that code up in DW and then try out the links. You can then add the behaviours to your links to ensure that everything appears correctly. Then post another link and we'll get to the next step.
I have had to abandon this direction for my problem. The client changed her mind and we went with a completely different option.
This solution was working perfectly (as far as we got). I really appreciate the time this person took to go the extra mile to help me.
I apologize for not getting back to answer this sooner.
Business Accounts
Answer for Membership
by: JustDuckyDesignsPosted on 2009-09-15 at 12:31:41ID: 25338404
I have tried adding a behavior: <ul id="rollover" onmouseover="MM_effectAppe
This works perfectly when I preview it. But I uploaded it and tried it in both FireFox and IE8 and it does not work. Why would it work in preview, but not in real time?