Schweben und klicken Sie auf CSS-Dreieck

Ich habe ein Dreieck mit einer javascript-Funktion, bewegt sich das Bild.

Das Problem ist, dass das element hat eine quadratische Form, so Klick und hover-Zustand ausgelöst werden, außerhalb des Dreiecks (siehe Roter Rahmen im folgenden Bild) :

Wie kann ich verhindern, dass schweben und klicken Sie außerhalb des Dreiecks Form und ermöglichen click/hover-Zustand nur innerhalb des Dreiecks-Form?

Ist das eine gültige Lösung? fileformat.info/info/unicode/char/25b2/index.htm
Frambach leider Nein, aber danke für die Idee
Ist dieses Bild ein PNG mit einigen transparenten Teile? Sie sind auf der Suche um zu erkennen, ob die pixel der Benutzer geklickt hat, ist transparent oder Opak? Kann das Bild etwas, oder ist es immer ein Dreieck genau dieser Form?
Ich kenne eine Lösung für Sie, aber könnten Sie fügen Sie einige code, um in der Lage zu verstehen, Ihr problem?
ok, danke für die Antwort, hier das fiddle: jsfiddle.net/EdB27/1

InformationsquelleAutor gn66 | 2014-06-06

14

Zu verhindern schweben und klicken Sie außerhalb des CSS-Dreieck können Sie verwenden verwandelt, um den das Dreieck.

Diese Technik ist hier beschrieben : CSS-Dreiecke mit Transformation drehen

Der Punkt ist, verwenden Sie einen wrapper mit verstecktem überlauf, und drehen Sie den klickbaren/hoverable-element so, daß es tatsächlich hat eine dreieckige Form und verhindern, dass das Ereignis click oder hover-Status außerhalb des Dreiecks.

Demo: Klicken Sie auf und bewegen Sie die Maus über eine CSS-Dreieck

CSS:
```
.tr {
  width: 40%;
  padding-bottom: 28.2842712474619%; /* = width /sqrt(2) */
  position: relative;
  overflow: hidden;
}
.tr a {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 122, 199, 0.7);
  transform-origin: 0 100%;
  transform: rotate(45deg);
  transition: background-color .3s;
}
/** hover effect **/
.tr a:hover {
  background: rgba(255, 165, 0, 0.7);
}
```
HTML:
```
<div class="tr"><a href="#"></a></div>
```
Ein anderer Ansatz wäre, eine SVG mit einem anklickbaren Dreieck :

CSS:
```
#tr{
  fill:transparent;
  transition:fill .3s;
}
#tr:hover{
  fill: orange;
}

/** for the demo **/
html,body{height:100%;margin:0; padding:0;}
body{background:url('https://farm8.staticflickr.com/7435/13629508935_62a5ddf8ec_c.jpg') center no-repeat;background-size:contain;}
svg{display:block;width:30%;margin:0 auto;}
```
HTML:
```
<svg viewbox="-2 -2 104 64">
  <a xlink:href="#">
    <polygon id="tr" points="50 0 100 60 0 60" fill="transparent" stroke="darkorange" stroke-width="2"/>
  </a>
</svg>
```
- Ok, wirklich vielen Dank, über die Antwort, ich habe ein Upgrade hier: jsfiddle.net/EdB27/2 für Sie zu sehen alles funktioniert Prima, nur eine Sache, die ich brauchen, wenn es Ihnen nichts ausmacht, können Sie integrieren dieses Bild in den code? static.tumblr.com/g1c47pc/7iMn39g0v/tr1.png , ich bin wirklich nicht gelingt, integrieren Sie ein Bild, um den code, den Sie bisher gemacht habe :S
- ok, ich habe es getan: jsfiddle.net/H8g3j/1 trotzdem Danke...
- froh, dass Sie eine Lösung gefunden!
- funktioniert in chrome, aber es funktioniert nicht in iceweasel (standard-browser in der letzten linux-ccrunchbang version) 24.5.0...
- Sie hat mich bemerkt, dass ich einen Tippfehler gemacht für nicht webkit-oder ms-Browser, fixiert, dass ich Tippfehler und hoffe, es wird auch fix it in iceweasel
InformationsquelleAutor web-tiki
4

