Salut à tous,
 
j'essaie de faire court parce que je sais parfaitement pour les gens calés à quel point ce genre de topics peuvent devenir lourds.
 
1-Ca fait deux jours que je cherche, que je fais forums et tutos
2-Je suis une bille en HTML, en CSS c'est pas encore ça, et j'ai jamais touché au javascript
 
La page est disponible ici : http://www.johanmosse.fr. Le index.html et style.css sont à la racine du site.
 
J'ai plein d'autres problèmes, mais je travaille dessus et pense pouvoir les régler (@font-face, dégradé du haut qui bugge) mais j'ai vraiment besoin d'aide pour faire en sorte qu'au survol du bouton "publication expérimentale intitulée "The Sample"", l'image en fond devienne visible alors qu'elle serait masquée par défaut.
 
J'suis tombé sur des codes en javascript que j'ai tenté de bidouiller sans succès (ni sans trop comprendre).
 
Qu'en pensez-vous? Comment y parvenir?
 
Merci d'avance, et surtout souvenez vous d'expliquer comme à un débile, parce que je débute vraiment.
 
Johan

en jouant sur le z-index de l'image, ça pourrait pas le faire?

Tu mets l'image dans un lien, caché par défaut.
Mais au :hover, tu l'affiches
Ceci, mais avec une image
http://www.commentcamarche.net/faq [...] javascript

Rien de plus facile :

 
Depuis que je suis sur ce forum, je n'ai que des solutions avec Div ou Span, pourquoi seulement moi ?
 
Pour t'expliquer le principe momocabries :
-J'ai initialisé un span, c'est une syntaxe permettant d'être modifier. Comme un Div.
-Tu peux observer style="position:absolute;" ce code permet de mettre l'image en avant (3D).
-J'ai initialisé un lien <a href=#link>#link</a>
-J'ai ajouté un OnMouseOver pour permettre d'activer du javascript au passage de la souris
-Ce code : document.getElementById('test1').innerHTML permet de modifier le span
-Puis on initialise l'image pour le span

Salut, merci pour votre aide pour commencer.
 
@rufo : ca peut sûrement marcher, le problème étant de savoir comment dire au z-index d'un autre div précis de se modifier au survol d'un lien particulier dans la page.
 
@DavidBoring : je comprend le code, mais je ne sais pas ou modifier le CSS pour qu'à la place d'un encart avec du texte, cela soit une image qui s'affiche... Tu saurais m'aider?
 
@cetplus : ca marche quand je copie ce code, le problème étant qu'au moment ou la souris n'est plus en survol, l'image reste, et que dans le code j'ai du mal à comprendre où je dois donner les informations sur la position précise de l'image à afficher...
 
Merci en tout cas pour ces pistes à explorer

Tu remplaces le span par une image

 
Et dans la css, tu mets img à la place de span

Via du javascript par ex

@rufo : Oui mais je n'y connais rien !
 
@David Boring : Merci, ta solution marche du tonerre, à ceci près que l'image passe nécessairement devant le texte, même lorsque j'ajoute un z-index:-20; dans le CSS "a.info:hover img"... Je la voudrais en arrière-plan, c'est jouable tu crois?

Alors, tu mets le texte du lien dans un span, avec position:relative, z-index:2
Et l'image avec un z-index de 1

Ca marche. Tu es un génie. Merci

Dernière question, vraiment pour chipoter. Je suis sur Firefox et quand je clique sur le lien-test pour l'image sur http://www.johanmosse.fr on voit les pointillés qui signalent le contour du bouton (et qui prennent aussi l'image).
 
Déjà que ces pointillés sont horribles... Y'a une astuce ?
 
C'est juste pour être relou

Tu dois les laisser, cela aide les personnes handicapées à voir le focus.
Mais bon, si vraiment, tu veux les retirer, c'est a {outline:0}

J'ignorais... Merci beaucoup !

Sinon tu peux utiliser cette technique:
 
<a href="en_index.php" >
<img src="images/image-blanche.jpg"  onmouseover="this.src='images/image-bleu.jpg'" onmouseout="this.src='images/image-blanche.jpg'"/>
</a>
 
Cela va afficher une image blanche et quand la souris ira dessus, affichera une image bleu qui sera a son tour remplacé de nouveau par la blanche quand la souris sortira de l'image.
 
Bien sur, tu remplace image-blanc.jpg et image-bleu.jpg par le nom de tes images

Oui enfin employer du js quand on peut le fair en css, c'est, je trouve, stupide comme idée.
Surtout une saloperie de code comme tu le proposes. Nous sommes en 2010, on ne doit plus voir de javascript mixé dans l'html, c'est à BANNIR

@David Boring = Et pourquoi le javascript n'aurait pas sa place dans une syntaxe HTML ? Ça réduit considérablement le temps de programmation.

Parce qu'ils est plus facile d'aller modifier 1 fichier js qui lui t'initialise ta vue (HTML) que d'avoir du JS partout dans le HTML et te perdre dans tous les sens.

C'est pas faux