Home

enkel rolloveroppgave

Lag en tabell med rollover-knapper som vist her. Last ned alle filene du trenger her.

  1. lag en tabell med 3 rader og 6 kolonner, width=760 border="0" cellpadding="0" cellspacing="0".
    Vi bruker øverste rad og siste kolonne til å sperre ut med en blank gif og den heter "spacer.gif"
  2. 1.kolonne 1 rad sett inn en blank gif som har width=95 og height=1
  3. 2.kolonne 1 rad sett inn en blank gif som har width=183 og height=1
  4. 3.kolonne 1 rad sett inn en blank gif som har width=159 og height=1
  5. 4.kolonne 1 rad sett inn en blank gif som har width=156 og height=1
  6. 5.kolonne 1 rad sett inn en blank gif som har width=167 og height=1
  7. 6.kolonne 1 rad sett inn en blank gif som har width=1 og height=1
  8. 1.kolonne 2 rad sett inn bildet: "enkel_01.jpg" gi navn "logo"
  9. 2.kolonne 2 rad sett inn bildet: "enkel_02.jpg" gi navn "products"
  10. 3.kolonne 2 rad sett inn bildet: "enkel_03.jpg" gi navn "services"
  11. 4.kolonne 2 rad sett inn bildet: "enkel_04.jpg" gi navn "about"
  12. 5.kolonne 2 rad sett inn bildet: "enkel_05.jpg" gi navn "contact"
  13. 6.kolonne 2 rad sett inn bildet "spacer.gif" med width=1 height=83
  14. 1. kolonne 3 rad. slå sammen kolonnene 1-5. Her skal teksten inn. Bildet som skal høyrejusteres heter "enkel_06.jpg", Bruk CSS til å høyrejustere. I <img>-taggen skriver du som et atributt: style="float: right; margin-left: 15px"
  15. 2. kolonne 2 rad sett inn blank gif med width=1 og height=591
  16. Fordi rollover effekten på knappenen går over i flere nærliggende bilder må vi bytte flere bilder ved mouseOver. Vi må bytte bilder både på selve knappen, og på de bildene som ligger inntil knappen. Scroll denne siden ned så du ser navigasjonen nederst i vinduet. Marker "Products-knappen", fra Behaviors paletten klikk "+" og velg "Swap Image", browse fram til "enkel_02-over.jpg". Dobbeltklikk på filnavnet eller klikk "select". Ikke klikk OK Fra oversiktsvinduet scroll ned til du finner "logo", marker denne, klikk browse og velg "enkel_01-enkel_02_over.jpg". Dobbeltklikk på filnavnet eller klikk "select" Ikke klikk OK. Fra oversiktsvinduet scroll ned til du finner "services", marker denne, klikk browse og velg "enkel_03-enkel_02_over.jpg". Nå kan du klikke OK.
  17. Marker "Services-knappen", fra Behaviors paletten klikk "+" og velg "Swap Image", browse fram til "enkel_03-over.jpg". Dobbeltklikk på filnavnet eller klikk "select". Ikke klikk OK Fra oversiktsvinduet scroll ned til du finner "products", marker denne, klikk browse og velg "enkel_02-enkel_03_over.jpg". Dobbeltklikk på filnavnet eller klikk "select" Ikke klikk OK. Fra oversiktsvinduet scroll ned til du finner "about", marker denne, klikk browse og velg "enkel_04-enkel_03_over.jpg". Nå kan du klikke OK.
  18. Marker "About x-knappen", fra Behaviors paletten klikk "+" og velg "Swap Image", browse fram til "enkel_04-over.jpg". Dobbeltklikk på filnavnet eller klikk "select". Ikke klikk OK Fra oversiktsvinduet scroll ned til du finner "services", marker denne, klikk browse og velg "enkel_03-enkel_04_over.jpg". Dobbeltklikk på filnavnet eller klikk "select" Ikke klikk OK. Fra oversiktsvinduet scroll ned til du finner "contact", marker denne, klikk browse og velg "enkel_05-enkel_04_over.jpg". Nå kan du klikke OK.
  19. Marker "Contact-knappen", fra Behaviors paletten klikk "+" og velg "Swap Image", browse fram til "enkel_05-over.jpg". Dobbeltklikk på filnavnet eller klikk "select". Ikke klikk OK Fra oversiktsvinduet scroll ned til du finner "about", marker denne, klikk browse og velg "enkel_04-enkel_05_over.jpg". Nå kan du klikke OK.