Design tips: hur jag har gjort mina ikoner i menyn
DATUM: 2012-03-18 | TID: 10:50:52 | KATEGORI: bloggdesign | KOMMENTARER: 7
först börjar jag med att göra två bilder i photoshop. den första bilden är så som ikonen ska se ut när man inte har musen över den och den andra bilden är så som ikonen ska se ut när man har musen över den. ladda upp bilderna på bloggen (om du inte vet hur man gör det har jag visat det här).
gå in i din kodmall och leta upp stället där du vill att ikonerna ska sitta. i mitt fall är det någon stans under <div id="side"> eftersom att jag har de i min meny.
sätt in den här koden där du vill ha din ikon/ dina ikoner och lägg in adressen och så. spara din kodmall sen:
<a href="Adressen dit ikonen ska länka"><img src="Bildkoden till första bilden" oversrc="bildkoden till andra bilden då man har musen över"></a>
nu om du kollar på din blogg som kommer någ ikonerna bara visa första bilden även om du tar musen över. därför måste du lägga in en kod till. sätt in den här koden precis över </head> :
<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" 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();}
//-->
</script>
spara din kodmall sen. glöm inte göra det här på framsidan, inläggssidan, kategorisidan och arkivsidan. kommentera om du har några frågor.
Tack så super mycket! Riktigt efterlängtat :-) Har inte blogg.se nu, men ska nog byta till det och vill lära mig lite sådanna här grejer först. Tack än en gång. P.S. Din blogg är grym !
Hej! Jag vet inte om du anmält dig till dagens bloggtips hos mig. Om inte, så passa på nu - ikväll utses en vinnare som får bild och text(info) länkat till sig från min blogg som dagligen besöks av ca 2000 unika!
Hej! Jag har tagit några testbilder med min nya kamera, och du får gärna säga vad du tycker om dem! :) Jag skulle bli väldigt glad..
http://twinstars.blogg.se/2012/march/rosa.html#comment
vad heter ditt brushset som du använder när man gör mouseover? letat över allt efter en länk :( skulle hoppa av glädje om du skickade länk! ;)
Dagens bloggtips är uppe på bloggen. KOlla om det blev nu, om inte så hoppas jag förstås att du anmäler dig (i samma inlägg) till morgondagens tips! 2000 unika hungriga läsare väntar givetvis på ett nytt tips! ;)
Du, jag kom på en sak .. Sitter med dina instruktioner och försöker göra detta men kom på att jag inte har några ''bilder'' till detta. Har du laddat hem dina? I så fall skulle det vara till stor hjälp om du länkade den hemsidan :-) Hehe. Tack på förhand!
kan inte du visa hur man gör så att kategorierna, arkiven och de ligger på rad som det gör i din meny?
