Aufmerksamkeit zu erregen ist einer der Bestandteile der Verkaufsformel.

A-Aufmerksamkeit – Achtung

Ich – Interesse – Interesse

D – Verlangen – Verlangen

A – Akt – Aktion

Zuerst müssen wir Aufmerksamkeit erregen, dann Interesse und Verlangen wecken und schließlich zum Handeln anregen. Da alles auf dieser Welt auf die eine oder andere Weise mit dem Verkauf verbunden ist, müssen wir jeden Tag die Aufmerksamkeit anderer Menschen auf uns, auf unsere Kreativität, auf unser Produkt, auf unser Geschäft lenken. Um herauszufinden, wie wir das besser machen können, nutzen wir den Rat von Freunden und Kollegen, schauen im Internet, lernen von den Meistern und wenden unsere praktischen Erfahrungen an.

Wie Sie wissen, verändert sich das Leben schnell und täglich und wir können alleine kaum den Überblick über alle neuesten Möglichkeiten und Methoden behalten, um Aufmerksamkeit zu erregen. Heute gibt es in der „Tip Box“ tolle Neuigkeiten für Leser – mit Hilfe interaktiver Fotografie können Sie alle Kanäle Ihrer Werbung nutzen.

Es ist eine bekannte Tatsache, dass Fotos die Aufmerksamkeit erregen, und originelle, interessante und ungewöhnliche Fotos erregen die Aufmerksamkeit noch mehr. Versuchen Sie, einem Foto, Bild oder Bild aktive Links hinzuzufügen, und verwandeln Sie diese so in Informationselemente. Sie wissen nicht wie? Ich gebe Ihnen einen Hinweis.

Dafür gibt es einen hervorragenden Dienst, Thinglink.com. Mit Hilfe dieses Dienstes können Sie jeden Ihrer aktiven Links auf dem Bild platzieren.

Beantworten wir zunächst die Frage: Wer braucht das? Natürlich nicht jeder. Dieser Dienst wird mit großem Erfolg von Künstlern, Musikern, berühmten und beliebten Persönlichkeiten, Online-Shops und Unternehmenswebsites genutzt. Im Großen und Ganzen alle, die sich öffentlich bekannt machen wollen. Im Großen und Ganzen fällt die Liste ordentlich aus.

Wenn Sie etwas zu zeigen haben und darüber sprechen möchten, dann ist dies das Richtige für Sie. Wie Sie sehen, ist alles Geniale einfach: Sie können jedes Bild aufnehmen, Links, Videos, Audiodateien und Ihre sozialen Verbindungen einbetten und es interaktiv gestalten.

Gehen Sie dazu zum ThingLink-Dienst, laden Sie das gewünschte Bild hoch und fügen Sie Links und Tags (Beschreibung) ein. Übrigens sind es Tags, die Ihr Bild attraktiver und damit für die Nutzer aktiver machen können. Je interessanter Sie also eine Beschreibung für jeden Link gestalten, desto mehr Leute werden darauf klicken wollen. Ich habe vor, meine Tags zu bearbeiten, ich hoffe, dass interessante Ideen auftauchen.

Von diesem Service können Sie ein Minimum oder ein Maximum an Möglichkeiten nutzen, so viele, wie Sie benötigen. Selbstverständlich können Sie das so entstandene außergewöhnliche Foto auf jeder Plattform auf Ihrer Website einbetten. Es gibt eine Anwendung, mit der Sie Tabs auf Facebook erstellen können, und noch besser: Sie können im Blog des Dienstes darüber lesen und die notwendigen Methoden in Aktion sehen.

Ich glaube nicht, dass das Erlernen des Dienstes viel Zeit in Anspruch nehmen wird; die Entwickler haben versucht, ein praktisches und zugängliches Tool zum Erstellen ungewöhnlicher Fotos und Bilder zu entwickeln. Es ist gut möglich, dass ich auch einige Momente entdecke, die ich verpasst habe. Aber heute kann ich mich mit einem ungewöhnlichen Foto an der Öffentlichkeit bekannt machen und Ihre Ansichten spiegeln sich sofort in den Statistiken wider. Die Zahl der Klicks und Links wächst sehr schnell. Was mir als Autor der Seite zweifellos gefällt.

