1. Zuhause
  2. Frage und Antwort
  3. Auswahl von Bereichen eines Bildes in einem jQuery-Assistenten

Auswahl von Bereichen eines Bildes in einem jQuery-Assistenten

2010-12-28 10 views
1

Ich erstelle einen Assistenten (wirklich, eine verherrlichte Umfrage) mit jQuery Wizard Redux. Ich habe mehrere Bilder (in Illustrator erstellt), aus denen der Benutzer auswählen soll, die als "Vorlage" für jeden Schritt des Assistenten dienen.Auswahl von Bereichen eines Bildes in einem jQuery-Assistenten

z.B. this world map I made in Flash Catalyst.

(Nebenbei bemerkt: Ich möchte der Assistent auf einem ipad/iphone sichtbar sein, damit an dieser Stelle aus dem Flash weg Ich shying)

Ist es möglich, etwas ähnliches mit jQuery/Javascript erstellen? Einige der Regionen sind sehr komplex - zum Beispiel besteht der "Ostasien" -Abschnitt der Karte aus 6 verschiedenen unsichtbaren rechteckigen Knöpfen, so dass (fast) überall in Schwarz als ein Klick für "Ostasien" registriert wird.

Oder gibt es eine einfache Möglichkeit, meine Flash-Catalyst-Dateien (die in MXML codiert sind) in Javascript zu konvertieren?

Quelle

2010-12-28 Jascination

Antwort

3

Sie könnten image map verwenden, indem Sie für jede Region eine map and area elements (Polylinie) definieren.

Update

Ich würde schaffen transparente .png Dateien, die (jeweils eine Region halten) überlagert erhalten und ihre Opazität steuern, wenn auf den Bereich Elemente klicken.

zu überprüfen

Update 2

Sie können das rel Attribut der Region Bilder wie den Wert speichern

<img src="..." id="..." rel="5" />

Jetzt, da wir eine Klasse selected-region definieren, um die ausgewählte Region fügen wir jQuery verwenden können, um das Bild zu zielen mit Diese Klasse, und rufen Sie den Wert in seinem rel Attribut ab.

so, wenn Sie es möchten, können Sie var regionId = $('img.selected-region').attr('rel');

Quelle

2010-12-28 13:36:22

+0

Fantastisch, ich hatte gehofft, es würde eine elegante und einfache Lösung sein! Prost Gaby. Daher habe ich in Dreamweaver einige Imagemaps erstellt (was nach einer peinlichen Anzahl von Stunden, in denen nach solchen Möglichkeiten gesucht wurde, schmerzhaft einfach war). Was ist der beste Weg, um mit dem onClick-Event umzugehen?Ich könnte das gesamte Bild für den neuen Staat tauschen, wo country'x 'ausgewählt wird, aber das scheint eine Verschwendung von Bandbreite zu sein. Ist es möglich, die Opazität einer bestimmten Region onClick einfach zu ändern? – Jascination

+0

@Jascination, Ändern der Opazität eines Teils eines Bildes ist mit normalen Methoden nicht möglich (* muss html5 '' oder ähnliches *) verwenden. Aktualisierte Antwort mit einer möglichen Lösung. Schau mal .. –

+0

Gaby, du bist eine absolute Legende, ich kann dir nicht genug für deine Hilfe danken. Genau das, was ich gesucht habe. Eine letzte Sache - und Entschuldigung für die Frage so viele Fragen, aber jquery/js ist völlig neu für mich - gibt es eine Möglichkeit, eine Variable zu jedem Zustand hinzufügen, so dass ich es als Teil eines Assistenten verwenden kann, so dass es möglich ist mit anderen Selektionen "reden"? d. h. ich möchte, dass der Benutzer 8 oder 9 "Fragen" hat und dann die Ergebnisse an den Benutzer zurückgibt. Grundsätzlich frage ich, wie kann ich eine Variable an jede Region anhängen und sie dann (lokal) speichern, wenn der Benutzer auf "next" klickt? – Jascination

 Verwandte Themen

  • Keine verwandten Themen^_^