18041 sujets

Questions générales et questions de débutants

Question HTML/CSS et JavaScript

Bonjour tout le monde,

Je suis actuellement en trin de créer mon site et j'aimerai ajouter du javascript.


<div id="menu">
	<ul>
	<li id="acc"><a href="index.html" title="accueil"></a></li>
	<li id="creation"><a href="pages/creation.html" title="creation"></a></li>
	<li id="cv"><a href="pages/cv.html" title="cv"></a></li>
	<li id="contact"><a href="pages/contact.html" title="contact"></a></li>
	</ul>





div#menu ul li#acc a{
	display: block;
	width:240px;
	height:67px;
	background-image:url("../images/acc.png");
	background-repeat: no-repeat;
}

div#menu ul li#acc a:hover{
	
	width:240px;
	height:67px;
	background-image:url("../images/acc_hover.png");
	background-repeat: no-repeat;
	background-position:top;
}


Je voudrais que le :hover apparaisse progressivement. Il me semble que c'est avec un "fadein et fadeout" mais je ne sais pas comment je peux mettre sa en place.

Voila si quelqu'un pouvait m'aider ce serait sympa ? Smiley murf
Modérateur
Victor BRITO a écrit :
Salut,

En JavaScript, tu as les méthodes fadeIn () et fadeOut () de jQuery qui font ça très bien.


Ça lu,

Il y a également fadeTo qui peut être un bon compromis. Surtout lorsque Mooonsieur trident (IE) invente un rendu arbitraire....

Sinon, en JS natif c'est pas très difficile à mettre en place finalement :

<!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" lang="fr" xml:lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
		<title><!-- insertion titre de la page --></title>
		<style type="text/css">
			#exemple{
				background-color:black;
				text-align:center;
				width:50px;
				height:50px;
				display:table-cell;
				vertical-align:middle;
				padding:0 10px 3px 10px;
				margin:0;
				color:purple;
				text-decoration:none;
				font-variant:small-caps;
				font-family:verdana,arial,helvetica,sans-serif;
			}
		</style>
	</head>

	<body>
		<p><a href="#" id="exemple">bouton</a></p>
		<script type="text/javascript">
function changeOpacite(id,opacite){

    var objet = document.getElementById(id).style;

    

    objet.opacity = (opacite / 100);

    objet.MozOpacity = (opacite / 100);

    objet.khtmlOpacity = (opacite / 100);

    objet.filter = "alpha(opacity="+opacite+"/100)";

}



function AnimOpacite(id,debut,fin,tempsMillisecondes){ 

    var vitesse = Math.round(tempsMillisecondes / 100);

    var timer = 0;

    if(debut < fin ){

        for(i = debut ; i <= fin ; i++){

            setTimeout("changeOpacite('"+id+"',"+i+")",(timer * vitesse ));

            timer++;

        }

    }else if(debut > fin){

        for(i = debut ; i >= fin ; i--){

            setTimeout("changeOpacite('"+id+"',"+i+")",(timer * vitesse ))

            timer++;

        }

    }

}

function boutonOpaque(id,debut,fin,tempsMillisecondes){

    var ex = document.getElementById(id);

    changeOpacite(id,debut);

    ex.onmouseover = function(){

        AnimOpacite(id,debut,fin,tempsMillisecondes);

    }

    ex.onmouseout = function(){

        AnimOpacite(id,fin,debut,tempsMillisecondes);

    }

} 



window.onload = function(){

    boutonOpaque("exemple",50,100,700);

}
		</script>
	</body>
</html>

Modifié par niuxe (13 Apr 2011 - 05:26)
Bonjour,

Avant de te lancer dans le JS, il serait bon d'avoir une bonne base de code HTML.

Les images porteuses de contenu (et plus encore lorsqu'elles sont porteuse de lien) DOIVENT se trouver dans le code HTML, l'effet de survol sur ces images se fera donc en JS (ça tombe bien, c'est ce que tu souhaites faire).

Le title sur les liens est quasi toujours inutile, là avec des images HTML dont le alt sera correctement rempli (très certainement avec le contenu actuel des title), ces titles seront dans le cas le plus commun : inutiles et redondants.
Modérateur
Ah oui en effet, j'avais pas vu qu'il manque quelque chose dans le menu (ça m'apprendra à lire un code en biais Smiley langue ). Donc +1 pour mademoiselle.

En outre je ne suis pas tout à fait d'accord pour la transition. La compatibilité avec les navigateurs n'est pas optimale. Alors, il va falloir se rabattre sur le JS. Par contre on peut faire les deux, ce ui en soit est assez judicieux finalement. Smiley cligne
Modifié par niuxe (13 Apr 2011 - 09:21)
D'accord, je vous remercie de vos reponse, donc en gros il faut déjà que je regle ce problème :
@Laurie-Anne : Je dois mettre mon image de base dans mon lien HTML et ne pas préciser l'image du :hover dans le css si j'ai bien compris ?

Je vais faire sa et tester le code de niuxe et si j'ai d'autre problème je sait vers qui me tourner, merci Smiley smile !
FingR a écrit :
@Laurie-Anne : Je dois mettre mon image de base dans mon lien HTML et ne pas préciser l'image du :hover dans le css si j'ai bien compris ?
C'est bien ça.
Sujet clos
Aller à