Opmerking:

In Dreamweaver CC en hoger zijn Spry-widgets vervangen door jQuery-widgets. U kunt de bestaande Spry-widgets op uw pagina nog steeds wijzigen, maar u kunt geen nieuwe Spry-widgets toevoegen.

Over de knopinfo-widget

Met de Spry-knopinfo-widget wordt aanvullende informatie weergegeven wanneer een gebruiker met de muis over een bepaald element op een webpagina beweegt. De aanvullende inhoud verdwijnt wanneer de gebruiker niet meer boven het element beweegt. U kunt ook knopinfo instellen om langer geopend te blijven zodat gebruikers iets met de inhoud van de knopinfo kunnen doen.

Een knopinfo-widget bestaat uit de volgende drie elementen:

  • De knopinfo-container. Dit is het element dat het bericht of de inhoud bevat die u wilt weergeven wanneer de gebruiker de knopinfo activeert.

  • De pagina-elementen die de knopinfo activeren.

  • Het constructor-script. Dit is JavaScript dat Spry opdraagt de knopinfo-functionaliteit te maken.

Wanneer u een knopinfo-widget invoegt, maakt Dreamweaver een knopinfo-container met behulp van div-tags en omhult het “trigger”-element (het pagina-element dat de knopinfo activeert) met span-tags. Deze tags worden standaard door Dreamweaver gebruikt, maar de tags voor het knopinfo- en het trigger-element kunnen alle tags zijn, mits deze zich in het hoofdtekstgedeelte van de pagina bevinden.

Denk aan de volgende punten wanneer u met de knopinfo-widget werkt:

  • Een geopende knopinfo wordt gesloten voordat de volgende wordt geopend.

  • Knopinfo blijft in beeld zolang de gebruiker boven het triggergebied beweegt.

  • Er zijn geen beperkingen aan het soort tags dat u kunt gebruiken voor triggers en voor knopinfo-inhoud. (Elementen op blokniveau zijn echter altijd aan te raden, om mogelijke weergaveproblemen tussen verschillende browsers te voorkomen.)

  • Standaard wordt de knopinfo 20 pixels rechtsonder de cursor weergegeven. U kunt de opties voor horizontale en verticale verschuiving in de eigenschappencontrole gebruiken om een ander weergavepunt op te geven.

  • Op dit moment is het nog niet mogelijk om knopinfo weer te geven terwijl een pagina in een browser wordt geladen.

Voor de knopinfo-widget is bijzonder weinig CSS nodig. Spry gebruikt JavaScript om de knopinfo weer te geven, te verbergen en te plaatsen. Andere stijlkenmerken voor de knopinfo kunt u met standaard-CSS-technieken bereiken, volgens de vereisten van de pagina. De enige regel in het standaard-CSS-bestand is een oplossing voor problemen met Internet Explorer 6 zodat de knopinfo boven formulierelementen of Flash-objecten wordt weergegeven.

Zie www.adobe.com/go/learn_dw_sprytooltip_nl voor een uitgebreidere uitleg van de werking van de Spry-knopinfo-widget, inclusief een volledige anatomie van de widgetcode.

Zie www.adobe.com/go/lrvid4046_dw_nl als u een video wilt bekijken waarin wordt uitgelegd hoe u met de Spry-knopinfo-widget werkt.

De knopinfo-widget invoegen

  1. Selecteer Invoegen > Spry > Spry-knopinfo.

Opmerking:

U kunt een knopinfo-widget ook invoegen met behulp van de categorie Spry in het deelvenster Invoegen.

Hiermee wordt een nieuwe knopinfo-widget met een container voor de inhoud van de knopinfo ingevoegd, plus een tijdelijke aanduiding in de vorm van een zin, die als trigger voor de knopinfo dient.

U kunt ook een bestaand element op de pagina selecteren (bijvoorbeeld een afbeelding) en vervolgens de knopinfo invoegen. Wanneer u dit doet, werkt het door u geselecteerde element als de nieuwe trigger van de knopinfo. De selectie moet een volledig tag-element zijn (bijvoorbeeld een img-tag of een p-tag), zodat Dreamweaver er een id aan kan toewijzen, als dat nog niet is gebeurd.

Opties voor knopinfo-widget bewerken

U kunt opties instellen waarmee u het gedrag van de knopinfo-widget kunt aanpassen.

  1. Beweeg het invoegpunt over of plaats het in de inhoud van de knopinfo op de pagina.

  2. Klik op de blauwe tab van de knopinfo-widget om deze te selecteren.

  3. Stel de gewenste opties in de eigenschappencontrole van de knopinfo-widget in.

Naam

De naam van de knopinfo-container. De container bevat de inhoud van de knopinfo. Standaard gebruikt Dreamweaver een div-tag als de container.

Trigger

Het element op de pagina dat de knopinfo activeert. Standaard voegt Dreamweaver als trigger een tijdelijke aanduiding in de vorm van een zin in, omgeven door span-tags, maar u kunt elk element op de pagina met een unieke id selecteren.

Muis volgen

Wanneer u deze optie selecteert, volgt de knopinfo de muis wanneer deze over het trigger-element beweegt.

Verbergen bij muis buiten

Wanneer u deze optie selecteert, blijft de knopinfo geopend zolang de muis over de knopinfo beweegt (zelfs als de muis het trigger-element verlaat). Het is handig om de knopinfo op de voorgrond te houden als deze nog koppelingen of andere interactieve elementen bevat. Als deze optie niet is geselecteerd, sluit het knopinfo-element wanneer de muis het trigger-gebied verlaat.

Horizontale verschuiving

Berekent de horizontale positie van de knopinfo ten opzichte van de muis. De verschuivingswaarde is in pixels, en de standaardverschuiving is 20 pixels.

Verticale verschuiving

Berekent de verticale positie van de knopinfo ten opzichte van de muis. De verschuivingswaarde is in pixels, en de standaardverschuiving is 20 pixels

Vertraging tonen

De vertraging in milliseconden voordat de knopinfo verschijnt nadat deze het trigger-element is binnengegaan. De standaardwaarde is 0.

Vertraging verbergen

De vertraging in milliseconden voordat de knopinfo verdwijnt nadat deze het trigger-element heeft verlaten. De standaardwaarde is 0.

Effect

Het type effect dat u wilt gebruiken wanneer de knopinfo verschijnt. Met Luxaflex worden jaloezieën nagebootst die omhoog en omlaag beweegt om de knopinfo te verbergen en te tonen. Met Vervagen wordt de knopinfo vervaagd en weer getoond. De standaardinstelling is Geen.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid