{"id":47,"date":"2008-06-22T15:39:30","date_gmt":"2008-06-22T13:39:30","guid":{"rendered":"https:\/\/www.itstyle.net\/blog\/?p=47"},"modified":"2017-07-05T11:22:21","modified_gmt":"2017-07-05T09:22:21","slug":"lag-en-rollover-effekt-pa-din-nettsideblog-navigasjon","status":"publish","type":"post","link":"https:\/\/problogger.no\/2008\/06\/22\/lag-en-rollover-effekt-pa-din-nettsideblog-navigasjon\/","title":{"rendered":"Lag en rollover effekt p\u00e5 din nettside\/blog navigasjon!"},"content":{"rendered":"

Velkommen til den f\u00f8rste guiden her p\u00e5 ItStyle Bloggen.<\/strong><\/p>\n

I startfasen av denne bloggen var fokuset \u00e5 f\u00e5 folk til \u00e5 se bloggen, f\u00e5 gode tips og triks som er gull verdt. Dette trakk en stor andel brukere hit, h\u00e5per alle syntes det var verdt en tur innom.<\/p>\n

N\u00e5 er fase 2 av bloggingen kommet, her vil jeg fortsette med gode tips og triks, men har lagt til en ny kategori som g\u00e5r under guider. Her vil jeg poste artikler som vil hjelpe deg til \u00e5 f\u00e5 til forskjellige ting for din nettside eller p\u00e5 din datamaskin.<\/p>\n

Har du \u00f8nsker til noe du lurer p\u00e5 s\u00e5 post gjerne det i kommentarfeltet p\u00e5 «om bloggen».<\/em><\/p>\n

Guide nr 1: Lag en rollover effekt p\u00e5 din navigasjon!<\/strong><\/h2>\n

1. Lag et bilde av din navigasjonsknapp.<\/h4>\n

Dette kan du lett gj\u00f8re i for eksempel Adobe Photoshop eller i andre tegneprogram. Under her ser du min navigasjonsknapp. Det jeg vil at den skal gj\u00f8re er \u00e5 vise kun den bl\u00e5 delen av bildet n\u00e5r man ikke holder musen over knappen, for s\u00e5 \u00e5 bytte over til den r\u00f8de delen n\u00e5r man holder musepekeren over den. Du kan laste ned og bruke bildet jeg har under for \u00e5 teste det ut selv.<\/p>\n

\"\"<\/p>\n

Det mest vanlige har v\u00e6rt \u00e5 ha to forskjellige bilder. Der det ene bildet blir lastet n\u00e5r man g\u00e5r inn p\u00e5 siden din, og den andre blir ikke lastet f\u00f8r man holder musen over, s\u00e5 da kan det \u00f8delegge designet mens den lastes inn. Det finnes noen mellomlagrinsl\u00f8sninger for \u00e5 l\u00f8se det problemet, men med denne metoden er det enklere.<\/em><\/p>\n

2. CSS koden for \u00e5 f\u00e5 dette til \u00e5 fungere<\/h4>\n

<style type=»text\/css»>
\n<!–
\na#rollover{
\nheight: 20<\/span>px;
\nwidth: 100<\/span>px;
\nbackground-image:url(DittRollOverBilde.png<\/span>);
\ntext-decoration:none;
\ndisplay:block;
\n}
\na#rollover:hover{
\nbackground-position:100<\/span>px;
\n}
\n–>
\n<\/style><\/em><\/p>\n

Over her har du selve CSS koden for \u00e5 f\u00e5 din rollover til \u00e5 fungere. De feltene som er markert med r\u00f8dt m\u00e5 du endre til det som gjelder for deg. Du setter inn koden i din egen CSS fil eller i <head><\/head> delen av din nettside.<\/p>\n

Forklaring av koden:<\/h4>\n

height:<\/strong><\/em> Her setter du inn h\u00f8yden til det bildet som du selv har laget, bruker du mitt eksempel lar du det st\u00e5 «20» der siden bildet er 20 piksler h\u00f8yt.<\/p>\n

width:<\/em> <\/strong>Dette er bredden p\u00e5 den delen av bildet som er den bl\u00e5 knappen, i mitt eksempel s\u00e5 er den 100 piksler lang.<\/p>\n

background-image:url:<\/strong> <\/em>Dette er linken til bildet ditt. Du bytter ut DittRollOverBilde.png med det ditt bildet heter. Hvis du ikke legger bildet i samme mappe som html filen din ligger s\u00e5 m\u00e5 du legge til hele adressen til dit bildet ligger eks «https:\/\/problogger.no\/guider\/RollOverBilde.gif»<\/p>\n

