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>