Background avec zone cliquable ?

Version imprimable

25/01/2007, 15h28
iceman2001

Background avec zone cliquable ?

Bonjour à tous,

Petite question.
Je fais le site de ma boite. J'ai une image en background sur ma page html.
En haut à gauche, j'ai le logo que je voudrais rendre cliquable pour accéder au site commercial flash.

Je sais que sur une image on peut utiliser un shape area.
Mais sur un arrière plan, je suis un peu embêté.

Comment dois-je m'y prendre ?

Merci d'avance.
25/01/2007, 15h40
Bisûnûrs

Créé ton logo seul que tu ne mets pas en background.

Ou alors tu créés un "calque" que tu positionnes sur ton logo :

Code:

<div style="position:absolute;top:0;left:0;height:100px;width:100px" onclick="alert('coucou')"></div>
25/01/2007, 15h41
MasterOfChakhaL
tu peux placer un lien...

Code:

<a id="logo" href="ton_url" title="bla bla"> </a>

l'élément parent doit être positionné via css (position: relative ou position: absolute) pour être pris comme origine des coordonnées pour les éléments enfants.
Code:

1 2 3 4 5 6 7 8 9 #logo { display: block; position: absolute; top: 20px; left: 30px; width: 50px; height: 20px; }
a toi de changer les coordonnées
25/01/2007, 16h04
iceman2001

Merci, j'essaie tout ça.
25/01/2007, 16h43
iceman2001

Merci, j'ai utilisé :

Code:

<div style="position:absolute;top:0;left:0;height:100px;width:100px" onclick="alert('coucou')"></div>

Ca marche super bien.
Par contre, est-il possible de changer le curseur de la souris (main sur lien) quand on passe sur la zone cliquable ?
25/01/2007, 16h50
Bisûnûrs

Dans le style, rajoute :

Code:

cursor:pointer;
25/01/2007, 16h56
iceman2001

Ok merci, ça donne donc ça :

Code:

<div style="position:absolute;top:-30px;left:120px;height:310px;width:320px;CURSOR: hand" onclick="window.open('http://www.monsite.com')">

Par contre, je comprends pas, ma zone est bien prise en compte (lien) mais j'ai des "intermitences", des endroits où "ça clique", puis rien sur une dizaine de pixel....puis recliquable......

Comment ça s'explique ?
25/01/2007, 16h58
Bisûnûrs

Citation:

Envoyé par Bisûnûrs

Dans le style, rajoute :

Code:

cursor:pointer;

Au passage, tu as mis deux fois l'attribut style ...
25/01/2007, 22h12
Candygirl

Citation:

Envoyé par iceman2001

Par contre, est-il possible de changer le curseur de la souris (main sur lien) quand on passe sur la zone cliquable ?

Pourquoi ne pas utiliser alors tout simplement une balise a plutôt qu'un div comme il t'a été proposé plus haut ? Si ton but est de faire un lien, la balise a est tout de même la plus indiquée, il me semble, et tu auras alors ta "main" par défaut... ;)