Hola.
Estoy haciendo un cursillo de páginas web y claro, empezamos con html y páginas de estilo. Nos han pedido una página básica para la que hay que utilizar solamente html, ni javascript ni php ni nada más, y eso me está jodiendo un poco.
Quiero poner un menú con botones que cambian de apariencia según están pulsados o no y en html no sé cómo hacerlo sin que quede chapucero, es decir, que no quiero que se abra la misma página una y otra vez al pulsar un enlace.
¿Qué me recomendáis?
Gracias.
Debe haber alguna forma de hacerlo sin tener que echar mano de javascript...
Gracias por la página, es bastante útil en general.
Solo con HTML no puedes hacer eso, y aunque pudieses, no debes. HTML es un lenguaje de descripción de documentos, no debes usarlo para establecer la presentación.
imagenes de sustitucion - roolover
lo tienes en el dreamweaver y en otros programas
Dreanweaver:
INSERTAR->OBJETOS DE IMAGEN->IMAGEN DE SUSTITUCION
(Evidentemente con script)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<a href="LINKS.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','imagen2.gif',1)"></a>
</body>
</html>
falta una linea despues de acaba el head va entre < codigo >
y es esta body onload="MM_preloadImages('imagen2.gif')"
Hombre mejor metele estilos y ya te vas acostumbrando dandole estados al enlace.
Una imagen que lleva un enlace puede cambiar de estado sin tener que usar javasript unicamente creando estados cuando el link a sido visitado o el raton esta encima del enlace, etc.
Bueno te sigo comentando que estoy en el curro.
Crea una hoja de estilos, lo tipico, llamala estilos.
<link href="estilos.css" rel="stylesheet" type="text/css" />
Mete el enlace en el html de donde va a coger los estilos.
Crea ahora los estilos de "a"
a{background:url("ejemplo.gif"); cursor: pointer; }
a:hover{background:url("ejemplo2.gif"); cursor: pointer; }
Esto lo que haria es que todos los enlaces llevarian una imagen que se llamaría ejemplo y la cambiaria cuando pases el raton por encima por ejemplo2.
Ten encuanta que puedes crear todos los estilos que necesites.
Nota: no es necesario crear un fichero css si metes los estilos dentro del html los pillara igual, pero es mas util tenerlos en un fichero css por que asi no tiene que llevar todo ese codigo el html, lo podran coger otras paginas, pesara menos, cargara antes, etc...
Me he topado con un "problemilla" que no logro resolver.
En la plantilla tengo lo siguiente:
#cabecera li.boton_html a{background:url(images/HTML_off.jpg); cursor: pointer; }
#cabecera li.boton_html a:hover{background:url(images/HTML_off_selected.jpg); cursor: pointer; }
Y en el html lo siguiente:
<li class="boton_html"><a href="files/html_link.html" title="html" target="principal"></a></li>
El problema es que no se me ocurre qué es lo que tengo que poner dentro de la etiqueta <a> para que se muestre la imagen.
Saludos y gracias.
