CSS ou JavaScript pour mettre en évidence certaines zones de l'opacité de l'image

Je cherche à faire quelque chose de comme ceci mais avec du CSS ou de JavaScript.

J'ai besoin de mettre en évidence d'une certaine partie de l'image, mais tout ce que j'ai trouver est de savoir comment le faire dans Photoshop. Puis-je le faire avec du CSS ou de JavaScript peut-être?

Suis-je encore poser la bonne question?

EDIT:

Bien ici, c'est un grande soumission mais j'ai une question de suivi:

J'en ai besoin pour un appareil mobile et de vues portrait et paysage ainsi pour de nombreux appareils comme: iOS, iPad, Android, WebOS, Etc... de Sorte que la position fixe, je ne suis pas sûr qu'ils vont travailler.

Des conseils?

OriginalL'auteur Phill Pafford | 2011-02-25

  1. 5

    Vous pouvez utiliser background-position avec des divs en position absolue comme suit:

    CSS:

    .container {
    position:relative;
    height:455px;
    width:606px;
}

.container div {
    position:absolute;
    background-image:url(http://www.beachphotos.cn/wp-content/uploads/2010/07/indoensianbeach.jpg);
}

.container .bg-image {
    opacity:0.3;
    height:455px;
    width:606px;
}

.container div.highlight-region {
    height:50px;
    width:50px;
    opacity:0;
}

.container div.highlight-region:hover {
    opacity:1;
}

    HTML:

    <div class="container">
    <div class="bg-image"></div>
    <div class="highlight-region" style="top:50px;left:50px;background-position: -50px -50px;"></div>
    <div class="highlight-region" style="top:150px;left:150px;background-position: -150px -150px;"></div>
</div>

    Veuillez voir http://jsfiddle.net/MT4T7/ pour un exemple

    De crédit à beachphotos.com pour l'utilisation de leur image.

    MODIFIER (réponse à l'OP commentaire): voir aussi http://jsfiddle.net/zLazD/ j'ai éteint le hover aspect. également ajouté quelques frontières.

    CSS changements:

    .container div.highlight-region {
    height:50px;
    width:50px;
    border: 3px solid white;
}

/* removed :hover section */
    Merci, Ouais je veux que l'image de souligner une certaine partie tandis que le reste est sombre mais transparent. J'ai besoin d'une image pour un site mobile et je tiens à les couper vers le bas sur les temps de chargement.
    hmm ne pouvez pas obtenir des exemples de travail
    J'ai juste édité le premier des deux que le dernier a été le meilleur. ci-joint un lien vers un exemple de travail. veuillez noter que, dans mon exemple, les régions seulement de mettre en évidence sur le vol stationnaire.
    ajout d'une "permanence" de la région ainsi
    ouais. Je vois que vous en avez besoin pour mobile. auquel cas, le hover aspect est non-nécessaire. vous avez juste besoin de le point culminant de la région à être bien positionné (pas de changements d'opacité)

    OriginalL'auteur Jonathan Fingland

  2. 1

    Vous pouvez probablement faux, voici un échantillon:
    http://jsfiddle.net/erick/JMBFS/3/

    J'ai couvert l'image avec un élément opaque. La couleur de l'élément est le même que le fond de l'image. Utilisé z-index pour le mettre sur le dessus.

    J'aime bien cette méthode, mais j'ai une question de suivi. C'est pour un appareil mobile, comment puis-je code pour vues portrait et paysage? et sur plusieurs appareils iOS, iPad, Android, etc...
    Dans l'exemple de code, l'image doit toujours se terminer sur le coin en haut à gauche, indépendamment de l'orientation, tant que votre application sur un HTML. Si vous travaillez sur un natif iOS ou Android native app, je ne peux vraiment pas l'aider autant que je ne travaille pas sur ces plates-formes(encore).

    OriginalL'auteur erickb

  3. 0

    Bien sûr que vous pouvez. Par exemple, la plupart des cultures le plugin "mise en valeur" comme la base de leur INTERFACE utilisateur. Donc, pour une complète solution de navigateur, il suffit d'utiliser un plugin existant, comme Jcrop.

    Bien sûr, vous pourriez voulez qu'il soit fixe, dans ce cas vous pouvez par programme dire le plugin qui section pour mettre en surbrillance et que l'utilisateur ne devrait pas être en mesure de le déplacer, et puis il va agir comme un surligneur, pas un métayer.

    OriginalL'auteur davin

  4. 0

    Ce sont les étapes que vous pouvez prendre pour mettre en valeur une partie d'une image:

    1. D'accès à l'image en JavaScript, et d'ajouter dynamiquement des un autre image identique immédiatement après. (cela peut être fait simplement en HTML, mais il allait changer la sémantique de votre balisage)
    2. Position de la seconde image sur la première image
    3. Appliquer un css masque sur la deuxième image, de sorte que seul le "souligné" partie montre jusqu'
    4. Lorsque l'utilisateur survole les images d'un conteneur, régler l'opacité de la première image.

    Je peux fournir plus de détails techniques sur cela plus tard si besoin est.

    OriginalL'auteur zzzzBov