Aller au contenu

Faire un lien sur une image ?


Sujets conseillés

Posté

Bonjour,

J'ai besoin de faire un lien sur une image.

Je pensais que ça allait être tout simple avec ce petit bout de code :

<a href="machin.html"><img src="images.jpg" width="250"></a>

Mais ça ne fonctionne pas :mad2:

Pourtant c'est un truc de base que j'ai déjà du faire des centaines de fois...

Auriez-vous une suggestion ?

Merci et à bientôt,

Posté

Salut,

Tu travailles sous quel doctype? Est-ce que tu as bien une image qui s'appelle images.jpg dans le même dossier que ton fichier .html qui contient le code que tu as écrit?

Posté (modifié)

Merci pour ta réponse,

J'ai ce doctype :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Pour les chemins vers l'image et vers le fichier html, je suis certain qu'ils sont bons.

J'ai oublié de précisez que l'image est dans un <div>


<div class="imagegauche">
<a href="machin.html"><img src="images.jpg" width="250"></a>
</div>

Modifié par Tabouet
Posté (modifié)

pourquoi utiliser un tel doctype "XHTML 1.0 Strict" quand le code est invalide ?

Modifié par Leonick
Posté (modifié)

C'est une page en cours de construction qui n'a pas encore eu le temps d'être validée.

De toute façon, quelque soit le doctype, ça ne marche pas.

Histoire de localiser la source du problème, j'ai remplacé mon image par du texte, pour avoir un lien "normal";

<div class="imagegauche">
<a href="machin.html">test de lien</a>
</div>

Et ça ne fonctionne pas.

Quand le curseur est sur le lien, il ne devient même pas "un doigt" et quand je clique rien ne se passe.

Modifié par Tabouet
Posté

N'y aurait-il pas un div (ou autre bloc) par-dessus ton lien ? Genre avec des positionnements en absolute ? Si c'est le cas, il faut mettre des z-index pour paramétrer les superpositions de divs.

Posté (modifié)

Mouais... je crois qu'il y avait comme un problème avec les div et les positions.

le code de départ était le suivant:


<div class="imagegauche">
<a href="machin.html">toto</a>
</div>

<div style="position:relative;padding-right:10px;">
du code...
</div>

Il est devenu :


<div class="imagegauche">
<a href="machin.html">toto</a>
</div>

<div style="margin-left:470;padding-right:10px;">
du code...
</div>

Maintenant ça à l'air de fonctionner, il y avait une sorte de superposition des div.

D'où le lien qui était inaccessible.

Modifié par Tabouet
Posté

en xhtml, les images se finissent par />

essaie d'ajouter un fond rouge derrière ton lien, ça te permettra de voir s'il est accessible à la souris, pour ça, ajoute un id dans ton <a>

Posté

Le problème semble résolu...

Je ferai quelques tests demain (à tête reposée) et je vous tiens au courant.

Posté

Salut

De manière générale, il vaut mieux ne pas surcharger de <div>, surtout quand ce n'est pas indispensable.

Ici, typiquement le <div> '"imagegauche" n'a pas l'air de servir à grand chose... à part à créer du bordel sur un simple lien tout bête ;)

(De plus, il est préférable de ne pas nommer ses identifiants et ses classes avec des trucs du style "colonne-verte", "image-gauche", bordure-rouge-en-haut-a-gauche" etc. Le jour ou tu modifies le design de ton site, la colonne sera peut-être violette, l'image sera peut-être centrée ou à droite, la bordure sera peut-être différente, ou inexistante ;))

Bref, revenons à nos moutons, ce <div> a l'air d'être là juste pour pallier un défaut de sémantique ou de bonne utilisation du CSS.

Sans voir la page, mais sur un simple a priori, je dirais qu'une bonne règle CSS bien ciblée permettrait de l'enlever ;)

Un petit article intéressant sur la divite aiguë, cette maladie grave !

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...