View Categories

Hoe hotspots gebruiken om informatie, afbeeldingen of video's te tonen

In de vorige les hebt u geleerd hoe u gemakkelijk hotspots kunt toevoegen aan een scène.

In deze WP VR-les leert u hoe u een hotspot kunt gebruiken om informatie, afbeeldingen of video's op uw virtuele tour weer te geven.

Hotspot Type #

Bij het opzetten van een hotspot, zul je zien dat je aan de rechterkant een optie hebt om hotspot type te selecteren.

Type hotspot

Meestal zijn er twee soorten hotspots:

  • Info
  • Scène

Maar u kunt nog twee types krijgen als u de Addon voor Fluent Forms Integratie of de Addon voor WooCommerce Integratie gebruikt.

Om Informatie, Afbeelding of Video's weer te geven, moet u het Info-type hotspot kiezen, dat standaard geselecteerd is wanneer u een nieuwe hotspot toevoegt.

Info Type hotspots

Onder de hotspot Info type vindt u drie velden,

  • URL
    Hier kunt u een URL plaatsen zodat, wanneer iemand op de hotspot klikt, hij naar die site gaat in een nieuw tabblad.
  • Op Klik Inhoud
    Hier kunt u HTML-tags gebruiken om tekst, afbeeldingen of video's weer te geven.
    Ze verschijnen wanneer op de hotspot wordt geklikt.
  • On Hover Content
    Hier kunt u HTML-tags gebruiken om tekst, afbeeldingen of video's weer te geven.
    Ze verschijnen wanneer iemand met de muis over de hotspot beweegt.

**U kunt de On Hover Content en de On Click Content tegelijkertijd gebruiken.

**U kunt URL en On Click Content echter niet tegelijkertijd op één hotspot gebruiken.

Nu, laten we leren hoe ze te gebruiken om

  • Informatie over een hotspot weergeven
  • Afbeeldingen weergeven op een hotspot
  • Video's weergeven op een hotspot

Informatie over een hotspot weergeven #

Als u tekst wilt weergeven op een hotspot wanneer erop wordt geklikt, volgt u de onderstaande stappen.

1. Use the paragraph tag, <p> </p>, and input a text in the On click Content field.

Bijvoorbeeld:

<p>This bed is soft and comfortable.</p>

2. You can also use the <div> </div> tags or apply CSS style to it.

Bijvoorbeeld:

<div style="margin: 10px 10px"><p style="color: green;">This bed is soft and comfortable.</p></div>
Info type hotspot - On Click Content

3. Klik vervolgens op Voorbeeld, en in het Tour-voorbeeld kunt u de tekst zien wanneer u op de hotspot klikt.

Info type hotspot - On Click Content

Als u tekst wilt weergeven op een hotspot wanneer u er met de muis overheen gaat, volgt u de onderstaande stappen.

1. Voeg een tekst in in het veld On hover content.

Bijvoorbeeld, "Master Bed 1"

*You do not need to add a paragraph tag as it is automatically set to a <p> tag by default.

2. You can use the <div> </div> tags and apply CSS style to it. In this case, we advise you use the <p> tag.

Bijvoorbeeld:

<div style="margin: 10px 10px"><p style="color: green;">Master Bed 1</p></div>
Info Type Hotspot - Op hover tekst

3. Klik dan op Voorbeeld, en in het Tour Preview kunt u de tekst zien wanneer u met uw muis over de hotspot gaat.

Info type hotspot - On Hover Inhoud

Afbeeldingen weergeven op een hotspot #

Misschien wilt u een afbeelding op een hotspot weergeven wanneer u erop klikt of wanneer u de muisaanwijzer ingedrukt houdt.

Volg de onderstaande stappen.

1. Bereid een codefragment voor met de HTML-broncode, img src.

Hier is een voorbeeld:

<img src="https://www.mywebsite.com/2020/10/exampleimage.png" width="300" height="300">

**Kopieer dit fragment en vervang de URL door de URL van de afbeelding die u wilt gebruiken, en stel de juiste breedte en hoogte in.

2. Plak het codefragment op de On Click Content of de On Hover Content.

Info type hotspot - Beeld

3. Klik dan op Voorbeeld en test het uit op de Tour Preview.

Bij gebruik op On Click Content zal de afbeelding verschijnen wanneer op de hotspot wordt geklikt.

Info type hotspot - op klik afbeelding

Bij gebruik op On Hover Content zal de afbeelding verschijnen wanneer de muis op de hotspot wordt geplaatst.

Video's weergeven op een hotspot #

Misschien wilt u een Youtube-video weergeven op een hotspot wanneer u erop klikt of wanneer u de muisaanwijzer ingedrukt houdt.

Volg de onderstaande stappen.

1. Ga naar de video die u wilt weergeven en verzamel de insluitlink.

Video embed link verzamelen

Het zal een iframe link zijn zoals hieronder getoond.

<iframe width="560" height="315" src="https://www.youtube.com/embed/OpkIIzcJ3uA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

**Wijzig de breedte en hoogte volgens uw wensen.

2. Plak de link op de On Click Content of de On Hover Content.

Info Type hotspot - on click video

3. Klik dan op Voorbeeld en test het uit op de Tour Preview.

Bij gebruik op On Click Content zal de video verschijnen wanneer op de hotspot wordt geklikt.

Info type hotspot - op klik video

Bij gebruik op On Hover Content zal de video verschijnen wanneer de muis over de hotspot wordt bewogen.

Dat is het. Zo eenvoudig kunt u informatie, afbeeldingen of video's weergeven op een virtuele tour, met behulp van hotspots.