bruneaumathieu Posté 1 Février 2008 Posté 1 Février 2008 (modifié) Bonsoir, Après 4 heures de recherche, je demande votre aide. Je voudrais, que quand l'utilisateur à sa souris sur un lien une image apparaise. L'image ne doit pas devenir le lien et quand l'utilisateur enlève la souris du lien cette image doit disparaître ou devenir une autre image. Le code doit pouvoir intégré du php, des variables. Je bloque dessus depuis pas mal de temps. Si vous trouvez ..... Mathieu Modifié 1 Février 2008 par bruneaumathieu
Dudu Posté 2 Février 2008 Posté 2 Février 2008 Bonjour Si j'ai bien compris ce que tu souhaites faire, il faut que tu utilises la pseudo-classe CSS :hover (c'est elle qui gère le survol des éléments par le curseur) et qu'ensuite tu places une image en fond grace à la propriété background. Attention à déterminer des marges extérieures (grâce à la propriété margin) si tu souhaites que ton image apparaisse à côté du lien. Mais si tu peux préciser ta demande, ce sera mieux: ainsi on pourra peut-être te donner un code détaillé
bruneaumathieu Posté 2 Février 2008 Auteur Posté 2 Février 2008 bonjour, <a name="<?php print $unVoiture['nom'] ?>" href="index.php?id=<?php print $unVoiture['id'] ?>" [b]style="a:hover {background-image:url(images/illustrations/<?php print $unVoiture['illustration'] ?>);}" [/b]target="_parent">AAAAAAAAAAAAAAA</a> Je voudrais juste que quelqu'un me valide le style ici, car je sais pas vraiment faire de style pour un lien, j'ai l'habitude de faire dans une feuille css ou dans le header mais là encore dure l'intégration php. Normalement pour un style sur un lien directement dans le body et pas dans le header : <a href="eeeeeeeeeeeeeeeeee" style="text-align:center;"> mmmmmm</a> Mais comment intégrer le a:hover?
camillejg Posté 2 Février 2008 Posté 2 Février 2008 (modifié) salut, tu devrais plutôt mettre ton style entre tes balises <head> et </head> : <style type="text/css">a:hover{ background-image:url('images/illustrations/ton-image.jpg');}</style> dans ce cas là, tous les hovers des liens auront cette image. Après, pour ce que tu cherches à faire (un affichage dynamique de tes images), je pense qu'un onMouseOver et onMouseOut en javascript seront beaucoup plus appropriés ! <a href="tonlien" onMouseOver="java script:this.style.backgroundImage='url(images/illustrations/<?php print $unVoiture['illustration'] ?>)'" onMouseout="java script:this.style.backgroundImage=''"> Camille Modifié 2 Février 2008 par camillejg
bruneaumathieu Posté 2 Février 2008 Auteur Posté 2 Février 2008 Merci Comment je peux définir la position de l'image dans ce cas là? Exemple: padding de 10px avec un float left. C'est possible?
Dudu Posté 2 Février 2008 Posté 2 Février 2008 Bonjour À mon avis, le Javascript est à éviter. D'une part tu auras une compatibilité parfaite quoiqu'il arrive avec CSS. De plus, ce sera vraiment moins lourd en code et en ressources navigateur. Et enfin, tant que l'utilisation du JS ne s'impose pas, il vaut mieux s'en abstenir: cela évite d'éventuels conflits ultérieurs. Et tant qu'à faire, autant laisser le style à un langage qui justement s'occupe du ... style. Concernant l'intégration.. Les pseudo-classes ne s'écrivent pas au sein d'une balise. Il faut les écrire dans une feuille externe, ou dans la balise <head>. Pour des phases de test, je te conseille d'écrire des styles dans la balise <head>. En revanche, lorsque tu passeras ton site en production, il est fortement conseillé de tout externaliser. Voyons ton code, étape par étape: l'attribut name peut avantageusement être remplacé par l'attribut id. Pour PHP, ce sera lu pareil. Et pour CSS, cela te permet te cibler ton lien. Tu peux donc écrire ton lien de la manière suivante: <a id="<?php print $unVoiture['nom'] ?>" href="index.php?id=<?php print $unVoiture['id'] ?>">AAAAAAAAAAAAAAA</a> nota bene: si l'attribut target n'est pas indispensable, tu peux t'en passer; surtout avec la valeur "_parent" qui est la valeur par défaut. Mais ça dépend de la configuration de ta page... Bref, revenons à nos moutons. En admettant que $unVoiture['nom'] retourne "bruneau", ta déclaration CSS ressemblerait alors à çà: a#bruneau:hover {background-image:url(images/illustrations/bruneaumathieu.png);}" Mais visiblement, tu cherches aussi à passer des variables pour le chemin d'accès des images. Il suffit alors de faire parser ta feuille de style par l'interpréteur PHP. C'est simple, il suffit de changer l'extension .css en .php et ensuite de déclarer le type MIME grâce à la fonction header() de PHP, de la manière suivante: <?php header('Content-type: text/css'); ?> (à écrire tout en haut de la feuille de style, sans la moindre ligne ou même le moindre espace avant) Tu peux alors écrire ton code CSS comprenant des variables PHP a#<?php print $unVoiture['nom'] ?>:hover {background-image:url(images/illustrations/<?php print $unVoiture['illustration'] ?>);}" Passons maintenant à la position de l'image. Oublie très vite float, cette propriété sert à positionner des éléments HTML. Elle ne sert à rien lorsqu'il faut positionner des images de fond. Déclare un padding sur ton lien. Celui-ci devra comprendre la largeur de l'image elle-même PLUS la marge entre l'image et le lien. Donc pour une image positionnée à gauche du lien qui fait 10px de large, tu pourras régler ton padding sur 15px par exemple. Avec ce genre de code: a#<?php print $unVoiture['nom'] ?>:hover {padding-left: 15px;background-image:url(images/illustrations/<?php print $unVoiture['illustration'] ?>);}" Reste ensuite à expliquer au moteur CSS que ton image doit (par exemple) être à gauche, et ne doit pas être répétée en mozaïque sur toute la largeur du lien. Il faut alors utiliser les propriétés CSS background-repeat et background-position. La première a la valeur "repeat" par défaut, il faudra donc la mettre à no-repeat. La seconde gère 2, 3, ou 4 valeurs. En écrivant "top left", l'image se positionnera en haut à gauche. En écrivant "5% 50%" l'image sera à 5% du bord haut et à 50% du bord gauche. En écrivant "15px 80px", elle sera à 15px du bord haut et à 80px du bord gauche. En écrivant 4 valeurs, tu gères le haut, la droite, le bas, et la gauche (dans le sens des aiguilles d'une montre). Le code a#<?php print $unVoiture['nom'] ?>:hover {padding-left: 15px;background-image:url(images/illustrations/<?php print $unVoiture['illustration'] ?>);background-position: top left;background-repeat: no-repeat;}" Ou avec la version raccourcie en utilisant simplement background: a#<?php print $unVoiture['nom'] ?>:hover {padding-left: 15px;background: url(images/illustrations/<?php print $unVoiture['illustration'] ?>) top left no-repeat;}" Et voilà. Bon courage
bruneaumathieu Posté 5 Février 2008 Auteur Posté 5 Février 2008 Bonsoir, Merci beaucoup pour tt ces informations. J'ai du boulo Merci encore, super forum
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant