Discussion :

[Arn°oO]

Bonjour,
Je recherche comment activer un lien dans un footer.
Mon footer est paramétrer avec un CSS

J'ai ainsi

background-image: url('../images/logos.png');

Je souhaite que depuis cette image, un lien soit activé par un click.

J'avais déjà utiliser cette technique mais je n'ai pas pu remettre la main sur le bout de code.
Il y avait du javascript...il me semble.

Quelqu'un a t-il une idée?

Merci
Arno

[Damouille]

Il te faut une balise <a>

Code :

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

<a href="tonlien.html"><img src="logo.png" alt="texte alternatif" /></a>

ou

Code :

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

<a class="logo" href="tonlien.html"></a>

Code :

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

1
2
3
.logo {
background-image: url(./logo.png);
}

Du javascript pour faire un lien? J'ai peut etre mal compris ta question

[Arn°oO]

Oui, le lien permet d'afficher l'image mais, je souhaite en plus que le clic sur cette image ouvre une page liée à un url

Il n'y a pas du code avec onclick= ... à mettre à la suite de url(./logo.png)

Merci
Arno

[tibotibo69]

Ca ne marche pas comme te le propose Damouille ?

[Invité]

Il n'y a pas du code avec onclick= ... à mettre à la suite de url(./logo.png)

Le javascript ne s'insère pas dans du CSS. Dans du HTML pourquoi pas, mais dans du CSS.


Le code que te propose Damouille est le plus adapté.

[Damouille]

Il n'y a pas du code avec onclick= ... à mettre à la suite de url(./logo.png)

Du javascript dans du css!!! Non, ca marche pas.

Il me semble que ouvrir un page lors du clic est le comportement naturel de la balise <a>. Mais plus ca va, plus je pense que je ne comprend mal ta question.

[Macmillenium]

Bonjour,

Code :

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

<a href="tonlien.html"><img src="logo.png" alt="texte alternatif" /></a>

C'est la meilleure solution.

ou

Code :

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

<a class="logo" href="tonlien.html"></a>

Code :

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

1
2
3
.logo {
background-image: url(./logo.png);
}

1. Tu ne peux pas appliquer un width et height sur un élément de rendu inline ;
2. A mon avis, un logo est loin d'être une image décorative
Ceci dit, cette méthode signifie une perte de données en cas de navigation avec CSS et images désactivées (si si, ça existe )
Je parle également des lecteurs d'écrans, robots d'indexation et navigateurs textuels en mode console.

[Arn°oO]

Je suis un peu perdu.

Je tente de mettre en application vos infos mais sans succes.

Je travaille avec Joomla, dans mon index.php j'ai

Code html :

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

1
2
 <div class="mon_footer">
 </div>

et dans mon template.css

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
.Footer .mon_footer
{
	position:absolute;
	z-index:-1;
	background-repeat:no-repeat;
		background-image: url('../images/monlogo.png');
	width: 213px;
	height: 53px;
	bottom:5px;
	left:15px;
}

Je souhaite mettre un lien URL sur monlogo.png
J'ai tenté

Code html :

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

1
2
3
<div class="mon_footer">
<a href="monlien.html"><img src="monlogo.png" alt="texte alternatif" /></a>
 </div>

mais sans succès, ca doit pas être aussi simple....

Merci encore
Arno

[Macmillenium]

Code html :

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

1
2
3
<div class="mon_footer">
<a href="monlien.html"><img src="monlogo.png" alt="texte alternatif" /></a>
 </div>

mais sans succès, ca doit pas être aussi simple....

Si, c'est très simple.
Qu'est ce qui ne fonctionne pas ? Tu arrive à voir le logo dans le footer ?
Sinon enlève le z-index:-1.

[Arn°oO]

Je vois bien mes logos, je les ai placé dans mon footer.
Cependant, avec la souris, le passage sur le logo ne provoque rien

J'ai enlevé le z-index

La mise du code ci-dessous me permet de voir le "texte alternatif" et son lien mais
je ne veux pas voir de texte, et le logo que j'ai est celui qui doit porter le lien...

Moi aussi je connais cela simple, mais là...