Avoir la source d'une image cliquable dans le css

**narmataru** · 13/02/2013, 14h54

Bonjour,

Je voudrais avoir la source d'une image dans mon fichier css. Apparemment, ce n'est pas possible. Je suis donc passé par une bidouille qui fonctionne bien. J'ai créé un style pour div avec mon image en fond :

Code :

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

1
2
3
4
5
div.logo {
	background-repeat: no-repeat;
	background-image: url(/img/logo.png);
	height: 110px;
}

Code html :

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

<div class="logo"></div>

Cependant, maintenant j'aimerais bien rendre mon image cliquable et là je ne sais plus comment faire... Rendre la div cliquable ? Remettre l'image dans <img> mais comment avoir la soruce dans le css ??

merci si vous avez une idée...

**Torgar** · 13/02/2013, 15h04

Salut,

"avoir la source d'une image dans mon fichier css"

J'ai pas compris. Mais alors rien.

Si ton but c'est d'empêcher aux internautes de connaître le chemin de ton image, autant arrêter les frais tout de suite. C'est pas possible. Il existe toujours un moyen.

**narmataru** · 13/02/2013, 16h07

Non ce n'est pas ça. Mon site doit pouvoir être customisé entièrement grâce à une feuille de style. C'est pour cette raison que je veux mettre les sources des images dans cette css.

Je me doute bien que si tu affiches une image dans le navigateur, tu la récupère comme tu veux

**Torgar** · 13/02/2013, 16h23

Dans ce cas, soit tu mets un événement onclick sur ta div, soit tu remets l'image et le lien.

**narmataru** · 13/02/2013, 17h03

Jetrouve ça un peu 'artillerie lourde' le onclick() avec une redirection javascript. Y'a quelque chose de plus simple pour faire un lien contenant une image dont la source est dans un css ?

**Torgar** · 13/02/2013, 17h15

Genre ça :

Code html :

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

<a href="blabla" title="blabla">&nbsp;</a>

Code :

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

1
2
3
4
5
6
a {
	display: block;
	width: 53px;
	height: 56px;
	background-image: url('./image.png');
}

Mais bon, on peut pas mettre n'importe quelle balise dans un <a></a>.

Ceci dit, je comprends pas l'intérêt de tout mettre dans le CSS. Il y a une balise <img > prévue pour ça justement.

**narmataru** · 13/02/2013, 17h18

Merci pour ta réponse, je testerai, ça m'a l'air bien.

**narmataru** · 13/02/2013, 17h26

Merci ça fonctionne parfaitement :

Code :

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

1
2
3
4
5
6
7
a.gohome {
	display: block;
	height: 110px;
	width: 269px;
	background-repeat: no-repeat;
	background-image: url(/img/mon_logo.png);
}

Code html :

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

<a href="/mon/url" class="gohome">&nbsp;</a>

**Bovino** · 13/02/2013, 17h44

Juste une précision.

Envoyé par Torgar

Mais bon, on peut pas mettre n'importe quelle balise dans un <a></a>.

Si, en HTML5, on peut mettre presque tout dans une balise <a>

EDIT :
A titre d'exemple

Code html :

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

1
2
3
4
5
6
<!doctype html>
<title>balise a</title>
<a href="http://www.developpez.com">
<h1>Developpez.com</h1>
<p>Le meilleur des forums</p>
</a>

passe sans problème la validation.

**Torgar** · 13/02/2013, 17h55

Envoyé par Bovino

Si, en HTML5, on peut mettre presque tout dans une balise <a>

J'ai hésité à le préciser en effet. J'ai opté pour une solution plus "compatible" avec l'éventuel doctype qu'il a

Merci pour ce complément

Avoir la source d'une image cliquable dans le css

CSS

Discussions similaires

Partager

Partager