Hi everybody!
By advance, please excuse:
1. my english (I'm french, and I don't find any good answers about Gsap on french forums...)
2. my less of knowledge about coding... I know what is Code for.. 2 weeks..
3. my (a bit) blonde brain..
But I got faith and I'm ready to learn!!!
So, here's the situation:
My final goal is to make a full personalized menu for my blog, that contains very seamless animations.
The first animation (which I'm testing now) is color changing of the buttons' letters.
The second one will be the "deployment" of an image that "get out" behind each button and then come in.
Both animations will start "on mouse over" and when the button is clicked and the relative page is activated.
My first question is about the first, simple animation: color of the buttons.
What I'v already done:
- created a drawn menu on Gimp
- created the same image but with each button in right color for activated state
- I've search for a few weeks on tutorials and forums, and found a code that works
"A code that works"... BUT:
it seems to work only on certain machines (don't understand why it works on my mac on Google Chrome but not on my office's PC on Google Chrome too!)
and most of all, it is no seamless at all! (got to wait a few seconds with mouse over before the -images charge and- color changes.
I read some interesting stuffs about the "wonderful Gsap library". But it's very difficult for me to understand how to make the right gsap code that is very complicated for me compares to my actual code (I don't even know if it's "simple javascript" code or something else - you will see that).
Could you please give me a simple explanation of what I need to do in my case, or even indicate the right code to me..?
Here's my code:
<div>
<img name="Menu" src="https://photos-4.dropbox.com/s/mpmuozbm5zaaj6j/base%20onglets%20translucides%20koba%C3%AF%20crash%20test%20gelly%20texte.png" width="960" height="95" border="0" usemap="#menu jelly kobai" />
<map name="menu jelly kobai">
<area title="Accueil" shape="rect" coords="4,27,117,93"
href="http://kobai-uneblondeetblogger.blogspot.fr/" onmouseover="document.Menu.src='https://photos-4.dropbox.com/s/dsltunaowxbg0e3/menu%20bouton%20accueil%20survol.png'" onmouseout="document.Menu.src='https://photos-4.dropbox.com/s/mpmuozbm5zaaj6j/base%20onglets%20translucides%20koba%c3%af%20crash%20test%20gelly%20texte.png'"
onclick="document.Menu.src='https://photos-4.dropbox.com/s/dsltunaowxbg0e3/menu%20bouton%20accueil%20survol.png'" alt="Accueil'" />
<area title="Une Blonde et Blogger" shape="rect" coords="128,27,245,94" href="http://uneblondeet-blogger.blogspot.fr/" onmouseover="document.Menu.src='https://photos-4.dropbox.com/s/f9khuaph4qqhnk3/menu%20bouton%20blonde%20survol.png'" onmouseout="document.Menu.src="https://photos-4.dropbox.com/s/mpmuozbm5zaaj6j/base%20onglets%20translucides%20koba%c3%af%20crash%20test%20gelly%20texte.png'"
Onclick="document.Menu.src='https://photos-4.dropbox.com/s/f9khuaph4qqhnk3/menu%20bouton%20blonde%20survol.png'" alt="Une Blonde et Blogger" />
<area title="Onglet test" shape="rect" coords="255,27,369,94" href="http://kobai-uneblondeetblogger.blogspot.fr/p/un-onglet-test.html" onmouseover="document.Menu.src='https://photos-4.dropbox.com/s/7h3uglfwgxjk0uu/menu%20bouton%20onglet%203%20survol.png'" onmouseout="document.Menu.src="https://photos-4.dropbox.com/s/mpmuozbm5zaaj6j/base%20onglets%20translucides%20koba%c3%af%20crash%20test%20gelly%20texte.png'"
Onclick="document.Menu.src='https://photos-4.dropbox.com/s/7h3uglfwgxjk0uu/menu%20bouton%20onglet%203%20survol.png'" alt="Onglet test" />
</map>
</div>
Sorry for the entire code, I've searched in it but didn't find this widget's code - ??
(it's a HTML/Javascript widget in a Blogger blog.
url of my "testing" blog:
http://kobai-uneblondeetblogger.blogspot.fr
Thanks a lot by advance for your help!
Trinita Girl