background-position: <\/em><\/strong>Dette bestemmer hvor langt til venstre nettsiden din skal g\u00e5 i bildet n\u00e5r man holder musen over bildet. I mitt eksempel er den bl\u00e5 knappen 100 piksler lang, s\u00e5 n\u00e5r jeg velger at den skal hoppe 100 piksler til h\u00f8yre p\u00e5 bildet, s\u00e5 vil den kun vise den r\u00f8de knappen.<\/p>\n

3. HTML koden<\/h4>\n

<a href=»#<\/span>» id=»rollover»> <\/a><\/em><\/p>\n

Over ser du html koden. Det er en helt vanlig link tag, men den har f\u00e5tt p\u00e5f\u00f8rt seg id’en «rollover». Id’en henviser da til CSS koden som du skrev i punkt 2. Den r\u00f8de firkanten er der du setter inn url’en til siden du linker til. Regner med at du vet hvordan en link tag ser ut fra f\u00f8r, s\u00e5 skal ikke forklare den s\u00e5 mye.<\/p>\n

4. Det var det, du er ferdig! Fullstendig kode her.<\/h4>\n

Vanskeligere enn dette er det ikke. Er du en klipp og lim type som skal teste eksempelet s\u00e5 fort som mulig uten \u00e5 sette det overst\u00e5ende sammen s\u00e5 f\u00e5r du her fullstendig kode til hele html siden. Det eneste du m\u00e5 huske p\u00e5 er \u00e5 endre de parameterne som jeg tidligere nevnte og ha bilde filen klar.<\/p>\n

Fullstendig kode for nettside med rollover link:<\/strong><\/span><\/p>\n


\n<html>
\n<head>
\n<title>Din Rollover navigasjon nettside<\/title>
\n<style type=»text\/css»>
\n<!–
\na#rollover{
\nheight: 20px;
\nwidth: 100px;
\nbackground-image:url(RollOverBilde.png);
\ntext-decoration:none;
\ndisplay:block;
\n}
\na#rollover:hover{
\nbackground-position:100px;
\n}
\n–>
\n<\/style><\/head>
\n<body>
\n<a href=»#» id=»rollover»> <\/a>
\n<\/body>
\n<\/html><\/em><\/p>\n

\n","protected":false},"excerpt":{"rendered":"

