Especificar los enlaces en el menú con css

[amanda75]

Hola:

Tengo un menú con 16 imáges y que, evidentemente, son enlaces a otras partes de la web.

El problema es que mi servidor no me permite documentos con extensión para incluides, así que, en cada página he repetido el menú.

Por el momento todo bien, pero el dia que tenga que cambiar una imagen o un enlace me voy a volver amarilla.

He buscado en las especificaciones del consorcio w3 : puedo solucionar el menú vertical con cajas tipo <ul><li > incluyendo ahí las imágenes, pero no he encontrado nada de cómo decir en una hoja de estilos el enlace a la zona a la que se tiene que ir cuando se pincha sobre esa imagen

Mi pregunta es ¿se puede hacer? ¿puedo indicar en una hoja de estilos los enlaces del menu de navegación de mi web?

Mi "obra de arte" está aquí http://amandade7a5.webcindario.com y lo que quiero reducir es el HTML de la barra de cabecera y lateral

No hace falta que esteis pensando como explicarme el caso, si me dais un enlace donde lo pueda estudiar es suficiente, sabiendo de qué va ya me espabilo yo. También os agradecería mucho alguna sugerencia para minimizar al máximo el HTML y que se puedan hacer cambios fácilmente


Gracias de antemano.

[caricatos]

Hola amanda75:

Que yo sepa, en css no se pueden definir enlaces, pero sin usar includes puedes usar ficheros javascript que hagan cosas parecidas.

Tengo una página (un conjunto de páginas) que en el pie tienen esto:

<script language="javascript" src="../includes/pie.js" ></script>

Y el fichero pie.js tiene esto:

Código PHP:

  function docu()    {
var we = location.href.split("/");
return we[we.length - 1];
}
var we = docu();
var bottom     = "<font face=verdana size=1.1px>";
bottom        += (we == "main.html") ? "":"<img src='../images/home.gif' height=15> <a href='main.html'>Inicio</a> | ";
bottom        += (we == "aboutus.html") ? "":"<img src='../images/logo_mini.gif' height=15> <a href='aboutus.html'>Sobre nosotros</a> | ";
bottom        += (we == "thecraic.html") ? "":"<img src='../images/leprechaun-2.gif' height=15> <a href='thecraic.html'>The craic</a> | ";
bottom        += (we == "howmuch.html") ? "":"<img src='../images/patanimlep7.gif' height=15> <a href='howmuch.html'>¿Cuánto vale una pinta?</a> | ";
bottom        += (we == "music.html") ? "":"<img src='../images/irishlad.gif' height=15> <a href='music.html'>Música en vivo</a> | ";
bottom        += (we == "association.html") ? "":"<img src='../images/Irlanda.gif' height=15> <a href='association.html'>Asociación Irlandesa de España</a> | ";
 
bottom        += (we == "links.html") ? "":"<img src='../images/planet.gif' height=15> <a href='links.html'>Links</a> | ";
 
bottom        += "<img src='../images/ire.gif' height=15> <a href=\"javascript:top.home.home.location.href='../irish/" + we + "';top.home.menu.location.href='../irish/menu.html'\";>Irish version available</a>";
bottom        += "</font>";
document.write(bottom); 
   

La idea es que se escriba lo mismo en todas las páginas, pero no haya un enlace a la página actual.
Puedes ver algo parecido aquí:
http://www.pepemolina.com/pruebas/pie1.html

Si es eso lo que quieres y necesitas una mejor explicación, avisa.

Saludos

[amanda75]

Pues tiene toda la pinta de ser el " hombre de mi vida", el problema es que el js y yo todavía no nos hemos cruzado ni dos palabras Como no me hagas de celestino, me quedo sin bailar.

Creo interpretar que tu función relaciona una imagen con un texto y un enlace, con lo que

Código PHP:

  bottom        += (we == "main.html") ? "":"<img src='../images/home.gif' height=15> <a href='main.html'>Inicio</a> | "; 
   

Como yo quiero enlazar con una url externa y no quiero texto puede que me quede así:

Código PHP:

  bottom        += (we == "http://www.elhombredemivida.com/main.html") ? "":"<img src='../images/home.gif' height=15> | "; 
   

Puede ser que como yo no pongo texto esto tenga que eliminarlo

Código PHP:

  var bottom     = "<font face=verdana size=1.1px>";
 
 
 
bottom        += "</font>"; 
   

Esto qué es ¿una orden para que la función sepa que tiene que hacer? No sé en mi caso que tendria que poner

Código PHP:

  bottom        += "<img src='../images/ire.gif' height=15> <a href=\"javascript:top.home.home.location.href='../irish/" + we + "';top.home.menu.location.href='../irish/menu.html'\";>Irish version available</a>" 
   

Si todo se llama bottom, ¿como puedo poner una acción en cada imagen? por ejemplo, yo ahora en el menú tengo uno de los enlaces definido asi

Código PHP:

      <td ><a href="http://www.elhombredemivida.com/mail.html"><img src="../images/home.gif" border="0" alt="indice" width="118" height="27" /></a></td> 
   

Como se lo digo con tu función,¿tengo que llamarlos bottomA, bottomB, bottomC...?

El documento pie.js, en mi caso sería menu.js, ¿tiene que tener una estructura determinada?

Lo siento caricatos , si he dicho muchas animaladas perdona ,pero ya ves que estoy completamente pegada.

[caricatos]

Hola otra vez:

Vamos por partes. La cuestión será ir aprendiendo javascript, pero en un principio trataré de explicarte como funciona lo que yo te he puesto.
No sé si has visto el enlace que te he puesto, pero es el que voy a usar de referencia, ya que es algo más reducido.

En esa página lo único que debes saber de javascript es que en esta línea:
<script language=javascript src=pie.js></script>
... se enlaza con un fichero externo que se llama pie.js y en ese fichero lo que hay es:

una función que averigua como se llama la página donde se ubica:

function docu() {
var we = location.href.split("/");
return we[we.length - 1];
}

... y una variable que he llamado we a la que se le asigna esa información:

var we = docu();

Algo importante es saber si todas las páginas tienen que ser igual, o si deben cambiar dependiendo de la página que sea. Para eso se usa la variable we... este script está pensado para un grupo de páginas con distinto nombre pero en la misma carpeta, que es el caso de mi ejemplo, en la página de mi perfil, en la opción de "galería de caricaturas" hay una implementación donde lo que cambia son las carpetas.

Lo que sigue es el contenido que va a aparecer.

Primero voy a hacerte una pequeña aclaración: cuando en javascript se pone algo += "otra cosa" significa que a la variable "algo" se le debe añadir "otra cosa"... o sea que solo se trata de "una" variable... y si después de "=" hay algo entre paréntesis significa una condición, y que si la condición se cumple se le asigna lo que hay detrás del "?" y si no se le asigna lo que hay detrás del ":".

Esa condición (en este caso particular) hace que no paraezca entre las opciones la página actual.

Dime que entiendes y que no, y mañana sigo.

Saludos

[amanda75]

Por el momento todo claro