Discussion :

[BnA]

Salut à tous!!

Voilà, j'aurais aimé savoir s'il était possible de faire un rollover sur une image, mais sans qu'il y ait de lien derrière celle-ci.

Et également s'il était possible de faire apparaître un texte quelconque lorsque cette image est sruvolée...

Si oui, comment dois-je m'y prendre??

Je ne demande pas de code, mais mes connaissances en JavaScript ayant un gros besoin d'être rafraîchie, une explication - ou un direction à suivre - serait la bienvenue!

Merci d'avance pour vos réponses!!

[Bisûnûrs]

onmouseover sur la balise img.

[BnA]

Merci... Mais en fait, durant ma courte nuit de sommeil, j'ai réalisé que je m'étais exprimé comme un pingouin...

Je m'explique...

J'ai un tableau de 2 lignes, avec 5 colonnes à chaque lignes.

La ligne supérieure contient 5 images, la ligne inférieure contient elle le label (titre) correspondant à chaque image.

Ce que j'aimerais, c'est que lorsque l'on passe sur une image, le label correspondant apparaisse...

(Désolé de m'être exprimé comme n'importe quoi, il était assez tard et j'avais déjà une 10aine d'heure de PC derrière moi...)

[Bisûnûrs]

Ben tu mets le label à visibility:hidden, sur le onmouseover de l'image tu bascules la valeur correspondant à l'image à visible et sur le onmouseout tu la remets à hidden.

[BnA]

Le seul problème, c'est que les labels sont en fait du simple texte (dynamique)...

[Bisûnûrs]

Qu'est-ce que ça change ?

[BnA]

Bon... Merci pour les infos, j'ai plus qu'à me replonger dans mon cher bouquin...

A plus!

[BnA]

Bon, j'ai un peu chipoté, et ça marche, mais ce n'est pas très optimisé...

Jugez plutôt...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script language="JavaScript" type="text/javascript">
function afficheStep(){
document.getElementById('step1').style.visibility='visible';
}
 
function cacheStep(){
document.getElementById('step1').style.visibility='hidden';
}
</script>
 
<td class="step"><img src="1_grey.png" onMouseOver="afficheStep()" onMouseOut="cacheStep()"/></td>
 
<td class="stepLabelDisabled"><span id="step1" style="visibility:hidden;">Step 1</span>

Donc en gros, lorsque je passe ma souris sur l'image, du texte apparaît en dessous.

Le truc, c'est que j'ai 5 images (et donc 5 "textes"). Comment faire pour ne pas devoir répéter 5 fois le même code en changeant juste l'ID?

[Bisûnûrs]

Tu passes l'id à afficher/masquer en paramètre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function afficheStep(id){
   document.getElementById(id).style.visibility='visible';
}
 
function cacheStep(id){
   document.getElementById(id).style.visibility='hidden';
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<td><img src="1_grey.png" onMouseOver="afficheStep('step1')" onMouseOut="cacheStep('step1')"/></td>
<td><span id="step1" style="visibility:hidden;">Step 1</span></td>
 
<td><img src="2_grey.png" onMouseOver="afficheStep('step2')" onMouseOut="cacheStep('step2')"/></td>
<td><span id="step2" style="visibility:hidden;">Step 2</span></td>

[Auteur]

Le truc, c'est que j'ai 5 images (et donc 5 "textes"). Comment faire pour ne pas devoir répéter 5 fois le même code en changeant juste l'ID?

TRansmets l'id du texte à afficher dans le paramètre de la fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script language="JavaScript" type="text/javascript">
function afficheStep(idElement){
document.getElementById(idElement).style.visibility='visible';
}
 
function cacheStep(idElement){
document.getElementById(idElement).style.visibility='hidden';
}
</script>
 
<td class="step"><img src="1_grey.png" onMouseOver="afficheStep('step1')" onMouseOut="cacheStep('step1')"/></td>
 
<td class="stepLabelDisabled"><span id="step1" style="visibility:hidden;">Step 1</span>

[edit]Grillé ?? [/edit]

[BnA]

Merci, tout marche nickel!

Un grand merci vraiment!