Velkommen til den f\u00f8rste guiden her p\u00e5 ItStyle Bloggen. I startfasen av denne bloggen var fokuset \u00e5 f\u00e5 folk til \u00e5 se bloggen, f\u00e5 gode tips og triks som er gull verdt. Dette trakk en stor andel brukere hit, h\u00e5per alle syntes det var verdt en tur innom. N\u00e5 er fase 2 av bloggingen kommet,… Les mer »Lag en rollover effekt p\u00e5 din nettside\/blog navigasjon!<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[452,453,317,315],"tags":[230,53,1178,1416,239,1415,1414,1413,1412],"yoast_head":"\nLag en rollover effekt p\u00e5 din nettside\/blog navigasjon! - ProBlogger.no<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/problogger.no\/2008\/06\/22\/lag-en-rollover-effekt-pa-din-nettsideblog-navigasjon\/\" \/>\n<meta property=\"og:locale\" content=\"nb_NO\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lag en rollover effekt p\u00e5 din nettside\/blog navigasjon! - ProBlogger.no\" \/>\n<meta property=\"og:description\" content=\"Velkommen til den f\u00f8rste guiden her p\u00e5 ItStyle Bloggen. I startfasen av denne bloggen var fokuset \u00e5 f\u00e5 folk til \u00e5 se bloggen, f\u00e5 gode tips og triks som er gull verdt. Dette trakk en stor andel brukere hit, h\u00e5per alle syntes det var verdt en tur innom. N\u00e5 er fase 2 av bloggingen kommet,… Les mer »Lag en rollover effekt p\u00e5 din nettside\/blog navigasjon!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/problogger.no\/2008\/06\/22\/lag-en-rollover-effekt-pa-din-nettsideblog-navigasjon\/\" \/>\n<meta property=\"og:site_name\" content=\"ProBlogger.no\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/mats.holmvik\" \/>\n<meta property=\"article:published_time\" content=\"2008-06-22T13:39:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-07-05T09:22:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/problogger.no\/wp-content\/uploads\/2008\/06\/untitled-3.gif\" \/>\n<meta name=\"author\" content=\"Mats Holmvik\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/invert87\" \/>\n<meta name=\"twitter:label1\" content=\"Skrevet av\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mats Holmvik\" \/>\n\t<meta name=\"twitter:label2\" content=\"Ansl. lesetid\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/problogger.no\/2008\/06\/22\/lag-en-rollover-effekt-pa-din-nettsideblog-navigasjon\/\",\"url\":\"https:\/\/problogger.no\/2008\/06\/22\/lag-en-rollover-effekt-pa-din-nettsideblog-navigasjon\/\",\"name\":\"Lag en rollover effekt p\u00e5 din nettside\/blog navigasjon! - ProBlogger.no\",\"isPartOf\":{\"@id\":\"https:\/\/problogger.no\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/problogger.no\/2008\/06\/22\/lag-en-rollover-effekt-pa-din-nettsideblog-navigasjon\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/problogger.no\/2008\/06\/22\/lag-en-rollover-effekt-pa-din-nettsideblog-navigasjon\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/problogger.no\/wp-content\/uploads\/2008\/06\/untitled-3.gif\",\"datePublished\":\"2008-06-22T13:39:30+00:00\",\"dateModified\":\"2017-07-05T09:22:21+00:00\",\"author\":{\"@id\":\"https:\/\/problogger.no\/#\/schema\/person\/8beb7c12c1dd1a087d262eb026bed5e6\"},\"breadcrumb\":{\"@id\":\"https:\/\/problogger.no\/2008\/06\/22\/lag-en-rollover-effekt-pa-din-nettsideblog-navigasjon\/#breadcrumb\"},\"inLanguage\":\"nb-NO\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/problogger.no\/2008\/06\/22\/lag-en-rollover-effekt-pa-din-nettsideblog-navigasjon\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nb-NO\",\"@id\":\"https:\/\/problogger.no\/2008\/06\/22\/lag-en-rollover-effekt-pa-din-nettsideblog-navigasjon\/#primaryimage\",\"url\":\"https:\/\/problogger.no\/wp-content\/uploads\/2008\/06\/untitled-3.gif\",\"contentUrl\":\"https:\/\/problogger.no\/wp-content\/uploads\/2008\/06\/untitled-3.gif\",\"width\":200,\"height\":20},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/problogger.no\/2008\/06\/22\/lag-en-rollover-effekt-pa-din-nettsideblog-navigasjon\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Hjem\",\"item\":\"https:\/\/problogger.no\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lag en rollover effekt p\u00e5 din nettside\/blog navigasjon!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/problogger.no\/#website\",\"url\":\"https:\/\/problogger.no\/\",\"name\":\"ProBlogger.no\",\"description\":\"Alt om blogging.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/problogger.no\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"nb-NO\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/problogger.no\/#\/schema\/person\/8beb7c12c1dd1a087d262eb026bed5e6\",\"name\":\"Mats Holmvik\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nb-NO\",\"@id\":\"https:\/\/problogger.no\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/982b3bd6f1a26ca42bebb856fae61b1b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/982b3bd6f1a26ca42bebb856fae61b1b?s=96&d=mm&r=g\",\"caption\":\"Mats Holmvik\"},\"description\":\"Blogg og teknologi interessert 26 \u00e5ring fra Stavern, bor i Oslo, som har stor interesse av blogging, salg, markedsf\u00f8ring, business og personlig utvikling.\",\"sameAs\":[\"https:\/\/problogger20.wpengine.com\",\"https:\/\/www.facebook.com\/mats.holmvik\",\"https:\/\/www.linkedin.com\/in\/matsholmvik\",\"https:\/\/www.pinterest.com\/matsholmvik\/\u200e\",\"https:\/\/x.com\/https:\/\/twitter.com\/invert87\",\"https:\/\/www.youtube.com\/usesforvinegar\"],\"url\":\"https:\/\/problogger.no\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Lag en rollover effekt p\u00e5 din nettside\/blog navigasjon! - ProBlogger.no","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/problogger.no\/2008\/06\/22\/lag-en-rollover-effekt-pa-din-nettsideblog-navigasjon\/","og_locale":"nb_NO","og_type":"article","og_title":"Lag en rollover effekt p\u00e5 din nettside\/blog navigasjon! - ProBlogger.no","og_description":"Velkommen til den f\u00f8rste guiden her p\u00e5 ItStyle Bloggen. I startfasen av denne bloggen var fokuset \u00e5 f\u00e5 folk til \u00e5 se bloggen, f\u00e5 gode tips og triks som er gull verdt. Dette trakk en stor andel brukere hit, h\u00e5per alle syntes det var verdt en tur innom. N\u00e5 er fase 2 av bloggingen kommet,… Les mer »Lag en rollover effekt p\u00e5 din nettside\/blog navigasjon!","og_url":"https:\/\/problogger.no\/2008\/06\/22\/lag-en-rollover-effekt-pa-din-nettsideblog-navigasjon\/","og_site_name":"ProBlogger.no","article_author":"https:\/\/www.facebook.com\/mats.holmvik","article_published_time":"2008-06-22T13:39:30+00:00","article_modified_time":"2017-07-05T09:22:21+00:00","og_image":[{"url":"https:\/\/problogger.no\/wp-content\/uploads\/2008\/06\/untitled-3.gif"}],"author":"Mats Holmvik","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/invert87","twitter_misc":{"Skrevet av":"Mats Holmvik","Ansl. lesetid":"4 minutter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/problogger.no\/2008\/06\/22\/lag-en-rollover-effekt-pa-din-nettsideblog-navigasjon\/","url":"https:\/\/problogger.no\/2008\/06\/22\/lag-en-rollover-effekt-pa-din-nettsideblog-navigasjon\/","name":"Lag en rollover effekt p\u00e5 din nettside\/blog navigasjon! - ProBlogger.no","isPartOf":{"@id":"https:\/\/problogger.no\/#website"},"primaryImageOfPage":{"@id":"https:\/\/problogger.no\/2008\/06\/22\/lag-en-rollover-effekt-pa-din-nettsideblog-navigasjon\/#primaryimage"},"image":{"@id":"https:\/\/problogger.no\/2008\/06\/22\/lag-en-rollover-effekt-pa-din-nettsideblog-navigasjon\/#primaryimage"},"thumbnailUrl":"https:\/\/problogger.no\/wp-content\/uploads\/2008\/06\/untitled-3.gif","datePublished":"2008-06-22T13:39:30+00:00","dateModified":"2017-07-05T09:22:21+00:00","author":{"@id":"https:\/\/problogger.no\/#\/schema\/person\/8beb7c12c1dd1a087d262eb026bed5e6"},"breadcrumb":{"@id":"https:\/\/problogger.no\/2008\/06\/22\/lag-en-rollover-effekt-pa-din-nettsideblog-navigasjon\/#breadcrumb"},"inLanguage":"nb-NO","potentialAction":[{"@type":"ReadAction","target":["https:\/\/problogger.no\/2008\/06\/22\/lag-en-rollover-effekt-pa-din-nettsideblog-navigasjon\/"]}]},{"@type":"ImageObject","inLanguage":"nb-NO","@id":"https:\/\/problogger.no\/2008\/06\/22\/lag-en-rollover-effekt-pa-din-nettsideblog-navigasjon\/#primaryimage","url":"https:\/\/problogger.no\/wp-content\/uploads\/2008\/06\/untitled-3.gif","contentUrl":"https:\/\/problogger.no\/wp-content\/uploads\/2008\/06\/untitled-3.gif","width":200,"height":20},{"@type":"BreadcrumbList","@id":"https:\/\/problogger.no\/2008\/06\/22\/lag-en-rollover-effekt-pa-din-nettsideblog-navigasjon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Hjem","item":"https:\/\/problogger.no\/"},{"@type":"ListItem","position":2,"name":"Lag en rollover effekt p\u00e5 din nettside\/blog navigasjon!"}]},{"@type":"WebSite","@id":"https:\/\/problogger.no\/#website","url":"https:\/\/problogger.no\/","name":"ProBlogger.no","description":"Alt om blogging.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/problogger.no\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"nb-NO"},{"@type":"Person","@id":"https:\/\/problogger.no\/#\/schema\/person\/8beb7c12c1dd1a087d262eb026bed5e6","name":"Mats Holmvik","image":{"@type":"ImageObject","inLanguage":"nb-NO","@id":"https:\/\/problogger.no\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/982b3bd6f1a26ca42bebb856fae61b1b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/982b3bd6f1a26ca42bebb856fae61b1b?s=96&d=mm&r=g","caption":"Mats Holmvik"},"description":"Blogg og teknologi interessert 26 \u00e5ring fra Stavern, bor i Oslo, som har stor interesse av blogging, salg, markedsf\u00f8ring, business og personlig utvikling.","sameAs":["https:\/\/problogger20.wpengine.com","https:\/\/www.facebook.com\/mats.holmvik","https:\/\/www.linkedin.com\/in\/matsholmvik","https:\/\/www.pinterest.com\/matsholmvik\/\u200e","https:\/\/x.com\/https:\/\/twitter.com\/invert87","https:\/\/www.youtube.com\/usesforvinegar"],"url":"https:\/\/problogger.no\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/problogger.no\/wp-json\/wp\/v2\/posts\/47"}],"collection":[{"href":"https:\/\/problogger.no\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/problogger.no\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/problogger.no\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/problogger.no\/wp-json\/wp\/v2\/comments?post=47"}],"version-history":[{"count":0,"href":"https:\/\/problogger.no\/wp-json\/wp\/v2\/posts\/47\/revisions"}],"wp:attachment":[{"href":"https:\/\/problogger.no\/wp-json\/wp\/v2\/media?parent=47"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/problogger.no\/wp-json\/wp\/v2\/categories?post=47"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/problogger.no\/wp-json\/wp\/v2\/tags?post=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}