Discussion :

[bebediddl]

Bonjour,

J'essai de développer un site Web. Cependant, je rencontre quelques difficultés.
J'aimerais qu'au passage de la souris sur une image, du texte (et surtout des liens) s'affichent. J'ai déjà une grosse partie du code, sauf que lorsque je passe la souris dessus, le lien ne reste pas. L'image clignote et je ne peux pas accéder au lien (ou oui mais au bout de nombreuses tentatives).

quelqu'un à t-il une idée?

Code :

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

1
2
3
4
5
6
7
8
9
 
<div id=ligne style="position:relative; height:130">
      <div style="position:absolute;z-index:1">
            <img style="width:130;heigh:130;" src="images1.png" alt="Image" onmouseover="this.style.opacity=0;test.style.visibility='visible';" onmouseout="this.style.opacity=100;test.style.visibility='hidden'" onmousedown="javascript:redirection_temporisee('?domaine=[/QUOTE]HP');"/>
      </div>
      <div style="color:#000000;text-align:center;visibility:hidden;position:absolute;width:130; height:130; z-index:2;" id=test>
            <a href="http://www.google.fr"> Google </a>
      </div>
</div>

Merci d'avance de votre aide!!!!
Bérénice

[Invité]

Bonjour,
plutôt que visibilty:hidden/visible, j'utiliserais display:block/none (=> CSS Display and Visibility)
On replace un div par un autre (de même taille), donc position:absolute/relative devient inutile.

En "rangeant" mieux ton code (html, CSS et javaScipt séparés), et en optimisant :

Code javascript :

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

1
2
3
4
5
6
<script type="text/javascript">
function show_hide(divshow,divhide) {
	document.getElementById(divshow).style.display = 'block';
	document.getElementById(divhide).style.display = 'none';
}
</script>

Code css :

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

1
2
3
4
5
6
<style type="text/css">
#boxImgLien { width:130px; height:130px; }
#boximage { width:130px; height:130px; }
#boximage img { width:130px; height:130px; }
#boxlien { width:130px; height:130px; display:none; color:#000000; text-align:center; }
</style>

PS : en CSS, on doit indiquer l'unité : width:130px; height:130px;

Code html :

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

1
2
3
4
5
6
7
8
<div id="boxImgLien">
      <div id="boximage" onmouseover="show_hide('boxlien','boximage');">
            <img src="images1.png" alt="Image" />
      </div>
      <div id="boxlien" onmouseout="show_hide('boximage','boxlien');">
            <a href="http://www.google.fr"> Google </a>
      </div>
</div>

[Invité]

Et si ça t'intéresse, voici une version en jQuery :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- Script initialisation jquery -->
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
 
<script type="text/javascript">
$(document).ready(function() {
	$('.boxlien').hide(); // au départ, on masque toutes des boxliens
	$('.boximage').mouseover(function(){
		$(this).hide(); // masque
		$(this).parent().find('.boxlien').show(); // affiche
	});
	$('.boxlien').mouseout(function(){
		$(this).hide();
		$(this).parent().find('.boximage').show();
	});
});
</script>

Code :

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

1
2
3
4
5
6
<style type="text/css">
.boxImgLien { width:130px; height:130px; }
.boximage { width:130px; height:130px; }
.boximage img { width:130px; height:130px; }
.boxlien { width:130px; height:130px; color:#000000; text-align:center; }
</style>

(à noter : j'ai enlevé le display:none; sur .boxlien)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="boxImgLien">
      <div class="boximage">
            <img src="images1.png" alt="Image 1" />
      </div>
      <div class="boxlien">
            <a href="http://www.google.fr"> Google </a>
      </div>
</div>
 
<div class="boxImgLien">
      <div class="boximage">
            <img src="images2.png" alt="Image 2" />
      </div>
      <div class="boxlien">
            <a href="http://www.blabla.fr"> blabla </a>
      </div>
</div>

(à noter : j'ai remplacé les id="..." par des class="...")

Le code html devient très simple.
Et on peut mettre autant de boites "boxImgLien" qu'on veut.

[bebediddl]

Merci à toi pour tes réponses. Elles correspondent exactement à ce que je cherchais. J'avais essayé plein de technique mais pas celles-ci!! La version en jquery et avec les classes au lieu des ID est tout de même plus pratique!! Je vais garder celle-ci.

Merci encore
Bérénice