Sollten Sie in der Lage sein, um Sie nur ein Bild anzeigen. Erstellen Sie einfach eine poly deckt, dass das Dreieck durch die Einstellung der Koords zu (w/2, 0), (w, h), (0, h) wo w und h sind Breite und Höhe. (Ausgehend von einem gleichseitigen Dreieck, wie in deinem Beispiel. Ansonsten finden Sie einfach die Punkte mit einem Bild-editor.)
```
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/Green_equilateral_triangle_point_up.svg/600px-Green_equilateral_triangle_point_up.svg.png"
     width="60" height="52"
     usemap="#imgmap" />

<map name="imgmap">
    <area href="javascript:alert('Triggered')"
          shape="poly"
          coords="30,0,60,52,0,52"
          style="outline:none;"
          target="_self" />
</map>
```
Demo: http://jsfiddle.net/QXv2c/
- Hallo, kann u sehen, was läuft hier falsch? jsfiddle.net/QXv2c/1
- Ich habe Feste Ihren JSFiddle hier: jsfiddle.net/QXv2c/2. Sie hatte nicht enthalten, die MoverBehaviour und es wurde kein element mit der id "mich". Außer, dass es war in Ordnung.
InformationsquelleAutor freshtop
3

Sollte dies funktionieren: (basierend auf Brian Nickel die Antwort zu einer weiteren Frage)
```
$('#triangle').mousedown(function(e) {
    e.preventDefault();

    //create matching canvas representation for the image
    if(!this.canvas) {
        this.canvas = $('<canvas/>')[0];
        this.canvas.width = this.width;
        this.canvas.height = this.height;
        this.canvas.getContext('2d').drawImage(this, 0, 0, this.width, this.height);
    }
    var pixelData = this.canvas.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;

    //check that the pixel is not transparent
    if (pixelData[3] > 0) {
        //your code
    }
});
```
Beispiel: http://jsfiddle.net/FCf9d/

Diese Lösung setzt allerdings Voraus, dass keine transparenten Pixel im Innern des Dreiecks.

Dieses Beispiel verwendet die jsfiddle-logo statt eines Dreiecks, da Sie nicht verwenden können, remote-Bilder. Der jsfiddle-logo funktioniert, weil es auf der jsFiddle-Domäne, aber alle anderen random image funktioniert nicht.

Aber das sollte nicht das problem sein, sobald Sie implementieren Sie den code auf Ihrer eigenen website.

Ich nahm mir die Freiheit hinzuzufügen, move-Funktion, um die Geige für Sie, damit Sie alles sehen konnte, in Aktion. Wenn Sie wie mein Skript und möchte hinzufügen Grenzen, um das verschieben-Bereich, ein weiteres fiddle von mir, das diese build-in: http://jsfiddle.net/SN8Ys/

InformationsquelleAutor myfunkyside

Genommen von CSS-tricks. Dies ist eine saubere Lösung aber ich bin mir nicht sicher über das Klick-Teil. Vielleicht können Sie es verwenden, um die Maske über das, was Sie haben.

HTML:

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

CSS:

.arrow-up {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    border-bottom: 5px solid black;
}

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;

    border-top: 20px solid #f00;
}

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;

    border-left: 60px solid green;
}

.arrow-left {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 

    border-right:10px solid blue; 
}

Quelle: http://css-tricks.com/snippets/css/css-triangle/

Trotz der Titel, es scheint, dass der OP hat bereits das Dreieck. Die Frage ist, Klick auf: "gibt es eine Möglichkeit zu verhindern, dass meine Maus wählen Sie den roten Teil?"
Ja, das ist es, danke, ich werde es Bearbeiten.
Die Frage, die der Titel ursprünglich angegeben eine CSS-Dreieck. Es hat sich seit bearbeitet.

InformationsquelleAutor TheBokiya

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.