Set Image URL Handledning för GoLive CS
|
|
Also available in English • Back to Tutorials and Links Content
|
|
Den Action som heter Set Image URL används oftast för att länka från en mini-bild eller en knapp till en större bild som visas på ett annat ställe på sidan. Se ett exempel här.
Så här sätter du upp Set Image URL i GoLive CS:
|
|
Vi förutsätter att du redan har de bilder du vill använda för sidan. Du behöver dem i två versioner: en större, och en minibild.
Arbeta alltid inifrån sitefilen i GoLive CS.
1. Skapa en ny sida och spara den.
2. Gör din grundlayout, i en tabell eller som grid eller på vilket annat sätt du brukar göra din sidlayout.
|
OBS: Du får normalt bäst resultat om dimensionerna på alla de större bilderna är desamma som platshållarbildens eller åtminstone höjden eller bredden. Skala INTE om bilderna i GoLive om platshållarbildens dimension är satt med pixels.
Handboken tipsar om att man faktiskt KAN visa bilder av olika dimensioner om man sätter dimensionerna för platshållarbilden till "Image" i Inspectorn istället för pixels. Se exempel här.
Om du vill att dina besökare ska se de större bilderna snabbare, lägg till en Preload action. Hur du gör detta beskrivs här (på engelska). Eller se tips nedan.
|
|

|
3. Placera den större bild du vill starta med på din sida där du vill ha den på sidan.
4. Markera den större bilden, gå till Inspector och i fliken Basic, nedtill i paletten, hitta fältet för Name/ID.
Du kan antingen skriva in ett namn för bilden eller välja Name & ID från dropdown menyn bredvid fältet för att automatiskt få ett namn tilldelat till bilden. Om du låter GoLive ge bilden ett namn kan det kanske bli lite kryptiskt. Om du själv skriver in ett namn, kom ihåg att ALDRIG börja namnet med en siffra (om namnet börjar med en siffra så kommer den action vi ska använda inte att fungera).
Namnet du ger bilden här ger Set Image URL den information den behöver för att veta var på sidan de större bilderna ska visas. Samma namn används om och om igen för att tala om för varje använd minibild var den större bilden kommer att visas.
5. Placera nu din första minibild på sidan.
6. Markera minibilden.
|
 |
7. Med minibilden markerad, gå till fliken Link i Inspectorn och ge bilden en länk.
I fältet för url skriver du #. Det är allt du behvöer göra i den här paletten.
|
|

|
8. Med bilden fortfarande markerad, ta fram paletten Rollovers & Actions och gå till fliken Actions.
9. Välj vid vilken händelse Event du vill att något skall hända, exempelvis Enter eller Click eller valfri händelse i listan.
Den mest använda händelsen för just denna Action är Enter (ofta kallad MouseOver) vilken gör så att den stora bilden visas automatiskt på vald plats på sidan när du rullar över den lilla bilden med din pekare, eller Click, som om du väljer den betyder att du måste klicka på den lilla bilden innan den stora bilden visas.
10. Klicka därefter den lilla knappen (ser ut som ett litet block med et invikt hörn på översta sidan) för Create New Action nedtill i Actions fältet.
|
 |
11. Markera symbolen för den nya generiska action du just lagt till i Actions fältet.
I dropdown menyn Action (den med en liten nedåtriktad pil på) välj Image, Set Image URL.
12. I den palett som då visas, klicka knappen vid Image och välj namnet för den stora bilden som du tidigare namngav med Name och ID. I Link fältet länkar du sedan till den större bild som du vill visa på den namngivna platsen. Som startbild/första bild, välj den större bild som du redan placerat på sidan.
Den röda buggen visas i Action-paletten så länge du inte gjort alla inställningar för den Action du arbetar med.
För att skapa ytterligare bildväxlingar, gå vidare till steg 13 och och genomför steg 13 - 20 för samtliga ytterligare bildväxlingar du vill skapa.
|
 |
TIPS
Om du vill att någonting specifikt ska hända när markören förflyttas ut från den lilla bilden så kan du lägga till ytterligare en Action till den.
Fortsätt att ha den lilla bilden markerad.
Välj den händelse /Event/ som ska aktivera någonting från listan till vänster. För att något ska hända när markören flyttas bort från den lilla bilden väljer du Mouse Exit.
Klicka ikonen till vänster om soptunnan i paletten för att få en ny, generisk Action tillagd till den lilla bilden.
Använd knappen för dropdown menyn för Actions för att välja en Action.
Gör inställningar för den Action du valt.
Klart.
Repetera detta på alla de små bilder du vill ha det på.
|
|

|
13. Placera nästa minibild på din sida.
14. Markera minibilden.
15. I Inspector gå till fliken Link och ge bilden en länk. I url-fältet för länk, skriv #.
16. Med bilden fortfarande markerad, aktivera Rollovers & Actions paletten och gå till fliken Actions.
17. Välj den händelse/event du vill ha för denna action, som Enter eller Click eller någon annan ur listan.
18. Klicka sedan den lilla knappen för Create New Action.
19. Markera den nyss skapade action i Action-fältet och välj i dropdownmenyn Action valet Image, Set Image URL.
20. I den palett som visas, klicka på knappen vid Image och välj den namngivna bildplacering du tidigare skapat och länka därefter vid Link till nästa bild du vill visa vid den placeringen.
Repetera steg 13 20 för alla bilder du vill visa på det här sättet.
|
|
Kontrollera resultatet genom att förhandsvisa i en riktig webbläsare innan du laddar upp sidan och bilderna, så att det motsvarar det du tänkt dig.
|
|
TIPS: Om du har många bilder att förhandsladda, kan du ladda hem och använda en gratis action som heter MultiPreload och kommer från MindPalette som förhandsladdar upp till 20 bilder samtidigt. Hämta den här. Den finns både för Mac OS och Windows. En beskrivning (på engelska) över hur den används följer med.
|
|
Se ett exempel på användningen av Set Image URL här.
|