Gör popup -text på instruerbara bilder: 7 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:47

Bilder på Instructables har en funktion där de dyker upp text när du flyttar musen över konturerade områden på bilderna. Detta används för att märka särskilt intressanta delar av bilden. Det är en ganska trevlig funktion, och någon frågade exakt hur sådant görs, så här är en instruerbar.:-)

Tyvärr är denna instruerbara för det mesta föråldrad

Steg 1: Utgångspunkt

Här är vi på en typisk instruerbar "utforska" sida. Jag är inloggad under min

instructables användarnamn, förstås. Klicka på länken "ladda upp bilder" för att komma till ditt bildbibliotek.

Steg 2: Gå till bildbibliotek

Förmodligen har du redan laddat några bilder, baserat på den andra som kan instrueras av "något". Klicka på "image libary" -länken för att komma till sidan som visar de filer du redan har laddat upp.

Steg 3: Välj en bild

Välj och klicka på bilden du vill lägga till popup -text till.

Detta kommer att växla Instructables till "bildredigering" -läge med standardupplösningen. Du kommer att vara i samma typ av "bildredigeringsläge" när du lägger till en bild i en instruktionsbok du skapar eller redigerar, så att du inte behöver lägga till popup -fönster direkt efter uppladdning, separat från att ange en instruerbar. Faktum är att det förmodligen är mer meningsfullt att göra det som en del av det instruerbara skapandet (de återstående stegen är alla desamma), där du har kontexten för din … text.

Steg 4: Skapa mus-över-området

Klicka på en punkt och dra till det andra hörnet av en rektangel som innehåller den del av bilden där du vill ha popup-text.

Steg 5: Lägg till texten

När du släpper musknappen kommer instruktionsredigeraren att dyka upp en ruta som du kan fylla med text.

Steg 6: Klar?

Klicka på "spara" när du har skrivit in texten. Eller klicka på Avbryt om du bestämmer att rutan är på fel plats och vill försöka igen. En enda bild kan ha mer än ett mus-över-område; Jag vet inte om det finns någon verklig gräns. Läsbarhet kräver ett relativt litet antal. Jag tycker att det är användbart att göra lådorna betydligt större än objektet de markerar, Det gör dem mer uppenbara och lättare att välja. Områden kan överlappa varandra, även om du ganska mycket måste välja en från en icke-överlappande del. Och du kan inte ha ett område helt inuti ett annat; bara den yttre lådan fungerar. (Några av bilderna i denna instruerbara kan se ut som om de har en låda inuti en annan, men de är egentligen bara en låda utanför en skärmdump som innehåller bilden av en mindre låda.)

Steg 7: Är det inte snyggt?

Popup-texten med muspekaren bör fungera vid denna tidpunkt.

Observera att popup-texten är associerad med BILDEN, inte med en särskild instruerbar. Om du har flera instruktioner som innehåller samma bild kommer popup-områdena att visas i dem alla om det är lämpligt eller inte. Om du vill ha samma bild på olika platser med olika popup -text måste du ladda upp bilden flera gånger. (Bilden i det här steget är ett exempel; den används också i "intro" -steget, där popup-fönstret inte är helt lämpligt.)