18041 sujets

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

[Résolu] Image qui se met à trembler quand on passe sur le bouton / ht

Bonjour à tous,

je suis nouveau sur ce forum et en tant qu'utilisateur de Dreamweaver.

Voici mon problème :

J'ai créé un bouton qui se nomme : Actualité

Quand on passe dessus une image apparait mais comme elle est trop grande à mon goût j'ai décidé d'y appliquer un ascenseur...
Jusque là tout va bien mais au moment où je tente de positionner cette ascenseur au bon endroit grâce au top:...px dans le css, l'image se met à trembler tant que je reste sur le bouton. Smiley confus

J'ai vraiment tout tenter et me demande si vous pourriez repondre à ce problème.

Voici le lien du site: http://gperc.com/


Voici le code html:


<div id="actualite"><img src="Page_gperc/logos/actualite_gperc.png" width="78" height="44" /><a href="#"class="tableau">
    <span></span></em></h1></a></div>




Css pour le bouton Actualité :



#global #actualite {
	position: absolute;
	left: 537px;
	top: 159px;
        }





Css pour l'image et l'ascenseur :



a.tableau{
	position:absolute;
	width:100px;
	height:53px;
	left:-5px;
}

a.tableau:hover span {	
	display:block;
	position:absolute;
	width:857px;
	height:857px;
	padding:20px;
	background-image:url(Page_gperc/logos/tableau1.jpg);
	background-repeat:no-repeat;
	
	
	z-index:10;*/
}

a.tableau span{display:none;

	
}
a.tableau:hover {	
	top:50px;
	overflow:auto;
	left:-370px;
	width:857px;
	height:560px;
}



Merci D'avance ! Smiley biggrin
Modifié par 6l20 (16 Jun 2012 - 13:01)
salut, voici une solution un peu différente de la tienne, mais au moins tu n'auras plus ce désagréable sintillement !
<!doctype html>
<html>
<head>
<title></title>
<script type="text/javascript">
function affiche(addr)	{	document.getElementById(addr).style.display = "block";	}
function masque(addr)	{	document.getElementById(addr).style.display = "none";	}
</script>

<style type="text/css">
#actualite {
	position			: absolute;
	top					: 159px;
	left				: 537px;

	width				: 71px;
	height				: 44px;

	cursor				: pointer;
	background-color	: red;
}

div#mess {
	display				: none;

	position			: absolute;
	top					: 44px;
	left				: -100px;
	width				: 200px;
	height				: 200px;

	overflow			: auto;
	background-color	: green;
}

</style>
</head>

<body>
	<div id="actualite" onmouseover="affiche('mess');" onmouseout="masque('mess');">
		<img src="actualite_gperc.png" alt="image" />
		<div id="mess">
			<p>bla bla bla bla bla bla bla</p>
			<p>bla bla bla bla bla bla bla</p>
			<p>bla bla bla bla bla bla bla</p>
			<p>bla bla bla bla bla bla bla</p>
			<p>bla bla bla bla bla bla bla</p>
			<p>bla bla bla bla bla bla bla</p>
			<p>bla bla bla bla bla bla bla</p>
			<p>bla bla bla bla bla bla bla</p>
			<p>bla bla bla bla bla bla bla</p>
			<p>bla bla bla bla bla bla bla</p>
			<p>bla bla bla bla bla bla bla</p>
			<p>bla bla bla bla bla bla bla</p>
			<p>bla bla bla bla bla bla bla</p>
			<p>bla bla bla bla bla bla bla</p>
			<p>bla bla bla bla bla bla bla</p>
			<p>bla bla bla bla bla bla bla</p>
			<p>bla bla bla bla bla bla bla</p>
			<p>bla bla bla bla bla bla bla</p>
		</div>
	</div>
</body>
</html>
Salut Tournikoti,

Merci pour ta solution qui fonctionne à merveille mais est-il possible de remplacer les bla bla par une image qui contient le texte et du graphisme ?
en l'occurrence le tableau que tu peux voir sur http://gperc.com/
Cette image va s'agrandir dans le temps mais avec tous les outils que tu as mis à ma disposition il me sera facile de régler tout ça !

Encore merci ! Smiley biggrin
fredero a écrit :

...mais est-il possible de remplacer les bla bla par une image qui contient le texte et du graphisme ?
Cette image va s'agrandir dans le temps mais avec tous les outils que tu as mis à ma disposition il me sera facile de régler tout ça !
...

Et pourquoi faire ? Smiley rolleyes
Si les images ne sont pas chargées pour diverses raisons, qu'advient-il de "votre contenu" ?
"Alsacréations, communauté d'apprentissage pour les standards du web", il va falloir vous y mettre Smiley cligne

C'est déroutant, vous avez un "produit innovant", et vous le présentez comme on aurait pu le faire dans les années 90 à grand coup de tableaux de mise en forme, de gif plus ou moins douteux, d'animations flash pour le moins inutiles... Smiley sweatdrop

Un tour d'horizon de la section Apprendre (tutoriel, articles, astuces...) pourrait très certainement vous apporter une aide précieuse.
Si le cœur vous en dit, soumettez votre site à la critique, il y a fort à parier que vous en retirerez un bénéfice certain Smiley cligne

En l'état, vous ne rendez pas service à votre produit, à vos éventuels visiteurs, ni à votre client (ou à vous même)...
Et nous n'abordons pas les questions d'accessibilité, de compatibilité, de maintenance du code, de sémantique, de formats ouverts, de référencement...
Un grand merci à tournikoti........j'ai juste cherché un peu et puis magie ta proposition est vraiment efficace et je vais faire pareil pour le bouton "presse".

Merci aussi à 6l20 pour toutes vos suggetions que je sais être justes, mais comme faute de moyen je fais tout par moi même (pour le moment) il y a forcement des erreurs techniques et des fautes de gout .
Je sais que ces chapitres mériteraient plus de temps mais je ne l'ai pas Smiley ohwell

Et puis ça a beau être passionnant ça reste un métier ! Smiley smile

Ceci dit je vais aller faire un tour du coté (tutoriel, articles, astuces...) et voir si je peux m'inspirer de ce que ce chapitre propose !

Ps : il n'y a aucun gif animé j'ai tout programmé dans Flash même les petits diodes qui du coup me paraissent ringards et dépassés Smiley confused Smiley smile
@fredero: la critique est facile, l'art...un peu moins Smiley cligne

Oui, c'est un vrai métier, oui, c'est passionnant, oui il est tentant de tout faire par soi même, faute de moyens, par "goût de l'aventure", ambition personnelle, etc...
Mais, il n'en demeure pas moins qu'avec peu de chose, on peut déjà faire beaucoup, et ce forum, cette communauté peut vous y aider (sans jugement de valeur, sans sectarisme, a priori...)

Mettre votre texte; en image, au survole d'un "menu" lui même composé d'images aux alternatives textuelles peu pertinentes, voir inexistantes, c'est clairement une très mauvaise idée : désactivez vos images, vos styles et tentez de vous y retrouver sur votre page...

Si vous avez le temps, soumettez votre site à la critique dans la section idoine, à part quelques furieux qui y trainent parfois, vous y trouverez d'excellents conseils Smiley cligne

Pour la remarque sur les gif, j'ai trop souvent des tournures de phrases alambiquées, je faisais un descriptif du web des années 90, pas spécifiquement une critique de votre site (même s'il donne l'impression que...) Smiley cligne
Sujet clos
Aller à