Mai multe persoane m-au întrebat cum am făcut “chestia” din header cu schimbatul mâţelor la mouseover peste cifre. În principiu, se poate face în cel puţin două feluri: cu un framework (cum am folosit eu, pentru efectul de fade) sau fără niciun efect, imaginile apărând brusc.

Încep cu metoda fără framework, pentru a înţelege puţin cum funcţionează DOM.

Pasul I

Codul HTML este simplu, fiind format dintr-o listă orizontală, reprezentând link-urile:

1
2
3
4
5
6

<ul id="rollover">
	<li><a href="http://www.google.com" rel="screen220_07.gif">1</a></li>
	<li><a href="http://www.google.com" rel="screen220_09.gif">2</a></li>
	<li><a href="http://www.google.com" rel="screen220_11.gif">3</a></li>
	<li><a href="http://www.google.com" rel="screen220_13.gif">4</a></li>
</ul><!--/rollover-->

Am ales calea spre imagini într-un alt atribut decât HREF deoarece există posibilitatea de a folosi acest menu în genul: mouse over pentru info, click pentru a te duce mai departe.

Apoi, oriunde în pagină se doreşte, se inserează un DIV unde se doreşte afişarea noii imagini (cu sau fără o imagine iniţială):

1
2
3

<div id="remoteRollover">
	<img src="screen220_07.gif" alt="" />
</div>

de asemenea, iată şi CSS aferent (pentru a face lista orizontală). Consider că nu e necesară o explicaţie amănunţită a codului CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

* {
	margin:0;
	padding:0;
}
#rollover {
	list-style:none;
}
#rollover li {
	float:left;
	margin:5px;
}
#rollover li a {
	text-decoration:none;
	font-size:1.5em;
	color:#444;
	padding:5px;
}
#rollover li a:hover {
	color:#fff;
	background:#444;
}
#remoteRollover {
	clear:both;
}

Pasul II

câteva linii Javascript pot face minuni Astfel, în ordine: selectăm toate link-urile din înteriorul listei cu id-ul rollover, detectăm dacă mouse-ul este pe link, caz în care afişăm imaginea (setată prin atributul REL) în DIV-ul „victimă”

1
2
3
4
5
6
7
8
9
10

var links = document.getElementById('rollover').getElementsByTagName('a');
//selectăm link-urile din interiorul listei
for(i=0;i<links .length;i++){
	links[i].onmouseover=function(){
	document.getElementById('remoteRollover').innerHTML='<img src='+this.getAttribute('rel')+' alt="" />';
//evenimentul ataşat s-ar traduce astfel:
//interiorul div-ului „remote” se înlocuieşte cu o imagine
//ce are path-ul luat din atributul REL al link-ului din listă
}
}

Rezultatul? AICI.

Partea a doua, folosind jQuery va urma curând. Stai pe aproape