Avoir la source d'une image cliquable dans le css

Version imprimable

13/02/2013, 14h54
narmataru

Avoir la source d'une image cliquable dans le css
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:

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

<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...
13/02/2013, 15h04
Torgar

Salut,

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

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.
13/02/2013, 16h07
narmataru

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 :roll:
13/02/2013, 16h23
Torgar

Dans ce cas, soit tu mets un événement onclick sur ta div, soit tu remets l'image et le lien.
13/02/2013, 17h03
narmataru

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 ?
13/02/2013, 17h15
Torgar
Genre ça :

Code:

<a href="blabla" title="blabla"> </a>
Code:

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.
13/02/2013, 17h18
narmataru

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

Merci ça fonctionne parfaitement :
Code:

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:

<a href="/mon/url" class="gohome"> </a>

13/02/2013, 17h44
Bovino
Juste une précision.

Citation:

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:

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.
13/02/2013, 17h55
Torgar

Citation:

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

Merci pour ce complément :ccool: