Exercici 1
Analitza el codi línia per línia dels següents exemples.
Exemple 1
<html>
<head>
<title> Color de fondo </title>
</head>
<body bgcolor="#FFFFFF">
<SCRIPT language="JavaScript">
<!--
function get_color(color_num)
{
var now_color=color_num;
var my_color= new Array(5)
my_color[0]="lime";
my_color[1]="orange";
my_color[2]="lightblue";
my_color[3]="pink";
my_color[4]="ghostwhite";
document.bgColor=my_color[now_color];
}
//-->
</SCRIPT>
<P>
<B>Cambiar el color de fondo!</B>
<P>
<FORM>
<INPUT type="button" value="Lima" onClick="get_color(0)">
<INPUT type="button" value="Naranja" onClick="get_color(1)">
<INPUT type="button" value="Celeste" onClick="get_color(2)">
<INPUT type="button" value="Rosa" onClick="get_color(3)">
<INPUT type="button" value="Blanco" onClick="get_color(4)">
</FORM>
</body>
</html>
Exemple 2
<HTML>
<HEAD>
<TITLE>imatge de sustitució</TITLE>
<script language="javascript" type="text/javascript">
function canviar(ident,url) {
identificacio=ident;
antiga=document.getElementById(ident).src;
//les defineixo globalment per utilitzar-les
//per una altra funció externa,
//la que es diu restituir();
document.getElementById(ident).src=url;
//A l'atribut src de la img li donc
//com a valor el que valgui la url
//que li hem passat
}
function tornar() {
document.getElementById(identificacio).src=antiga;
}
</script>
</HEAD>
<BODY>
<img src="flor1.jpg" id="imatge1"
onmouseover="canviar('imatge1','flor2.jpg');"
onmouseout="tornar();">
<img src="flor2.jpg" id="imatge2"
onmouseover="canviar('imatge2','flor1.jpg');"
onmouseout="tornar();" hspace="10">
</BODY>
</HTML>
Exercici 2
Basant-te en els exemples anteriors fes un matriu en la que definiu a cada posició la url d'una imatge diferent(fes-ho amb 5 imatges). A continuació posa una imatge, a la que li posaràs com a atribut id="imatge", i després fes 5 enllaços de tal manera que al passar per sobre canvïi una imatge o altra de les que hi ha a la matriu.
[Os explicaré esto para cambiar dinámicamente el contenido(el texto y más) de cualquier elemento: clica aquí para ver un adelanto].
CSS combinado Javascript
Entradas
0 comentarios:
Publicar un comentario