Problème de superposition d'images pour création d'un bouton

Bonsoir à tous,

alors voilà, je vous explique mon problème... Je voudrais créer un bouton qui amène vers la page d'abonnement à mon blog. J'ai donc construit mon bouton avec dessus le widget Feedburner avec le nb d'abonnés.



Jusqu'ici tout va bien. Là où ça se corse, c'est que j'aimerais avoir une autre image pour faire un :hover, une image plus claire. Et quand je fais ça, le widget Feedburner pars sous le bouton à droite. Logique mais je ne sais pas comment régler le problème, si on peut le régler...

Je veux que le widget ne bouge pas lorsque je passe au dessus du bouton et que celui s'éclaircit au passage de la souris...

Si vous avez besoin de plus d'infos pour m'aider, je me tiens à votre disposition...

Merci d'avance en tout cas !

Salut,

Comment t'y prends-tu pour l'instant exactement pour ton hover ? As-tu une url en ligne où on pourrait tester ton problème ?

En fait, je suis pas un pro en CSS, donc c'est peut-être de la bidouille

Ce que j'ai fait, c'est que j'ai mis le bouton sous une div class "abonnement". Je lui ai collé l'image en background (.abonnement). En dessous, j'ai créé un a.abonnement, avec la même photo pour avoir le lien mais uniquement sur une width de 300px, cad jusqu'au bord gauche du widget. Encore en dessous, j'ai créé un a.abonnement:hover avec la même image mais soulignée et toujours avec une width de 300px. L'image derrière le widget est le background, et en passant dessus c'est seulement le soulignage qui apparaît. C'est la seule solution que j'ai trouvé jusqu'à maintenant. Ce que je voudrais c'est pouvoir changer la couleur en hover et qu'elle change aussi derrière le widget, mais comme j'ai pas réussi, c'est ce que j'ai fait...

Je vais essayer de m'être ça en ligne parce que pour le moment je travaille en local, je fais ça demain !!

Désolé si mes méthodes paraissent un peu tordues mais c'est tout ce que j'ai trouvé pour avoir un truc qui fonctionne...Mais ça ne me plaît pas comme ça...

Encore merci !

Francis
Modifié par Fran6art (16 Jun 2007 - 20:34)

Voilà, j'ai réussi à mettre quelque chose en ligne. La seule chose que j'ai pu faire c'est de souligné le texte au passage de la souris...bof... J'espère que ça inspirera quelqu'un !!!

En tout cas, merci d'avance !!

lien vers le bouton: http://www.fran6art.com/abo.html

Hello,

Pour commencer : une page de test non valide et qui sera donc interprétée en mode Quirks plutôt qu'en mode standard par les navigateurs, c'est une très mauvaise idée. Bonne habitude à prendre : faire une page standard même s'il ne s'agit que d'un test. Si besoin, se créer un gabarit de page quelque part, à réutiliser à l'envi.

Pour le reste, pour ma part je ferais ceci :

<div class="abonnement">
<p>
	<a class="abo" href="http://www.fran6art.com/abonnez-vous/">Recevez les prochains articles du blog&nbsp;!</a>
	<a href="http://feeds.feedburner.com/Fran6artLeBlog"><img src="http://feeds.feedburner.com/~fc/Fran6artLeBlog?bg=006699&amp;fg=ccff00&amp;anim=1" height="26" width="88" style="border:0" alt="Les articles de ce blog via Feedburner" /></a>
</p>
</div>

Pour l'effet de rollover sur l'image, on le fera en Javascript. Si si, en plus c'est pas compliqué à faire. Et ça sera toujours plus accessible que toutes les techniques de remplacement d'images...

Pour rappel, dans le code que tu proposes tu as :
- un texte « abonnez-vous ! » que tu remplaces par une image qui dit « Recevez les prochains articles du blog ! »... déjà, ça fait une incohérence ;
- la technique de remplacement du texte par l'image utilisée pose problème, par exemple si je désactive les images (ou si l'image ne se charge pas, ce qui arrive, surtout si on est en bas débit...) mais pas les styles CSS ;
- le lien vers Feedburner a pour seul intitulé une image avec texte alternatif vide... bref, pas d'intitulé.

La version que je propose corrige ces problèmes. Si besoin, on pourra remplacer le texte « Recevez les prochains articles du blog ! » par une image :

<img src="..." alt="Recevez les prochains articles du blog !" />

Même chose, dans ce cas on fera l'effet de rollover de préférence en Javascript.


À retenir :
- rollover sur des liens texte : CSS ;
- rollover sur des images de contenu : Javascript.

OK, merci pour les conseils Florent. J'ai corrigé l'erreur pour la validation de la page test. Pour ce qui est du problème en tant que tel, je vais regarder ce que tu proposes et notamment le fait de faire les boutons en javascript...

Pour ce qui est de la technique utilisée concernant les rollovers d'images en CSS, c'est celle utilisée dans les bouquins...snif...mais c'est vrai que c'est pas top...

Sinon, juste pour lever un petit doute, le fait de passer en Javascript va me permettre de garder le lien Feedburner à droite par dessus le bouton ?

Bon ben va falloir que je m'attaque au Javascript maintenant...

Merci bien en tout cas, ce ne sont que mes premiers pas dans la réalisation de choses un peu plus poussées (pour moi...) et c'est pas toujours simple de poser des questions que pourront trouver connes les avertis !!

Fran6art a écrit :
Sinon, juste pour lever un petit doute, le fait de passer en Javascript va me permettre de garder le lien Feedburner à droite par dessus le bouton ?

Pour commencer, tu n'as pas de bouton dans ton code mais des liens hypertexte. Un bouton, ça peut être un élément input ou button, et ça s'utilise normalement dans un formulaire. Ici, il s'agit juste de liens pointant vers une page.

Pour rappel, un lien hypertexte en HTML ça fonctionne ainsi :

<a href="destination-du-lien">Intitulé du lien</a>

Ensuite, si tu as envie que l'intitulé du lien soit une image, tu peux faire comme ceci :

<a href="destination-du-lien"><img src="chemin-de-l-image" alt="Intitulé du lien /></a>

Et voilà, tu as un « bouton » sous la forme d'une image. Pour positionner ce bouton, ben ça se positionne comme n'importe quel élément, en utilisant le positionnement CSS, en passant le lien en display: block ou en float: left|right si nécessaire, etc. Ici, il semblerait que tu n'aies pas besoin d'utiliser des propriétés de positionnement avancées, et qu'il suffise de laisser les liens en affichage de type en-ligne (affichage l'un après l'autre, sur une même ligne de texte). On aura peut-être juste besoin d'un peu de vertical-align sur les images... à voir.

Dernière étape : l'effet cosmétique au survol de la souris. Vu que c'est de la cosmétique, il n'y a aucune raison de ne pas faire ça en Javascript. Là, c'est assez simple, il suffit de changer la source de l'image lors du survol par la souris. Par contre, vu le peu que je connais de Javascript, je ne donne pas d'exemple de code. Mais ça devrait se trouver relativement facilement.
Modifié par Florent V. (18 Jun 2007 - 01:28)

Merci Florent, j'ai déjà regardé un peu pour le javascript, je vais m'y atteler dans la journée si j'ai le temps. Sinon, concernant la dénomination, c'est vrai que ce n'est pas exactement ce qu'il faut appeler un bouton, mais bel et bien un lien hypertexte avec une image. Je vais bosser ça et te tiendrai au courant.
Encore merci.