[CSS] Rollover avec 2 images ? sur le forum Création de sites web - 27-04-2008 00:47:17

Liste des sujets

[CSS] Rollover avec 2 images ?

Houlyy

Niveau 3

27 avril 2008 à 00:47:17

Salut,

Alors voilà j'ai un petit souci (qui m'énerve beaucoup):

je veux remplacer les liens dans mon menu (fait en <div><ul><il>)par des images rollover (quand je passe dessus elles changent d'aspect).

Par exemple j'ai un lien accueil que je veux changer par une image de bouton (fait avec photoshop en .gif) et que quand je passe ma souris dessus cette image et la memê mais en plus clair (autre image fait aussi sur photoshop en .gif).

Après plusieurs recherche et esssais j'y suis presque arrivé sauf que :

-soit mon image est coupée.
-soit l'image qui doit se changer ne se chnage pas mais je voit dérière un petit bout de l'image qui doit aparaitre).
-soit les 2 images sont l'une en dessous de l'autre.

Voilà je voudrais juste savoir exactement comment je peux faire celà en [XHTML -CSS] ?

je vous remercie d'avance pour vos réponses !

Killinguin

Niveau 10

27 avril 2008 à 01:53:14

Euh envoie ton site pour voir j'ai rien compris à l'explication

acemicka

Niveau 9

27 avril 2008 à 04:23:00

function image_origine(x) {
document.getElementById(x).src = "icone/" + x + ".png" ;
}
</script>

<body>

</body>

tu nomes tes ID comme tes images.
ton image de base par exemple "accueil.jpeg" puis l'autre acceuilactif.
comme parametre de ta fonction tu met bien acceuil ( l'ID de l'image et le nom de cel-ci )

ton image de base par exemple "news.jpeg" puis l'autre newsactif.
comme parametre de ta fonction tu met bien news ( l'ID de l'image et le nom de cel-ci ).

acemicka

Niveau 9

27 avril 2008 à 04:25:51

ce que ca donne donne vite fait

http://acemicka.olympe-network.com/aide.html

deepblue

Niveau 16

27 avril 2008 à 11:39:25

http://bordel.deblan.fr/html/hover.html

deepblue

Niveau 16

27 avril 2008 à 11:43:23

(avantages principales ; pas de surcharge de code javascript dans la page, on peut se passer des hover en ne commentant que le css - plus rapide que de dégager les onmousover... -)

Houlyy

Niveau 3

27 avril 2008 à 11:53:24

Merci de vos réponses mais il n'y à pas plus simple ?

Je voudrais exactement le même "style" de bouton "répondre-rafraichir" que deepblue à fait a par que moi c'est un bouton marqué accueil sur font metal et quand je passe la souris dessus le métal devient bleu.

Houlyy

Niveau 3

27 avril 2008 à 12:22:09

Donc j'ai regardé le code et je l'ai appliqué au mien.
Ca marche presque parfaitement apart que mes images et coupées de moitié (le bas et la droite).

Comment je peux faire pour qu'elles s'affichent bien ?

Ce sont des images .gif

deepblue

Niveau 16

27 avril 2008 à 12:24:51

http://bordel.deblan.fr/html/hover.html
joeu avec le padding et si vraiment sa part en sucette, il faudrait mettre un display:block et définir width et height

Houlyy

Niveau 3

27 avril 2008 à 12:32:18

A OUI ^^ désolé je l'avais oublié celui là !

Merci à vous sa marche comme dans mes rêves

acemicka

Niveau 9

27 avril 2008 à 13:53:06

le probleme du hover c'est que ca ne modif que le fond d'ecran et donc désagréable a lire au syntétiseur volcal n'ayant pas de alt.
a moin de mettre un gif transparent par dessus avec un alt mais ie6 ne gere pas la trasparence. en meme temp c'est pas prioritaire et il doit y avoir une solution.

pareil pour les navigateurs qui n'affiche pas les photos je sais pas trop ce que ca donne.

maintenant pour 99.9% des personnes le hover marche et est plus simple.

mr_monkey

Niveau 10

28 avril 2008 à 08:49:34

On peut aussi mettre un texte caché dans le div mais bon ça n'est pas dit que le navigateur le lise (a l'oral s'entend), ou alors on peut mettre le texte derrière l'image ^^

acemicka

Niveau 9

28 avril 2008 à 17:47:24

ouai.
le javascript me semble quand meme plus correct pour un menu en image qu un background qui est fait pour des arrieres plan.

sinon ouai le truc du text dans un div derriere l arriere plan ca doit marcher je pense. mais il faudra forcer avec une postion absolute ou relative pour que la nouvelle div soit bien caler dessus ( donc ca sous entend que le navigateur pend le CSS ce qui n'est pas le cas tout le temp. par exemple mon apareil portable pour internet j'ai un choix pour amélioré la visibiliter ( ecran 3.5 pouce ) il fait ca propre mise en page et la les menu en background je ne les voie pas et si ya une div derriere ba elle sera pas caler sur le la div vide du menu ). pas forcément plus simple ou plus propre que javascript.

( perso j utilisais aussi des background pour mes menu donc bon après faut juste savoir que pour les apareils a petit écran ou navigateur non graphique c'est pas utilisable. tout dépend du public viser.)

deepblue

Niveau 16

28 avril 2008 à 17:55:13

Mise à part ie6, le css sera interprété correctement partout, meme si un système embarqué (safari sur un ipod) et il peut avec des restrictions au niveau du javascript.
Rien n'empeche de mettre un alt="" à l'image ou mieu, utiliser un span, ou a, avec un display:none pour manquer le texte et ne faire apparaitre que l'image bouton.

Aide à l'achat Mac
Création de Jeux
Linux
Programmation
Création de sites web
Internet
Steam Deck
Macintosh
Hardware

La vidéo du moment

News astuce

22 747 spectateurs

Moonlight Peaks : Comment mettre le jeu en français ?

Depuis le 07 juillet, Moonlight Peaks est disponible sur PC, Switch et Switch 2, plongeant les joueurs dans un simulateurs de vie aux allures de Stardew Valley mais installant son cadre chez les vampires.

Toutes les news astuce