Hello 
Bon, le 15 août à Grenoble étant mortissime (les courbatures de rando m'empêchant... ben de repartir en rando), je me suis attelée à la refonte de mon portfolio.
Mais, hem, comment dire...
Je n'arrive pas à dépasser le stade...
du menu ! u_u°
Je veux faire un truc sans Flash, en HTML/CSS/machinchose.
(Les éléments de navigation en Flash, c'est le mal !!!)
Le HTML et le CSS, je me dépatouille, mais les languages Machinchose, je n'y connais QUE DALLE !
D'où le blocage au moment de concevoir ceci :
Départ :
img805.imageshack.us
Au survol de la souris, enchainé avec un fondu de 1000ms (par exemple) :
img69.imageshack.us
Lorsque la souris quitte l'image, avec fondu enchaîné :
img805.imageshack.us
Tout ce que j'arrive à faire pour le moment est un comportement Spry Appear/Fade, ce qui n'est pas ce que je veux...
Attention, car en plus, le site est liquide...
En désespoir de cause, je suis en train de plancher sur une version Flash des boutons, avec une redirection automatique vers une page sans Flash (donc sans mon bel effet) pour les utilisateurs qui ne l'ont pas.
Mais si quelqu'un a une idée, ou un lien de tuto, ou des termes précis à rechercher dans Google...
Merci, et bon apéro à tous 
(c'est l'heure du deuxième ! ou du troisième ? oups...)
PS : le code, si ça peut aider ^^
disait:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A Kind of Pow - Accueil</title>
<style type="text/css">
body {
background-color: #000;
text-align: center;
padding-top: 23px;
padding-right: 10px;
padding-bottom: 23px;
padding-left: 10px;
margin: 0px;
min-width: 1280px;
}
#wrapper {
background-color: #131313;
margin: 0 auto;
padding: 0px;
max-width: 1560px;
min-width: 984px;
}
#banner1 {
width: 20%;
height: auto;
margin: 0px;
padding: 0px;
}
#banner2 {
width: 20%;
height: auto;
margin: 0px;
padding: 0px;
}
#banner3 {
width: 20%;
height: auto;
margin: 0px;
padding: 0px;
}
#banner4 {
width: 20%;
height: auto;
margin: 0px;
padding: 0px;
}
#banner5 {
width: 20%;
height: auto;
margin: 0px;
padding: 0px;
}
#header {
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 33px;
margin-left: 0px;
}
#content {
margin: 0px;
padding: 0px;
}
#footer {
padding: 0px;
margin-top: 33px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
clear: both;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
color: #666;
text-align: center;
vertical-align: middle;
letter-spacing: 0.1em;
}
#newspng {
text-align: center;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
position: relative;
}
</style>
<script src="../SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
</script>
<body class="wrapper" tracingsrc="../images/accueil.jpg" tracingopacity="100" tracingx="110" tracingy="0">
<div id="wrapper"><img src="../images/news.jpg" name="banner1" width="100%" height="100%" id="banner1" onmouseover="MM_effectAppearFade('banner1', 1000, 100, 40, false)" onmouseout="MM_effectAppearFade('banner1', 800, 40, 100, false)" /><img src="../images/graph.jpg" name="banner2" width="100%" height="100%" id="banner2" onmouseover="MM_effectAppearFade('banner2', 1000, 100, 40, false)" onmouseout="MM_effectAppearFade('banner2', 800, 40, 100, false)" /><img src="../images/photo.jpg" name="banner3" width="100%" height="100%" id="banner3" onmouseover="MM_effectAppearFade('banner3', 1000, 100, 40, false)" onmouseout="MM_effectAppearFade('banner3', 800, 40, 100, false)" /><img src="../images/videos.jpg" name="banner4" width="100%" height="100%" id="banner4" onmouseover="MM_effectAppearFade('banner4', 1000, 100, 40, false)" onmouseout="MM_effectAppearFade('banner4', 800, 40, 100, false)" /><img src="../images/akpwear.jpg" name="banner5" width="100%" height="100%" id="banner5" onmouseover="MM_effectAppearFade('banner5', 1000, 100, 40, false)" onmouseout="MM_effectAppearFade('banner5', 800, 40, 100, false)" /></div>
<div id="content"></div>
<div id="footer">Aurélie Planque © 2011, Tous droits réservés.<a href="mailto:aurelie_planque@hotmail.com"> Contact</a></div>
</div>
</body>
</html>
inscrit le 21/03/11
197 messages