1 image 2 liens

comment rendre une image cliquable en HTML dans les différents domaines de l'image et de conduire à des URL différentes... par exemple, j'ai une image ou d'un "bouton" qui est 1 image, mais je veux vraiment être 2 liens... d'un côté du bouton "sign up", tandis que l'autre côté est "essayer"

Strictement par curiosité, aucune raison de ne pas couper l'image dans un programme de retouche d'image et d'avoir 2 images, chacune avec leurs propres ancres? La texture de l'image (ci-dessous) fonctionnent bien. Comme je l'ai dit, juste curieux 🙂
Pour l'un, de plusieurs images, plusieurs demandes par le navigateur. Donc par exemple, si vous avez des images pour obtenir une liste des numéros de 1 à 10 (dans la pagination), de son mieux pour avoir une seule image avec une image de la carte.
Si vous utilisez les images "pour une liste de numéros de 1 à 10", puis vous faites quelque chose de mal.
Je suis d'accord :). Cependant, juste pour l'amour de l'extension de l'argument, que si je veux une fantaisie de police ET ne veulent pas dépendre du navigateur de support des polices. Ou si je suis le développement de certains non-pages en anglais et encore, ne veux pas en dépendre client ayant le droit de polices de caractères. Il y a bien sûr de meilleurs exemples pour justifier de l'image des cartes, mais comme vous pouvez l'imaginer, je voulais juste protéger ma position ayant été pris par gaurd 😉
Vous pouvez utiliser les sprites CSS et vous ne le font 1 demande vers le serveur.

OriginalL'auteur Ryan Murphy | 2010-11-29

  1. 3

    Utiliser les feuilles de style CSS sprites

    Je pense que la meilleure façon est d'utiliser des CSS sprite: http://www.jsfiddle.net/pereskokov/vVhde/1/.
    Principal avantage de l'utilisation de votre image ne sera pas une partie du contenu, c'est juste de la décoration. Votre contenu sera accessible. Aussi, vous pouvez facilement changer la décoration de votre site via css et utiliser une autre image.

    À l'aide de map n'est justifiée que lorsque l'image est une partie du contenu — par exemple, il est véritable carte 🙂

    HTML

    <a href="#login" title="Log In" id="login"><span></span>Log In</a>
<a href="#signin" title="Sign In" id="signin"><span></span>Sign In</a>

    CSS

    #login, #signin {
    width: 50px;
    height: 27px;
    overflow: hidden;
    position: relative;
    display: block;
    float: left;
}

#login span {
    width: 50px;
    height: 27px;
    position: absolute;
    top: 0;
    left: 0;
    background: url(http://dl.dropbox.com/u/5988007/sprite.png) 0 0 no-repeat;
}

#signin span {
    width: 50px;
    height: 27px;
    position: absolute;
    top: 0;
    left: 0;
    background: url(http://dl.dropbox.com/u/5988007/sprite.png) -50px 0 no-repeat;
}

    OriginalL'auteur

  2. 11

    Utiliser le code HTML de l'image des cartes: http://www.javascriptkit.com/howto/imagemap.shtml

    Exemple:

    <img src="button.gif" usemap="#yourmap" border="0">
<map name="yourmap">
<area shape="rect" coords="0,0,50,50" href="http://www.yoursite.com/link1.html">
<area shape="rect" coords="50, 0, 100, 100" href="http://www.yoursite.com/link2.html">
</map>
    Vous pouvez également créer arbitraire des polygones, cercles, etc au lieu de rectangles.
    De vérifier ça aussi: w3schools.com/tags/tryit.asp?filename=tryhtml_areamap peut-être que ça va venir dans maniable.

    OriginalL'auteur