Cartes-images CSS

La source: http://www.frankmanno.com/ideas/css-imagemap/

Images Cartes

Voici un exemple de mappage d’image qui est construit entièrement en CSS et XHTML. Alors que j’ai ajouté le support de Javascript (élément titres sont simplement affichés sous l’image), j’ai désactivé dans cet exemple — j’ai rencontré un petit problème lorsque JS est activé et CSS est désactivé (plus de détails ci-dessous).

L’idée de départ pour cela provenait d’un message sur le blog que j’ai lu plus au blog de Gina Trappini, Scribbling.net. Son exemple a été bien fait, mais je voulais tenter le même (ou similaire) à l’aide de seulement CSS.

J’ai ensuite trouvé un lien vers le site The Daily Kryogenix (par la poste de Gina) qui a conduit à une image interactive qui a fait usage de briquet à DHTML et fait usage de la <title> tag pour afficher les notes sur un hotspot. Pourtant, un peu tributaire de Javascript/DHTML.

En fin de compte, j’ai décidé de faire usage de de Doug Bowman portes coulissantes technique combinée à une liste de définitions. <dl></dl>

La technique des portes coulissantes permet de contenir tous vos effets de survol de l’image dans un fichier image, et faire usage de la background-position propriété CSS à « shift » l’image dans n’importe quelle direction. En ajoutant un :hover effet à vos CSS (dans ce cas, la <a> balise contenue dans le <dd> tag), vous pouvez changer l’image à une position désirée.

Ce que j’ai fait construire le plan de l’image dans Photoshop. Comme vous pouvez le voir sur cette image, la carte se compose de 3 copies de la même image, chacun avec des marques différentes. Du haut (1 de 3) marque simplement les points chauds avec des nombres et intermédiaire et inférieur images (2 et 3/3) chacune contenant les effets de survol (transparence blanc). Vous demandez peut-être pourquoi l’effet de substitution est séparé en deux images distinctes. La raison de la séparation est en raison du chevauchement dans les éléments adjacents (c’est à dire : l’écran, l’ordinateur portable et la disquette sur le bureau). Plutôt que d’avoir une collision entre les deux points, les effets de survol pour les éléments voisins ont été séparées sur plusieurs copies d’une même image.

Essentiellement, la façon dont cela fonctionne est en plaçant le titre du hotspot point dans la définition à terme Tag <dt></dt> de votre liste, suivie de la description dans la balise de définition-description <dd></dd>. Le CSS puis cache le terme définition (ce qui est vraiment utilisé pour quand CSS est désactivé), ainsi que la définition-description (affichée sur le survol de l’ancre) et affiche la description de définition (dans ce cas, la description du forfait que vous avez choisi pour votre imagemap) et absolument positionne et affiche la description à rouler sur le hotspot (également défini dans le CSS).

Le code se dégrade aussi avec élégance. Un <img> tag, qui affiche une version non mappés de la carte de l’image, est masquée à l’aide de CSS. Pour ceux qui ont des CSS désactivé, la version cartographiée de l’image (image 3 pièces) ne s’affiche pas, puisqu’il fait partie de la background propriété CSS. Plutôt la version non mappé s’affiche, ainsi qu’une liste de définition sans style. Si vous avez l’extension Web Developer pour Firefox, Allez-y et désactiver les styles. Vous aurez une meilleure idée de la dégradation.

Un échantillon du code est affiché en dessous (afficher la source complète de CSS et XHTML) :

CSS:


dd#monitorDef{ top: 65px; left: 114px; }
dd#monitorDef a{ position: absolute; width: 73px; height: 69px; text-decoration: none; }
dd#monitorDef a span{ display: none; }
dd#monitorDef a:hover{ position: absolute; background: transparent url(office.jpg) -109px -317px no-repeat; top: -10px; left: -5px; }

dd#monitorDef a:hover span{
 display: block;
 text-indent: 0;
 vertical-align: top;
 color: #000;
 background-color: #F4F4F4;
 font-weight: bold;
 position: absolute;
 border: 1px solid #BCBCBC;
 bottom: 100%;
 margin: 0;
 padding: 5px;
 width: 250%;
}

HTML:


<dl id="officeMap">
 <dt id="monitor">1. moniteur</dt>
 <dd id="monitorDef"><a href="#"><span>Voici mon 17 » moniteur. Je voudrais qu'avoir un écran LCD !</span></a></dd>
 <dt id="phone">2. téléphone</dt>
 <dd id="phoneDef"><a href="#"><span>Cette chose jamais arrêter sonnerie ?</span></a></dd>
 <dt id="case">3. boitier PC</dt>
 <dd id="caseDef"><a href="#"><span>Il s’agit de ma boîte Linux fou ! Vous allez aimer que Linux...</span></a></dd>
 <dt id="notebook">4. IBM ThinkPad</dt>
 <dd id="notebookDef"><a href="#"><span>Voici mon cahier de Linux. Des fous de codage en cours.</span></a></dd>
 <dt id="floppy">5. externe lecteur de disquette</dt>
 <dd id="floppyDef"><a href="#"><span>Lecteur de disquette. Antique... Je sais !</span></a></dd>
</dl>

Bien que ce ne soit pas le plus « ideal » solution là-bas, il élargit certainement les exemples énumérées ci-dessus. J’ai adoré idée de Gina, c’est pourquoi j’ai tenté d’étendre là-dessus. Malheureusement, avec les limitations actuelles de CSS (ainsi que certains navigateurs), je n’ai pas pu répliquer totalement la exactement les fonctionnalités d’exemple de Gina.

Voici un exemple qui utilise les CSS et Javascript. Je suis tombé sur l’un des problèmes sont quand CSS est personnes handicapées, mais Javascript est activé. Il se produit quelque chose de bizarre avec la liste de définition. Si vous savez comment résoudre ce problème, faites le moi savoir. Je serais ravi de le faire fonctionner.

J’ai réussi à venir à travers la carte d’une autre tentative à une image de CSS, qui est vraiment superbe. Malheureusement, en raison des limites de l’IE (plus précisément avec le seul soutien de la :hover effet sur le <a> tag), Il n’est pas compatible multi-navigateurs (encore !).

Si vous avez des questions, préoccupations, et/ou des suggestions d’amélioration, s’il vous plaît n’hésitez pas à m’envoyer une note : frankmanno – at-] gmail [- dot-] com ou laisser un commentaire sur mon blog.

Les exemples ont été avec succès mis à l’essai dans Safari, Firefox (Mac/Win), IE6/Win et Opera 7.5/Mac. Pour une raison étrange, la version Javascript fonctionne dans IE5/Mac, alors que la version non-Javascript n’est pas.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *