$$('.Gaos').addEvents({
	'mouseenter': function(){
		this.className += " over";
	},
	'mouseleave': function(){
		this.className = this.className.replace(" over", "");
	}
});

På detta vis kan ju css defineras för att sköta förändringen t.ex. om objekten ligger i en div som har id ”page” skulle man kunna göra såhär:

#page .over{border:1px solid red}

Nu är detta ett inlägg som vänder sig till nybörjare och det är väl på tiden att vi visar lite kod som inte behöver göras något med innan den används, så här kommer koden den kompletta koden för att göra följande om du bara har pekat in mootoolsbiblioteket:

var Site = {
	start : function () {
	    window.addEvent('domready', function() {
		    $$('.Gaos').addEvents({
				'mouseenter': function(){
					this.className += " over";
				},
				'mouseleave': function(){
					this.className = this.className.replace(" over", "");
				}
		    });
	    });
	}
}
window.addEvent('load', Site.start);

Men det finns ett enkelt sätt att slippa detta, css deklarationen ”outline:0″ löser effektivt problemet. Du sätter den enklast på a:active classen. Och ofta räcker det, i någon version av Firefox behövs det dock en liten deklaration till. Det gäller deklarationen ”-moz-outline-style:none” och detta görs enklast i a:focus.

Totalt blir css deklarationen såhär:

a:active{outline: none;}
a:focus{-moz-outline-style: none;}

Hoppas nu att ni slipper dessa (antagligen de mest hatade prickarna i världen).

För att slippa det mesta av dessa problem har vi löst det lite annorlunda. Vi utgår från en bild där vi placerar in alla menyobjekts olika faser och sedan använder vi css för att aligna bakgrunderna i de olika faserna. Vi har lagt upp ett exempel på www.meny.welcom.se dock har vi inte gjort mootools funktionen för att aktivera funktionern i IE6. Men alla normala webbläsare klarar av att hantera menyn med bara css. Mootools funktionen som gör detta kommer publiceras snarg här på bloggen.

Css koden för att skapa ett av objekten i menyn ser ut som följande:

li.gaos_top_menu_1 {background-position:0px 0;}
li.gaos_top_menu_1:hover, li.gaos_top_menu_1_over {background-position:0 -23px;}
li.gaos_top_menu_1 a.nav_item, li.gaos_top_menu_1_over a.nav_item {width:90px; height:24px;}
li.gaos_top_menu_1 .menu {left:0; min-width:140px}

För att kunna göra html koden så bra som möjligt så att vi får med indexeringen på texten så lägger vi in en förskjutning på alla <span> som i sin tur ligger innanför länkarna. Förskjutningen görs såhär:

ul#gaos_top_menu a.nav_item span {position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden;}

Resterande kod får ni hämta från meny.welcom.se om ni vill använda den.

Bilden som vi använder i exemplet ser ut såhär: (bilden är 8k)

Dock använder vi denna på en site som är tvåspråkig så det är därför vi har fler rader med i den.

Antingen kan ni köra:
var border = RUZEE.ShadedBorder.create({ corner:8, shadow:16 });
border.render(’classnamn’);

Detta blir dock jobbigt eftersom du måste definiera det för varje element som skall använda skriptet. Betydligt bättre och enklare blir det om ni använder er av Mootools för att generera det på de element som skall köras. JS koden för att använda Mootools för detta skulle kunna se ut såhär:

gaosBorder : function () {
window.addEvent(’domready’, function() {
$$(’.gaosRundaHorn’).each(function(el){
var border = RUZEE.ShadedBorder.create({ corner:8, shadow:16 });
border.render(el.getProperty(’id’));
});});}

Vad vi gör här är att vi hämtar alla element som har class=”gaosRundaHorn”, efter det så hämtar vi det id som dessa classer har, på så sätt blir matchningen unik per element, men det gör att man måste sätta ett unikt id per element som skall använda de snygga runda hörnen. De variabler som sätts är ”corner:8″ och ”shadow:16″, ingen idé att förklara detta det är bättre att du testar.

För att få det att fungera med en bakgrund behöver vi sätta lite css på detta. Det gör vi med:

. gaosRundaHorn, . gaosRundaHorn .sb-inner {background-color:#DDD;}

Självklart kan du göra samma funktion med prototype eller något annat JS bibliotek, men då får du lösa det själv.. ;)

Som exempel kan jag nämna att denna sida som du är på (www.gaos.se) använder inte en enda bild på sidan utan alla hörn är gjorda med just shadedBorder.

Du kan ladda ner shadedborder här

(Jag förstår inte riktigt varför de har låst höjden i ”sb-inner” diven till 2048 px så jag har satt den till 100% ist. Hade lite problem när rutorna blev för långa.. Detta görs i JavaScriptet på rad 154 om ni får problem!)

Under många år har jag suttit och slitit med placeringa av divar. Vi har alltid fått till det så som vi tänkt, men ibland har det varit mycket slit för att lyckas. En dag för några månader sedan sitter jag och surfar runt och ser några killar som har byggt upp en väldigt fin divstruktur och börjar titta lite på koden.

Insåg att jag aldrig lärt mig hantera ”clear” på riktigt och började exprimentera lite.. Nu är det som sagt det komando som sparar mig mest tid i utvecklingsarbete. Oj va smidigt det gör det att placera ut flytande divar!

Förklaring till vad ”clear” gör:

Clear definerar vilka sidor av ett element som inte skall tillåtas ha flytande element runt sig. Clear kan ha attributen left, right, none och both.

Exempel: (den röda diven har inte definerat clear)

Exempel: (den röda diven använder clear:both)