Remplacer un lien hypertexte par un bouton image

Bonjour,

Je souhaites remplacer le lien hypertexte "zoom" par une image. Le HTML ci-dessous ne peut pas être modifié.Le texte devra donc être invisible.

<div class="monDivI">
	<div class="contenuDivI">
			<div class="titre">
				<h2><span>TITRE II</span></h2>
			</div>

			<div class="detailPublication">

<div class="information nomDuDiv detail">
        <div class="image"><a class="thickbox" target="_blank" href="adressedemonimage.jpg"><img border="0" alt="Page Test" src="adresse.jpg" title="Page Test" /><span><br />zoom</span></a></div>

Je pense qu'il faudrait que je puisse ajouter du code CSS dans div.information.detail div.image a mais ne sait pas comment procéder. J'ai essayer d'ajouter un bouton comme pour les formulaires mais cela ne fonctionne pas.

Merci par avance.
Modifié par shoko (28 May 2009 - 09:02)

Salut,

je n'ai pas compris : est-ce que tu parles d'un remplacement par JavaScript ?

Je parle d'un remplacement en CSS.
En fait, je souhaiterais passer de la premiere image à la seconde grâce au CSS.
Au départ,j'ai une image avec au dessous un lien "zoom": en cliquant dessus l'image s'agrandit au centre de la page et un "calque d'opacité noir" apparait (comme cet effet là).
Cependant,j'aimerais remplacer le texte "zoom" par l'image d'une loupe.

image de base: http://img29.imageshack.us/img29/4395/image5a.png
le résultat que j'aimerais obtenir: http://img505.imageshack.us/img505/8491/imgfinal.jpg
Modifié par shoko (28 May 2009 - 09:57)

shoko a écrit :
Cependant,j'aimerais remplacer le texte "zoom" par l'image d'une loupe.

Sauf que les CSS ne servent qu'à la présentation : ils ne sont pas faits pour remplacer un contenu (du texte) par un autre (une image).

Faire ça en CSS serait une mauvaise idée.

Premièrement ça implique de mettre une image porteuse de contenu ("Zoom") dans le CSS ce qui ne suit pas vraiment l'idée de la séparation du contenu et de la présentation.

Deuxièmement ça implique de masquer le texte en le mettant hors de la page ou en utilisant display:hidden (ou autre). Et c'est là qu'est le problème. Avec un navigateur qui aura désactivé les images mais pas le CSS, plus de lien : et avec un navigateur qui aura désactivé les CSS mais pas les images, tu aura les deux éléments (l'image et le texte) pas forcément positionné comme tu le souhaite.

Bref, une image qui doit servir de lien DOIT se trouver dans le HTML.

Salut,

a écrit :
Sauf que les CSS ne servent qu'à la présentation : ils ne sont pas faits pour remplacer un contenu (du texte) par un autre (une image).

a écrit :
ça implique de mettre une image porteuse de contenu ("Zoom") dans le CSS ce qui ne suit pas vraiment l'idée de la séparation du contenu et de la présentation.

Hmm, pas vraiment d'accord. Le remplacement de texte par une image véhiculant le même sens ne me paraît pas une aberration sémantique et joue, à mon sens, complètement le jeu de la séparation entre présentation (l'image) et contenu (le texte, = le sens de l'image).

Ensuite pour les questions de CCS on / images off et vice versa, là par contre je suis d'accord. Ce n'est pas 100% génial.

En tout cas, shoko doit savoir que cette technique est extrêmement répandue et que les moyens de la mettre en place sont nombreux.

marcv a écrit :
Le remplacement de texte par une image véhiculant le même sens ne me paraît pas une aberration sémantique

Je suis d'accord mais shoko précisait dans son premier post que le code html ne pouvait pas être modifié (sous-entendu que "zoom" était du texte placé dans un SPAN).


Edit: Ah OK. Je viens de suivre ton lien : je croyais que tu parlais d'utiliser une image.

Edit2: Mouaip. Je ne suis pas vraiment convaincu. Ça a quand même un côté bidouille je trouve.
Modifié par Heyoan (28 May 2009 - 10:41)