Camilla - Design & Foto

Tips - Mouseover

2010-12-23 @ 14:44:26

Fick en förfrågan om jag kunde visa hur man gör mouseover (så den byter bild när man håller muspekaren över, exempelvis mina luckor) på bloggen så här kommer det!

1. Lägg in koden nedan precis innan </head> i kodmallen

<mce:script LANGUAGE="JavaScript"><!-- // This is the implementation of SimpleSwap // by Jehiah Czebotar // Version 1.1 - June 10, 2005 // Distributed under Creative Commons // // Include this script on your page // then make image rollovers simple like: // <img src="/images/ss_img.gif" mce_src="/images/ss_img.gif" oversrc="/images/ss_img_over.gif"> // // http://jehiah.com/archive/simple-swap //  function SimpleSwap(el,which){ el.src=el.getAttribute(which || "origsrc"); }  function SimpleSwapSetup(){ var x = document.getElementsByTagName("img"); for (var i=0;i<x.length;i++){ var oversrc = x[i].getAttribute("oversrc"); if (!oversrc) continue;  // preload image // comment the next two lines to disable image pre-loading x[i].oversrc_img = new Image(); x[i].oversrc_img.src=oversrc; // set event handlers x[i].onmouseover = new Function("SimpleSwap(this,'oversrc');"); x[i].onmouseout = new Function("SimpleSwap(this);"); // save original src x[i].setAttribute("origsrc",x[i].src); } }  var PreSimpleSwapOnload =(window.onload)? window.onload : function(){}; window.onload = function(){PreSimpleSwapOnload(); SimpleSwapSetup();} // --></mce:script>   <mce:script type="text/javascript" mce_src="http://camillafamme.se/portfolio/js/prototype.js"></mce:script> <mce:script type="text/javascript" mce_src="http://camillafamme.se/portfolio/js/scriptaculous.js?load=effects"></mce:script> <mce:script type="text/javascript" mce_src="http://camillafamme.se/portfolio/js/lightbox.js"></mce:script> <link rel="stylesheet" href="http://camillafamme.se/portfolio/lightbox.css" mce_href="http://camillafamme.se/portfolio/lightbox.css" type="text/css" media="screen" />  <mce:style type="text/css"><!-- #container {background: #FFFFFF;} .roundtop {background: #CCCCCC;} .roundbottom {background: #CCCCCC;} .r1{margin: 0 0 0 5px; height: 1px; overflow: hidden; background: #FFFFFF;} .r2{margin: 0 0 0 3px; height: 1px; overflow: hidden; background: #FFFFFF;} .r3{margin: 0 0 0 2px; height: 1px; overflow: hidden; background: #FFFFFF;} .r4{margin: 0 0 0 1px; height: 2px; overflow: hidden; background: #FFFFFF;} .content {padding: 0px 10px 5px;} --></mce:style><style  type="text/css" mce_bogus="1"><!-- #container {background: #FFFFFF;} .roundtop {background: #CCCCCC;} .roundbottom {background: #CCCCCC;} .r1{margin: 0 0 0 5px; height: 1px; overflow: hidden; background: #FFFFFF;} .r2{margin: 0 0 0 3px; height: 1px; overflow: hidden; background: #FFFFFF;} .r3{margin: 0 0 0 2px; height: 1px; overflow: hidden; background: #FFFFFF;} .r4{margin: 0 0 0 1px; height: 2px; overflow: hidden; background: #FFFFFF;} .content {padding: 0px 10px 5px;} --></style>

2. Om du vill ha en mouseover fast i designen, i menyn exempelvis använd denna kod & lägg in på önskat ställe:

eller om de inte ska vara länk till någon sida:

Vill du ha den i ett inlägg använd denna kod:

Permalink / Tips - design

2 kommentarer

LÄS DETTA INNAN DU KOMMENTERAR:
- Jag gör inga gratis designbeställningar, endast gratis designer som alla kan ta del av, ibland tävlingar annars endast beställningar.
- Kopiering av mina bilder & kod är förbjudet!
- Reklam och liknande raderas omedelbart
- Bloglovin använder jag endast till mina favoritbloggar, inget annat.
- Har ni några frågor vänd er till mitt bloggsvar eller blogg@camillafamme.se

Kommentarer

Från: Emmie

sv: härligt :) Idag har ja bara tagit det lugnt och varit ute och gått och vilat upp mig inför julhelgen ;) Allt väl med dig idag? :)

2010-12-23 @ 16:55:16
URL: http://emmiev.blogg.se/

Från: lottasvensson - Videoguider inom Photoshop

Får inte till det :(

Kan det bero på vilken webbläsare man har??
Jag har chrome.

2011-01-08 @ 20:47:13
URL: http://lottasvenssons.se/