Tom's Guide > Forum > Programmation > une image id en lien dans css
Mot :    Pseudo :           
 

Salut,

Je voudrais savoir si c'est possible d'ouvrir une page en cliquand sur une image qui n'apparait pas dans le code html mais dans le code css comme ceci:

#menu_h {
width: 900px;
height: 100px;
background: url(images/menu_h.gif);
border-left: 1px solid;
border-right: 1px solid;
}

Le code html contient juste ceci <div id="menu_h">, je voudrais kan clicquand sur l'image menu_h.gif ca ouvre une page! merci

Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.

Hello,

Tu peux attacher du javascript sur ton div :

Code :
  1. <div id="menu_h" onclick="window.location='mapage.htm';">Hello World</div>



Sinon, il reste la possibilité d'injecter du scripting javascript dans l'élément background du css :

Code :
  1. ...
  2. background: url('javascript:DefineBackgroundProperties();');
  3. ...


Dans ce cas, il faut veiller à faire plusieurs choses dans la fonction DefineBackgroundProperties :
- Définir l'image de fond (c'était le but initial de l'élément !)
- Attacher un évènement sur le onclick de la balise div

Ce dernier point doit être spécifique aux navigateurs. Si IE, utiliser attachEvent, sinon utiliser addEventListener.

------------------------------ Djakar
http://www.nova-id.com
Kit de survie sur les forums : Du bon sens, de la modération, du savoir vivre et une bonne dose d'humour
Répondre à Djakar

Sinon en css tu pourras pas. Il faudra mettre l'image dans ton htlm. Je vois très bien ce que tu veux faire, ramener l'utilisateur à la page d'accueil lorsqu'il clique sur la bannière, mais le css ne pourra rien faire. Il faut mettre un <a href="/"><img src="http://la_source_de_ta_page.extension" title="Retour à l'accueil" alt="Bannière" /></a>
C'est ce que info du net utilise ;)

Répondre à dubidibo

Merci a vous deux, en fait le premier code javascript fonctionne pas comme je voudrais parce qu'il affiche une écriture, et le deuxième trop compliquer pour moi. pour <a href="#"><img src="/"></a> c'est comme ca que je fais d'habitude mais la je voulais ne mettre que <div id=""> dans le code html et gérer tout par le css. Ce n'est pas possible de mettre du js dans du css?

Répondre à Allstar27

Citation :

il affiche une écriture


Code :
  1. <div id="toto" onclick="window.localtion='home.html';">&nbsp;</div>


Ca affiche une écriture ?
je ne comprends pas ce que tu veux dire.

Citation :

Ce n'est pas possible de mettre du js dans du css?


Tu as 2 possibilités. Les 2 ne fonctionneront pas avec firefox :
1 - background: url('javascript:MaFonction();'); // Dans le CSS
2 - Utiliser l'élément css : behavior et un fichier htc

------------------------------ Djakar
http://www.nova-id.com
Kit de survie sur les forums : Du bon sens, de la modération, du savoir vivre et une bonne dose d'humour
Répondre à Djakar

Ok ca marche j'avais pas penser a &nbsp merci a toi! you are the boss ;)

Répondre à Allstar27

Tu peux toujours utiliser les selecteurs CSS à l'aide de ce superbe script Behaviour.js qui permet de mettre du code javascript associé à un selecteur CSS... Je pense que c'est le moyen le plus simple pour toi (pas de lien html, et rien de spéciale dans ton css, juste un petit appel à behaviour).
Tu inclus le behaviour. js et tu rajoute dans un autre fichier

Code :
  1. var myrules = {
  2.         '#menu_h' : function(element){
  3.             element.onclick = function(){
  4.                 window.localtion='TON_LIEN';
  5.             }
  6.         }
  7.     };
  8.     Behaviour.register(myrules);

------------------------------ Programmeur n.m : Celui qui résout un problème que vous n'aviez pas, d'une façon que vous ne comprenez pas.
Répondre à MoOx_t
Tom's Guide > Forum > Programmation > une image id en lien dans css
Aller à :

Il y a 2045 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens