Acceso a elementos mediante document.getElementById

Mediante o obxecto document, é posible acceder, a través de método getElementById, a calquera elemento da páxina web mediante o atributo id.

NOTA:
O atributo "id" debe ser único, o que permite acceder a cada elemento da web de xeito directo.

function cambiarImaxelogofirefox(){
 var imaxe;
 
 imaxe = document.getElementById("img001");
 
 imaxe.src = "logofirefox.jpg"
 }

function cambiarImaxelogoopera(){
 var imaxe;
 
 imaxe = document.getElementById("img001");
 
 imaxe.src = "logoopera.jpg"
 }

No corpo da páxina web, se inclúen dous enlaces, un para chamar a cada unha das funcións, e unha imaxe, na que se inclúe o atributo id.

<a href="#" onclick="cambiarImaxelogoopera();">funcion cambiarImaxelogoopera</a><br><br>
<a href="#" onclick="cambiarImaxelogofirefox();">funcion cambiarImaxelogofirefox</a><br><br>

<img id="img001" src="logoopera.jpg" 
 onMouseOver="cambiarImaxelogofirefox();" 
  onMouseOut="cambiarImaxelogoopera();"/>

O aspecto orixinal da páxina, ou tras pulsar o enlace que chama á función cambiarImaxelogoopera(), é o seguinte:

Tras pulsar o enlace cambiarImaxelogofirefox(), o aspecto cambia ó seguinte:

Como se observa no código HTML, tamén se engaden os controladores de eventos para mouseOver e mouseOut, para conseguir o efecto de un rollover.

<img id="img001" src="logoopera.jpg" 
 onMouseOver="cambiarImaxelogofirefox();" 
  onMouseOut="cambiarImaxelogoopera();"/>

O efecto obtido pódese apreciar neste vídeo:

Como se pode ver, cando o punteiro do rato se coloca enriba da imaxe, aparece o logo de Firefox, e cando o punteiro sae de enriba da imaxe, volta a aparecer o logo de Opera.