Undervisningsmaterial Webbdesignövning

Rollover i GoLive

1. Skapa bilderna som skall ingå i rollovern
2. Skapa rollover-effekten
3. Rollover med eget script

Vad är en rollover?

GoLive och andra grafiska program för hemsidor är utrustade med möjligheter att styra objekt och händelser på webbsidan med hjälp av olika actions (händelser). På svenska säger man ibland "händelser" eftersom objekten påverkas av det besökaren gör, t.ex för muspekaren över eller klickar på det.

Här skall vi titta på hur GoLive hanterar en händelse som kallas rollover.

Vi skall här först och främst skapa en enkel rollover. Till höger ser du hur den ser ut och hur den fungerar. För muspekaren över den så ändrar den färg.

Uppgift 1: Skapa bilderna

Börja med att skapa de två (eller tre) bilder du vill använda. Gör man en meny bör varje alternativ eller knapp inte vara större än 200 pixlar på bredden och 100 pixlar på höjden. Bilderna ovan är 172 x 39.

Tips!
På mina sidor om ImageReady och FireWorks, och liknande program, berättar jag mer om hur man gör egna bilder. Där får du lära dig de vanligaste verktygen.
Läs mer om ImageReady >
Läs mer om Photoshop >
Läs mer om FireWorks >

I exemplet ovan har jag skapat en bild för normalläget och en bild för det läge då muspekaren förs över bilden. Man kan också ha bilder för när muspekaren lämnar bilden eller då man klickar, osv.

Obs!
Ju fler bilder man använder i sin rollover desto längre tar sidan att ladda. Anledningen är att alla bilder som ingår i rollovern måste laddas när sidan laddas, för att effekten skall fungera.

Tips!
Här har jag antagit att bilderna skall vara lika stora. Så behöver man alls inte göra. Ett bra sätt är att pröva sig fram till en layout som man själv gillar.

Uppgift 2: Skapa rollover-effekten

För att åstadkomma effekten med rollovers, måste man använda sig av ett smart objekt.

Du stiftade bekantskap med sådana i övningen med smarta Photoshop-objekt. Här skall vi i stället använda oss av ett annat smart objekt, som heter rollover.

Du ser var du hittar det i bilden här till höger.

Börja med att öppna ett nytt, tomt dokument i GoLive.

Dra in ett rutnät på sidan.

Välj ett rollover-objekt i objektpaletten och dra in det till ditt dokument.
I kontextpaletten (Inspector) hittar du inställningar för de olika händelserna:

Main är normalläget, då bilden inte är involverad i någon händelse.

Over är då man för muspekaren över bilden.

Click betyder att man klickar på bilden.

Ge objektet ett namn om du vill. Leta upp den bild som du vill skall synas i normalläget (Main).

Markera läget Över (Over). Kryssa i rutan till vänster om raden där du väljer bild för att aktivera rollovereffekten. Välj sedan den bild du vill ha i läget då muspekaren förs över bilden.

Ange en länkadress om du vill att man skall kunna klicka på objektet som en länk.

Fortsätt eventuellt med de andra lägen du vill ha, t.ex om något skall hända då man klickar på bilden.

Spara dokumentet.

Kontrollera att rollovern fungerar under fliken Förhandsgranska (Preview) längst upp i dokumentet.

Uppgift 3: Rollover med eget script

När GoLive skall skapa en rollover använder den en kod som både är lång och onödig och som webbläsarna har svårt att förstå. Det betyder att sidan tar längre tid att ladda och att alla webbläsare inte visar rollovern på rätt sätt.

För att slippa sådana problem brukar jag ladda ner egna scripts från nätet, som jag sedan lägger in i programmet. Hur man gör det skall jag nu visa. Du kan hitta egna scripts bland länkarna på min sida för webbutvecklaren. Läs mer >

Jag kommer här att använda mig av ett script av Chris Poole, som heter "DOM Image rollover". Chris har en hemsida: chrispoole.com. Scriptet fanns också på DynamicDrive.com där jag först hittade det.

Finessen scriptet är att det är så enkelt. Förutom scriptet, som placeras i HEAD, längst upp i dokumentets kod, framkallar man rollovern med denna enkla kodsnutt:

<IMG src="main.gif" hsrc="over.gif">

där main.gif visas i normalläget och over.gif visas då muspekaren förs över.

Obs!
Scriptet stöder alltså inte fler än två lägen, men å andra sidan brukar det vara ganska lagom för rollovers.

Klicka på symbolen som ser ut som en kaffeböna, uppe till höger i dokumentet.

Nu öppnas ett nytt fönster där man kan skriva in ett script.

I mitten finns en symbol för att lägga in ett script i HEAD. Klicka på den.

Fäll ner HEAD-sektionen för ditt dokument. Det gör du genom att klicka på pilen längst upp till vänster i dokumentet. Du ser pilen i bilden här nedanför.

I listan över objekt finns där ett objekt som ser ut som en kaffeböna med pergamentrulle.

Bönan står för "Java" och pergamentrullen för "Script". Det scriptspråk GoLive använder kallas följaktligen för JavaScript.

Du kan alltid dubbelklicka på denna symbol för att få upp redigeringsfönstret för scriptet.

Vi skall nu lägga in scriptet på webbsidan. Börja med att öppna länken nedan och kopiera all kod i filen som öppnas:

Innan du börjar lägga in scriptet skall du kopiera koden här nedanför och klistra in den:

/****************************************************
*	        DOM Image rollover:
*		by Chris Poole
*		http://chrispoole.com
*       
* Script featured on http://www.dynamicdrive.com
*
****************************************************/

function init() {
  if (!document.getElementById) return
  var imgOriginSrc;
  var imgTemp = new Array();
  var imgarr = document.getElementsByTagName('img');
  for (var i = 0; i < imgarr.length; i++) {
    if (imgarr[i].getAttribute('hsrc')) {
        imgTemp[i] = new Image();
        imgTemp[i].src = imgarr[i].getAttribute('hsrc');
        imgarr[i].onmouseover = function() {
            imgOriginSrc = this.getAttribute('src');
            this.setAttribute('src',this.getAttribute('hsrc'))
        }
        imgarr[i].onmouseout = function() {
            this.setAttribute('src',imgOriginSrc)
        }
    }
  }
}
onload=init;

När du är klar skall du spara dokumentet.

Gå nu in i Html-koden för varje bild. Här måste du använda dig av redigeringsläget för koden och kan alltså inte använda layoutläget.

Bilderna har följande kod: <IMG src="main.gif">

Nu skall du göra så att det ser ut så här i stället:

<IMG src="main.gif" hsrc="over.gif">

Det betyder alltså att du själv måste skriva in hsrc och namnet på den bild du vill ha i over-läget.

När du ändrat all kod skall du spara ditt dokument. Förhandsgranska sedan din rollover och se om den fungerar!