Cliquer sur image+texte

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:

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:

<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:

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

la première solution 8O 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:

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

css
Code:

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...)

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 :cry:

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

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

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

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:

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>

si j'ai bien compris tu voudrais que ceci :

Code:

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:

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 ??

on pourrai meme enlever un div
Code:

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:

left:50px;

Citation:

Envoyé par masu

attention quand meme au ; manquant apres le left.

Code:

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 ...

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:

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:

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!