Discussion :

[Patrick Seuret]

J'ai besoin d'afficher du texte sur une image de fond et j'aimerais que si l'on clique n'importe où sur l'image ou le texte, alors on se retrouve sur une autre page.

Je dessine mon image sur un div et le texte sur un autre div par dessus:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div style="position:absolute;
            left:50px
            top: 50px;
            width: 100px;
            height: 100px;">
            <img src="image.gif" width=100 height=100>
</div>
<div style="position:absolute;white-space:normal;overflow:hidden;
            left: 50px;
            top: 50px;
            width: 100px;
            height: 100px;">
       Mon texte
</div>

Mais je ne sais pas comment faire pour que si l'utilisateur clique sur le texte ou l'image, alors on suive un lien. Si je mets

Code :

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

<a href="target.html">Mon Texte</a>

Alors ça marche pour le texte, mais pas pour l'image

J'ai essayé de créer un troisième layer vide par dessus les deux autres et lui donner une handler sur "onclick". Ca marche génial sur Mozilla mais rien sur IE:

Code :

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

1
2
3
4
5
6
7
8
<div style="position:absolute;'+
          left:50px;
          top:50px;
          width: 100px;
          height:100px;
          z-index: 999998;"
          onclick="javascript:changePage('target.html');">          
</div>

Quelqu'un aurait-il une idée??

D'avance merci

[marsupix]

la première solution tu oublie lol (enfin j'ai pas lu en fait tellement ça à l'air compliqué pour rien)
en gros ce que tu veux c'est un bouton avec image et texte, qui fait lien...

donc
html

Code :

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

<a href="cible.html" class="bouton_lien">texte du bouton</a>

css

Code :

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

1
2
3
4
5
6
.bouton_lien{
display:block;
width: ...; // largeur image
height: ...; // hauteur image
background:url('image.gif') no-repeat; // où ce que t'as besoin pour l'image...
}

pis c'est tout...
à noter que désormais le lien va se comporter en block, donc va créer un retour à la ligne etc... (et donc pas besoin de div autour...)

[Patrick Seuret]

Mon problème, c'est que j'aimerais que l'image réagisse aussi au clic...

En plus, il y a des problèmes d'impression avec les images de fond (il faut activer les options ad hoc pour que l'image apparaisse sur l'imprimante) alors qu'avec deux div superposés, l'image s'imprime dans tous les cas...

Donc cette solution n'est pas totalement satisfaisante

Edit: J'ai dit une bêtise: toute l'image réagit correctement au clic

[marsupix]

en général tu fai un css screen et un print...

[Patrick Seuret]

Je sais comment associer un css au print, mais je ne sais pas comment forcer une image de fond à être imprimée depuis le css? Pourrais-tu me donner un exempe??

Merci

[masu]

si tu veu un lien sur le texte et un sur l'image pourquoi ne pas mettre une balise a sur le texte et une sur l'image tout simplement?

Code :

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

1
2
<a href="<a href="http://www.developpez.com"" target="_blank">http://www.developpez.com"</a> style="position:absolute;white-space:normal;overflow:hidden; left: 50px; top: 50px;"><img src="image.gif" width="100" height="100"></a>
<div style="position:absolute;white-space:normal;overflow:hidden; left: 50px; top: 50px;"><a href="<a href="http://www.developpez.com">mon" target="_blank">http://www.developpez.com">mon</a> Text</a></div>

[sovo]

si j'ai bien compris tu voudrais que ceci :

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
 
<div style="text-align: left;"><div style="position:absolute;
            left:50px
            top: 50px;
            width: 100px;
            height: 100px;">
            <img src="image.gif" width=100 height=100>
</div>
<div style="position:absolute;white-space:normal;overflow:hidden;
            left: 50px;
            top: 50px;
            width: 100px;
            height: 100px;">
       Mon texte
</div></div>

reagisse au lien. Alors pourquoi ne pas faire simplement

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
 
<a href="taget.html">
<div style="text-align: left;"><div style="position:absolute;
            left:50px
            top: 50px;
            width: 100px;
            height: 100px;">
            <img src="image.gif" width=100 height=100>
</div>
<div style="position:absolute;white-space:normal;overflow:hidden;
            left: 50px;
            top: 50px;
            width: 100px;
            height: 100px;">
       Mon texte
</div></div></a>

je croit que ca devrais aller ??

[masu]

on pourrai meme enlever un div

Code :

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

1
2
3
4
5
6
7
8
9
<a href="<a href="http://www.developpez.com"" target="_blank">http://www.developpez.com"</a> style="position:absolute;
display:block;
left: 50px;
top: 50px;
width: 100px;
height: 100px;">
<img src="image.gif" width=100 height=100>
<div style="position:absolute; top:0; left:0; ">Mon texte</div>
</a>

bien vu sovo. Enfait c'est surtout que j'ai ete un peu vexé de avoir pense a ca :/

attention quand meme au ; manquant apres le left.

Code :

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

left:50px;

[sovo]

attention quand meme au ; manquant apres le left.

Code :

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

left:50px;

comme tu l'auras tres certainement remarque masu, pour ne pas m'ecarter de son code, je n'ai fait qu'un copier coller. Donc ...

[Patrick Seuret]

De nouveau, ça marche bien sur Mozilla, mais IE ne réagit pas si on passe sur l'image en dehors du texte...

Par contre, je crois que j'ai résolu le problème avec ce code:

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
 
<div style="position:absolute;
                left: 50px;
                top: 50px;
                width: 100px;
                height: 100px;
                z-index: 20005;">
            <a href="link.html"
                 style="width: 100px;
                        height: 100px;
                        display: block;
                        text-align: center;
                        border: 0px;
                        background: url('image.gif') no-repeat;">
             Mon Texte</a>
</div>

La subtilité est que l'image DOIT se trouver dans le lien. Si on superpose un div avec l'image sous le <a...> alors IE ignore la zone en dehors du texte!

Pour info, pour l'impression de l'image sans devoir activer l'option "imprimer les images et couleurs de fond" d'IE, j'ai fait un gros sandwitch:

Code :

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

1
2
3
4
5
6
<div ... top: 50px; left: 50px; ...>
  <img src="image.gif">
</div>
<div ... top: 50px; left: 50px; ...>
  <a style=".. background: url('image.gif') ..." href="link.html">Mon texte</a>
</div>

Le premier div affiche l'image pour qu'elle soit imprimée, le second affiche de nouveau l'image en background du texte du lien pour qu'elle réagisse. Et ça marche aussi bien dans Mozilla que IE!

EDIT: Désolé masu, mais je n'avais pas vu ton post: ça marche très bien aussi :-) La différence dans le résultat est qu'avec ma méthode on ne peut pas copier le texte alors qu'on peut le faire avec la tienne...

Encore merci pour vos précieux conseils!