2009-12-13 14 views
9

Ich betreibe eine kleine Webseite, die Benutzer auf verschiedene Links mit Bildkarten klicken können. Ich möchte den Abschnitt markieren, auf den ein Benutzer klickt, um dem Benutzer ein Feedback zu geben (er kann schnell auf verschiedene Teile klicken).Markieren Sie einen Abschnitt eines Bildes in JavaScript

Gibt es eine Möglichkeit, einen kleinen Ausschnitt eines Bild-JavaScript zu invertieren (oder anderweitig hervorzuheben)?

Danke,

+0

Es gibt, aber bitte genauer über die Größe des Gebiets und wie Sie das Gebiet bestimmen. Es ist nur ein Quadrat, wo sie klicken oder gibt es nur bestimmte Bereiche? Willst du nur eine Box zeichnen, wo sie Image Map war? –

Antwort

13

Statt Image-Maps verwenden, können Sie diese CSS-Methode versuchen:

Verwenden Sie einen transparenten <div> auf der jeweils "Bild-Karte" Teil (Link), und dann die CSS :hover Pseudo-Klasse, um die Hervorhebung zu behandeln.

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> 

Beachten Sie, dass dies nur für rechteckige Links funktionieren.

+1

+1 für die reine CSS-Option, auch wenn das Bild nicht invertiert wird. –

+0

+1 sehr clevere Lösung – Xavi

+0

Danke, es funktioniert. Für a-Links habe ich "display: block" und margin-top & margin-left statt top & left verwendet, also sind die Koordinaten relativ. –

7

Werfen Sie einen Blick auf jQuery MapHilight.
Ich bin mir nicht sicher, dass es genau das tut, was Sie brauchen, aber Sie können das mit kleinen Feinabstimmungen erreichen.

+0

+1 nettes Plugin! –

+1

Siehe dieses Beispiel für die Verwendung von MapHilight: http://StackOverflow.com/a/17614118/2313371 –

0

Wie wäre es, einen halbtransparenten <DIV> Block über den angeklickten Bereich zu legen, um ihn zu markieren?

0

Es gibt viele Wege,

In einer d Art und Weise Art und Weise, brechen Sie Ihre Bilder in viele kleinere Stücke und mit Tisch, sie zu kombinieren. Danach JavaScript verwenden, um thr "src" Attribut für den Hervorhebungseffekt zu ersetzen.

In einer anderen CSS-Methode verwenden Sie CSS, um die Alt abschneiden. Bild oben auf dem Original und steuern, welcher Bereich sichtbar sein soll.

Es ist besser, ein einzelnes Bild für alle zu haben, anstatt viele kleine Bilder zu beschleunigen und der Benutzer wird es ohne Verzögerung durch das Netzwerk bekommen.

Verwandte Themen