2011-02-24 2 views
0

Donc j'essaie d'utiliser un visage comme une sorte d'outil de navigation dans la page jQuery/css/html. Est-ce que la meilleure façon de faire ceci est en coupant chaque élément comme les yeux le nez et la bouche et que les alignent en utilisant des divs carrés sur le HTML? Je pense que peu importe combien j'essaye ça ne va pas finir correctement aligné? Quelqu'un at-il des suggestions?Couper un visage humain pour les liens

Répondre

3

Ou vous pouvez utiliser une carte d'image: http://www.w3schools.com/TAGS/tag_map.asp

EDIT Comme Nick souligne dans les commentaires, vous pouvez avoir des formes de cercle aussi bien. Meilleure option pour les têtes et les yeux etc

+0

https://developer.mozilla.org/en/HTML/Element/map également. – jball

+0

Vous devez également être un auditeur de podcast sitepoint: D - La zone des exemples semble cependant être cassée. – JohnP

+1

Vous pouvez utiliser des formes de cercle dans les cartes d'image –

2

je quitterais l'image intacte comme une seule image d'arrière-plan et la position <a> balises invisibles sur les emplacements appropriés pour agir comme liens

+0

J'ai pensé à cela mais chaque élément doit se séparer une fois qu'un utilisateur clique dessus. Je l'ai maintenant avec des blocs animant en utilisant jQuery à différentes zones de la page. Une fois que vous cliquez sur l'un l'autre 4 disparaissent. Juste en pensant, mais si je devais le faire, savez-vous s'il est possible que je puisse faire disparaître l'élément d'arrière-plan et charger l'image pré-coupée que j'ai? – awesomeUser475853

1

Je n'utiliserais pas les sprites CSS ici mais je les laisserais en une seule image et superposerais chaque "hot-spots" avec des points d'ancrage ou autres. Cependant, les sprites CSS sont vraiment cool et dans d'autres scénarios similaires peut-être la meilleure solution.

http://www.alistapart.com/articles/sprites

+0

Merci css semble être l'approche la plus réaliste pour y arriver Je suis juste inquiet à propos de la mise en œuvre du mouvement jQuery et fondu. Je vais vous dire comment ça se passe grâce à l'entrée – awesomeUser475853

0

Do it en SVG? Vous pouvez toujours utiliser javascript pour manipuler l'emplacement des parties du document SVG.

+0

jamais travaillé avec SVG qu'est-ce que cela implique? – awesomeUser475853

+0

SVG est juste xml. Si vous découpez votre visage en sous-images, vous pouvez l'intégrer dans le SVG (utiliser un outil, il sera codé en base 64), et localiser chacune des sous-images sur le "canevas" SVG. Une fois redimensionné, le tout sera mis à l'échelle (et vos images seront rééchantillonnées, mais devraient rester correctement alignées). – Marcin

+0

Je devrais ajouter que cela peut ne pas fonctionner correctement IE. – Marcin

Questions connexes