Kolleginnen und Kollegen, Sie können diese tolle Werbemethode mit Hilfe eines ungewöhnlichen Fotos in Ihr Arsenal aufnehmen. Ihre Besucher und Leser werden beeindruckt sein!

In der Werkgalerie finden Sie Beispiele für die eigene Umsetzung.

Um Links und Tags auf Ihrer Website zu ändern, hinzuzufügen und zu bearbeiten, müssen Sie ThingLink auf Ihrer Website installieren.

In der kostenlosen Version können Sie 50 Bilder hochladen. Für einige wird das nicht ausreichen, aber für viele von uns ist es meiner Meinung nach für den Anfang völlig ausreichend.

Sie können das Bild oder Foto einer beliebigen anderen Person in Ihre Website einbetten.

Auf einem Gruppenfoto können Sie auf diese Weise verschiedene Personen markieren.

Stimmen Sie zu, Freunde, diese interaktive Technologie ist erstaunlich! Es ermöglicht eine noch größere Verbreitung von Informationen über uns, unsere Interessen, Fähigkeiten, Talente und Vorlieben. Ein ungewöhnliches Foto ist für uns ein hervorragendes Mittel, um für unsere Marke und mehr zu werben. Wie immer ist es wichtig zu wissen, wann man aufhören muss. In einem Beispiel sah ich auf einem großen Foto einen lakonischen Link, der jedoch genau dorthin führte, wo er mehr Aufmerksamkeit erregen musste.

P.S. Hinweis. Auf meinem Blog finden Sie schnell die Informationen, die Sie benötigen

Abschließend finden Sie hier ein Beispiel dafür, wie Sie auf interessante Weise über etwas sprechen können, das dadurch sicherlich die Aufmerksamkeit vieler auf sich ziehen wird.

Guten Tag an alle Leser der aktuellen Publikation. Der heutige Artikel ist dem Thema „Interaktive Bilder“ gewidmet. Dies ist eine recht interessante Technologie, die das Website-Design abwechslungsreich und dynamisch macht. Und das ist einfach eine hervorragende Lösung, um die Aufmerksamkeit der Benutzer auf Ihren Service zu lenken.

Deshalb erkläre ich Ihnen, was interaktive Bilder sind, wo sie häufig verwendet werden und wie Sie ein eigenes, ähnliches Bild erstellen können. Lass uns anfangen!

Was bedeutet also der Begriff „interaktives Bild“? Dabei handelt es sich um ein Bild, das bei der Interaktion mit beliebigen Benutzeraktionen auf eine bestimmte Weise verändert wird.

Tatsächlich stoßen wir buchstäblich jeden Tag auf interaktive Bilder. Einst waren sie in sozialen Netzwerken sehr beliebt. Sie wurden zum neuen Jahr an Freunde und Bekannte verschickt und gratulierten ihnen so zu ihrem Geburtstag und anderen Feiertagen.

Darüber hinaus werden einfache Spiele für Kinder mit der Suche nach Objekten in einer bestimmten Szene, dem Bewegen von Objekten usw. erstellt, die ebenfalls zum beschriebenen Abschnitt gehören.

Wechselbilder eignen sich gut für Präsentationen, da damit beispielsweise einige Details des zu entwickelnden Projekts anschaulich erläutert werden können.

Eine weitere interessante Möglichkeit, diese Art von Bildern zu verwenden, ist die Entwicklung von Apple. Sie beschlossen, bewegte Bilder auf den Desktop ihrer Telefone zu laden. Und mit der Veröffentlichung von iOS 7 wurde dieser Mechanismus nur noch verbessert. Jetzt verwendet das iPhone 7 eine interaktive Ebene, die beim Neigen des Smartphones einen hochwertigen, tiefen Parallaxeneffekt erzeugt.

Interessant sind also „“, das ein Foto ungewöhnlich faltet, wenn Sie mit der Maus darüber fahren (Demo-Beispiel), „Caption Hover-Effekt“, der Informationen zu den Bildern anzeigt, und viele andere. Alle Beispiele finden Sie auf der oben genannten Seite.

Darüber hinaus gibt es weitere Add-ons zur Implementierung von Hover-Effekten mithilfe der jQuery-Bibliothek. Zum Beispiel ein Plugin, das den Haupthintergrund eines Bildes an bestimmten Stellen unscharf macht (so wird ein „Spoiler mit Unschärfe“ implementiert), der Effekt einer Lupe innerhalb eines bestimmten Objekts im Bild usw.

