Mettre en surbrillance une section d'une image en JavaScript

Je lance une petite page Web qui permet aux utilisateurs de cliquer sur différents liens en utilisant des images cliquables. Je voudrais mettre en évidence la section sur laquelle l'utilisateur clique pour donner quelques commentaires à l'utilisateur (il peut cliquer sur plusieurs parties différentes rapidement).Mettre en surbrillance une section d'une image en JavaScript

Y a-t-il un moyen d'inverser (ou de surligner d'une autre manière) une petite section d'une image JavaScript?

Merci,

Source

2009-12-13 Joe

Il y a, mais s'il vous plaît être plus précis sur la taille de la zone et comment vous déterminez la zone. Il s'agit juste d'un carré autour duquel ils cliquent ou y a-t-il seulement des zones particulières? Voulez-vous simplement dessiner une boîte où se trouvait la carte d'image? –

Au lieu d'utiliser des cartes d'image, vous pouvez essayer cette méthode CSS:

Utilisez un <div> transparent sur le dessus de chaque partie "image-carte" (lien), puis utilisez les CSS Pseudo-classe :hover pour gérer la surbrillance.

CSS:

#image { 
    position: relative; 
    width: 400px; 
    height: 100px; 
    background-image: url(image_map.png); 
} 

#map-part { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    width: 50px; 
    height: 50px; 
    background-color: transparent; 
} 

#map-part:hover { 
    background-color: yellow;   /* Yellow Highlight On Hover */ 
    opacity: 0.2; 
    filter: alpha(opacity=20);  
}

HTML:

<div id="image"> 
    <a id="map-part" href="http://www.example.com/"></a> 
</div>

Notez que cela ne fonctionne que pour des liens rectangulaires.

Source

2009-12-13 09:40:29

+1 pour l'option CSS pure, même si elle n'inverse pas l'image. –

+ 1 solution très intelligente – Xavi

Merci, ça a marché. Pour les liens a, j'ai utilisé "display: block", et margin-top & margin-left au lieu de top & left, donc les coordonnées sont relatives. –

Jetez un coup d'œil à jQuery MapHilight.
Je ne suis pas sûr qu'il fasse exactement ce dont vous avez besoin, mais vous pouvez y parvenir avec des ajustements mineurs.

Source

2009-12-13 09:42:13 Kobi

+1 joli plugin! –

Référez-vous à cet exemple pour utiliser MapHilight: http://stackoverflow.com/a/17614118/2313371 –

Que diriez-vous de superposer un bloc semi-transparent <DIV> sur la zone cliquée pour le mettre en surbrillance?

Source

2009-12-13 09:42:28

Il y a beaucoup de chemin,

En d manière de la mode, briser vos images en plusieurs petits morceaux et en utilisant le tableau de les combiner. Après cela, en utilisant javascript pour remplacer thr "src" attribut pour l'effet de surbrillance.

D'une autre manière CSS, utilisez CSS pour découper l'alt. image sur le dessus de l'original, et contrôler quelle zone devrait être visible.

Il est préférable d'avoir une seule image pour tous plutôt que de nombreuses petites images à accélérer et l'utilisateur l'obtiendra sans délai par le réseau.

Source

2009-12-13 09:44:35

Mettre en surbrillance une section d'une image en JavaScript

Répondre

Questions connexes