Viele davon sind öffentlich verfügbar. Sie müssen also nur noch den passenden Effekt finden und ihn mit Ihrem Projekt verbinden. Ich möchte Ihnen die Seite weiterempfehlen. Es enthält viele Plugins und Tutorials.

Nun ist es an der Zeit, das interaktive Bild selbst umzusetzen. Dazu habe ich das spektakuläre Plugin „Hover and Click Trigger for Circular Elements“ verwendet. Für eine bessere Schulung lesen Sie den offiziellen Artikel, indem Sie dem Link folgen.

Nun, ich möchte Ihnen meinen Code vorstellen, der nach meinem Geschmack verbessert wurde.

Artikel /* ​​Für zukünftige Arbeiten mit dem Plugin müssen Sie dieses Skript verbinden und den Pfad zur Datei in src */ .pic-circle( width: 470px; display: block; height: 470px; border-radius: 49 angeben %; -webkit -border-radius: 49%; überlauf: versteckter Hintergrund: #dda994 url(http://ru2.anyfad.com/items/t1@be437384-1558- 48a5-9808- 22f0151157ff/KRASIVYE-PLATYa--UKRASHENIE-DLYa-DEVUShEK-I-RADOST-DLYa-MUZhChIN.jpg) keine Wiederholung Mitte rechts; Hintergrundgröße: Cover; Box-Shadow: Einschub 0 0 2px 240px rgba( 0,1, 0,.4), Einschub 0 0 0 7px #ff6970; Umriss: keine; Übergang: Box-Shadow 440 ms Ease-In-Out ) .pic-circle:hover( Box-Shadow: Einschub 0 0 0 0 rgba(0 ,0,0,0.6), inset 0 0 0 17px #FFA07A, 0 0 9px rgba(0,0,0,0.9 ) klik;

Wie Sie sehen, ist alles sehr einfach und sieht toll aus. Dies ist jedoch nur eine Vorbereitungsphase. Das Add-on selbst ist viel leistungsfähiger. Um es zu implementieren, müssen Sie Stile hinzufügen:

Pic-circle-hover( box-shadow: inset 0 0 0 0 rgba(0,0,0,0.6), inset 0 0 0 17px #FFA07A, 0 0 9px rgba(0,0,0,0.9); )

Fügen Sie nach dem Verbinden der Skripte den jQuery-Code ein, der auf der Plugin-Beschreibungsseite unter dem obigen Link angezeigt wird. Das Skript implementiert die Änderung des Cursors in einen Zeiger beim Bewegen der Maus über ein Bild und verarbeitet einen Klick auf das Bild.

Ich habe beschlossen, den jQuery-Code nicht zu duplizieren, sodass Sie ihn von der offiziellen Website kopieren können. Es lohnt sich jedoch, dieser Funktion Aufmerksamkeit zu schenken, da sich die Namen der Klassen geändert haben.

$("#circle").circlemouse(( onMouseEnter: function(el) ( el.addClass("pic-circle-hover"); ), onMouseLeave: function(el) ( el.removeClass("pic-circle-hover "); ), onClick: function(el) ( alarm("clicked"); ) ));

Und am Ende meiner Geschichte möchte ich Ihnen einen lehrreichen Kurs von Evgeniy Popov zu Javascript + jQuery für Anfänger empfehlen. Alles ist detailliert, Schritt für Schritt, kurz gesagt, für Dummies verständlich.

In diesem Artikel erzähle ich Ihnen von einem interessanten und ungewöhnlichen Plugin, mit dem Sie ein interaktives Bild erstellen können. Ich möchte außerdem hinzufügen, dass dieses Plugin völlig kostenlos und stabil ist.

Ein interaktives Bild ist ein Bild mit mehreren aktiven Bereichen. Wenn Sie darauf klicken (oder mit der Maus darüber fahren), wird ein Ereignis ausgelöst, z. B. das Aufrufen eines Links oder das Anzeigen einer Tooltip-Nachricht.

Laden Sie also das ImageLinks Lite-Plugin herunter und installieren Sie es auf Ihrer Website. Sie können das Plugin über den untenstehenden Link herunterladen.

Zunächst erkläre ich Ihnen nur, wie Sie ein interaktives Bild erstellen. Und dann schaue ich mir alle Plugin-Einstellungen an.

Gehen Sie zum Konsolenpunkt „ImageLinks“, der nach der Aktivierung des Plugins erschien, und dann zum Unterpunkt „Neu hinzufügen“. Geben Sie im oberen Feld einen Titel für Ihr interaktives Foto ein.

Scrollen Sie ein wenig nach unten und klicken Sie auf die Schaltfläche „Bild festlegen“.

Vor Ihnen öffnet sich der integrierte WordPress Media Loader, in dem Sie ein bereits heruntergeladenes Bild auswählen oder ein neues Bild von Ihrem Computer hochladen können, das Sie interaktiv machen möchten. Und das ausgewählte Bild erscheint sofort etwas höher in der Vorschau.

Lassen Sie uns dieses Bild nun in ein interaktives Bild umwandeln. Gehen Sie dazu unterhalb der Vorschau auf den Reiter „Hotspots“ und klicken Sie auf das Plus-Symbol, um einen neuen interaktiven Punkt auf dem Bild hinzuzufügen.

Kehren Sie dann zur Vorschau zurück. Oben links erscheint ein Punkt.

Fassen Sie es mit der Maus an und verschieben Sie es an die Stelle im Bild, an der sich der erste interaktive Punkt befinden soll.

Gehen Sie danach zurück zu den Optionen unter der Vorschau, um die Parameter für den Punkt festzulegen. Hier benötigen Sie den Abschnitt „Hotspot-Einstellungen“. Öffnen Sie es und füllen Sie das Feld „Link-URL“ aus, in dem Sie den Link angeben müssen, zu dem Sie gelangen, wenn Sie auf diesen Punkt im interaktiven Bild klicken. Bei Bedarf können Sie die Option „Link in neuem Fenster öffnen“ aktivieren, damit der Link in einem neuen Tab geöffnet wird.

Achten Sie nun auf den Einstellungsblock „Popover-Einstellungen“. Hier können Sie einen Tooltip festlegen, der angezeigt wird, wenn Sie mit der Maus über einen interaktiven Punkt fahren. Aktivieren Sie zunächst die Option „Popover anzeigen“. Geben Sie dann den Inhalt der Eingabeaufforderung unten im Editor ein.

Gehen Sie nun zurück zur Vorschau und klicken Sie auf die Schaltfläche „Vorschau“, um zu sehen, wie es in der Praxis aussehen wird.

Sie sehen Ihr bereits funktionierendes interaktives Bild, in dem Sie den erstellten Tooltip und Link überprüfen können.

Jetzt ist klar, wie man einem Bild interaktive Punkte hinzufügt. Um einen weiteren Punkt hinzuzufügen, klicken Sie auf die Schaltfläche mit dem Plus-Symbol.

Sie können dem Bild beliebig viele Punkte hinzufügen.

Sobald alle Punkte hinzugefügt wurden, klicken Sie auf die Schaltfläche „Veröffentlichen“, um Ihre Änderungen zu speichern und den Shortcode zu verwenden, um dieses interaktive Bild auf Ihrer Website, in Ihren Beiträgen und auf Ihren Seiten zu veröffentlichen.

Nachdem Sie nun allgemein wissen, wie man ein interaktives Bild erstellt, werde ich mir andere Einstellungen und Funktionen des Plugins ansehen. Wie Sie vielleicht bemerkt haben, sind alle Optionen in zwei Registerkarten „Allgemein“ und „Hotspots“ unterteilt. Ich beginne mit den Abschnitten der ersten Registerkarte:

• Bild URL. Stellt einen Link zum interaktiven Bild bereit. Sie können ein Bild aus einer anderen Quelle als Ihrer Website angeben.
• Bildgröße. Bildgröße.
• Sie können ein Thema für die Punkt-Tooltips auswählen.
• Mobile Animation. Aktiviert und deaktiviert die Punktanimation auf Mobilgeräten.
• Popover-Einstellungen. Einstellungen für die Darstellung von Tooltips zu Punkten.
• Benutzerdefinierte CSS. Hier können Sie einen benutzerdefinierten Stil anschließen.

Die Registerkarte „Hotspots“ enthält Optionen für jeden Hotspot. Auf der linken Seite befindet sich eine Liste der erstellten Punkte mit Schaltflächen für die Bearbeitung dieser Punkte – Hinzufügen, Löschen, Kopieren und Verschieben.

Das Hinzufügen von Anmerkungen ist sowohl in russischen als auch ausländischen Online-Publikationen zu einer gängigen Praxis geworden, beliebte und vor allem moderne Dienste für diesen Zweck. Am häufigsten wird nur einer verwendet, der aufgrund seiner Beliebtheit in der kostenlosen Version völlig neue Einschränkungen einführt – Thinglink.

Ein kostenloser Account bei diesem Dienst ist, wie die Entwickler selbst schreiben, in erster Linie dazu gedacht, „die Fähigkeiten interaktiver Fotos zu testen“, wobei die Hauptbeschränkung hier die Anzahl der Aufrufe der darin vorbereiteten Illustration ist – bis zu 10.000 pro Monat. Ein kostenpflichtiges Abonnement – ​​ohne Einschränkungen, mit der Funktionalität integrierter Analysen, Darstellungseinstellungen und dem Fehlen eines Thinglink-Tags – beginnt bei 20 US-Dollar pro Monat und Benutzer. Für Bildungseinrichtungen gibt es, wie es bei Diensten dieser Art häufig der Fall ist, ein günstigeres Angebot – zunächst einmal bedeutet ein kostenloses Konto den gleichzeitigen Zugang für 100 Studierende. Und ein kostenpflichtiges Abonnement ist viel günstiger – 35 $, aber für ein Jahr.

Um die Funktionsweise dieses Dienstes auszuprobieren, reicht uns jedoch zunächst ein kostenloses Konto. Nach der Registrierung beginnen wir sofort mit der Erstellung. Die Benutzeroberfläche der Website ist nicht ins Russische übersetzt. Klicken Sie daher auf „Erstellen“.

Zuerst müssen wir ein Feld für unsere Kreativität auswählen – also Thinglink mit dem gewünschten Foto versorgen. Es kann entweder von Ihrem Computer heruntergeladen oder einfach über einen Link von einer beliebigen Website oder von Facebook oder Flickr importiert werden. Ziehen Sie es einfach von Ihrer Festplatte aus dem Explorer in das Browserfenster.

Danach beginnen wir mit dem Markieren. Die Serviceoberfläche zeigt dem Nutzer alle Möglichkeiten – sowohl kostenpflichtig als auch kostenlos. Allerdings macht er diejenigen, die für Sie unzugänglich sind, entweder in Form von inaktiven Knöpfen oder hängt kleine Schlosssymbole daran. Sie werden dies fast sofort sehen, nachdem Sie mit der Arbeit am Bild begonnen haben.

Beispielarbeit

Algorithmus für die Arbeit mit Thinglink

Zunächst markieren wir einen Punkt auf dem Bild – einfach per Klick auf die gewünschte Stelle. Als nächstes können Sie die Farbe des interaktiven Punktes auswählen. In einem kostenpflichtigen Konto gibt es viel mehr Optionen für Symbole.

Wir ergänzen es mit den nötigen Inhalten. Es gibt viele Möglichkeiten, was wir einem Punkt im Bild hinzufügen können. Dies kann ein weiteres kleines Bild (z. B. ein vergrößerter Ausschnitt eines Fotos), ein Video von beliebten Hosting-Sites, ein Link zu einer Website, freier Text oder Text mit einem Foto über einen Link sein. Mit anderen Worten, viele verschiedene Informationen. Mit einem kostenpflichtigen Abonnement können Sie auch Audioaufnahmen von Soundcloud mit direkter Wiedergabe in einem Popup-Fenster hinzufügen und darüber hinaus den Text in Anmerkungen formatieren, zusätzliche Links und Listen einfügen.

Eine weitere Möglichkeit, Informationen zu einem Punkt hinzuzufügen, besteht darin, direkt im Arbeitsbereich in der oberen linken Ecke danach zu suchen. Der Dienst sucht anhand des von Ihnen angegebenen Schlüsselworts nach Materialien verschiedener Art. Auch hier finden Sie Videos von beliebten Diensten, Ton und andere Informationen.

Das war's, Ihre Arbeit ist erledigt. Natürlich haben wir nur die technischen Möglichkeiten der Ressource selbst berücksichtigt. Nur durch Erfahrung können Sie diese mit Inhalten füllen und interessante Lösungen finden, die für Ihre Zwecke geeignet sind. Da der Dienst recht einfach zu erlernen ist, ist es an der Zeit, mit diesen Experimenten zu beginnen.

Wenn Sie zum Erstellen kommentierter Fotos etwas anderes als Thinglink ausprobieren möchten, können Sie sich die Mockflow-Dienstgruppe ansehen. Hierbei handelt es sich um ein Gesamtpaket an Webanwendungen, zu dem auch AnnotatePro gehört.

Das Funktionsprinzip ähnelt dem bereits oben besprochenen. AnnotatePro ist im RuNet deutlich weniger bekannt, kann aber kaum als wesentlich weniger funktional bezeichnet werden. Vielmehr unterscheidet es sich in einigen Funktionen etwas.

Laden Sie das Bild und beginnen Sie mit der Bearbeitung in einem neuen Fenster, das sich öffnet.

Beispielarbeit

Die Anzahl der Formen und Markierungen, die hinzugefügt werden können, ist hier viel größer. Allerdings kann und sollte nicht jeder von ihnen interaktiv sein. AnnotatePro bietet eine Vielzahl von Pfeilen, geometrischen Formen und sogar Ihren eigenen Text, der in einer Originalschriftart eingegeben werden kann (höchstwahrscheinlich wird der größte Teil des Designs nicht für Kyrillisch verfügbar sein). Alle diese Elemente befinden sich im Menü „Komponenten“ am unteren Rand des Fensters. Nachdem Sie sie dem Bild hinzugefügt haben, können Sie sie weiter anpassen – Farbe, Größe, Linienstärke. Generell ist zu den unbestrittenen Vorteilen dieses Dienstes hervorzuheben, dass Sie hier fast alles an Ihren Geschmack und Ihre Anforderungen anpassen können.

Um einem Klick auf die „Komponenten“ eine bestimmte Aktion zuzuweisen, klicken Sie auf die Schaltfläche „Interaktion hinzufügen“ in der unteren linken Ecke. Anschließend öffnet sich ein Fenster, in dem wir auswählen können, was wir an einem bestimmten Punkt möchten. Folgende Optionen stehen zur Verfügung: Text, Link, Bild, YouTube-Video, Punkt auf der Karte und sogar eine Präsentation vom Slideshare-Dienst. Im fertigen Bild sieht Youtube hier wohl am besten aus – erst wenn man mit der Maus über eine Beschriftung mit einer Videoaufnahme fährt, beginnt die Wiedergabe beim Autostart. Der zugewiesene Link wird leider nicht zu einem Snippet; der Standardtext ist klein und auf einem grauen Hintergrund – dies kann jedoch auch angepasst werden, und das in die Anmerkung eingefügte Bild kann ebenfalls geändert werden.

Was Annotate.Pro radikal von Thinglink unterscheidet, sind die Aufkleber. Ja, ja, hier können Sie Aufschriften wie „OMG!“ oder nur große Emoticons sowie eine Brille und einen Bart für das Porträt einfügen. Darüber hinaus kann jeder dieser Aufkleber auch interaktiv sein.

Wer schließlich nicht über die oben genannten Funktionen verfügt, kann einfach beliebig auf dem Bild zeichnen oder Effekte hinzufügen – etwa Pixelierung, Lupe, Unschärfe.

Für Unabhängige

Wenn Sie aus dem einen oder anderen Grund gegen die Nutzung von Webdiensten sind und es vorziehen, alles auf der Grundlage der Funktionen der Website selbst zu tun, können Sie für viele CMS das Open-Source-Projekt Annotorious verwenden. Dies ist eine kostenlose Anwendung, die Sie auf Ihrer Website installieren müssen. Welche Funktionen es bietet, können Sie im Demo-Bereich der Entwicklerressource sehen.

Und natürlich können Sie nach beliebten Plugins für Ihre Plattform suchen, mit denen Sie wahrscheinlich sowohl Text als auch Bildern auf Ihrer Website Anmerkungen hinzufügen können.