poner Efecto permanente en el a:visited

rex16 · #1 (**permalink**) 22/09/2010, 14:09

hola a todos,
haber; cree una capa horizontal para el menu superior y dentro otra para agregarlo, ahi meti una lista y sus estilos, y todo bien, el resultado:
un lindo menu con fondo azul oscuro y fondo en los enlaces de imagenes en tonos azules y degradados, y al seleccionarlos cambia el fondo de los enlaces a otra imagen, ahi bien en todos los navegadores.

lo que quiero es que cada enlace (que en la web seria cada seccion) al estar visitado(en esa seccion) mantenga el fondo que se ve al seleccionarlo y que al ingresar a la web, por defecto a la index que seria la seccion "portada" aparezca automaticamente seleccionado y de ahi pues cada seccion al visitarla y al salir de cada seccion desaparezca la seleccion...

No se me ocurre como hacer eso,
esto es lo que hice:

HTML
<div id="navegacion">
<div id="menunavegacion">
<ul>
<li><a href="#">Portada</a></li>
<li><a href="#">Rincon Municipal</a>
</li><li><a href="#">Articulos</a></li>
<li><a href="#">Foro</a></li>
<li><a href="#">Acerca de</a></li></ul>
</div>
</div>

CSS

#menunavegacion a{
background-image:url(objetos/fnl.gif);
background-repeat:no-repeat;
position:relative;
text-decoration:none;
text-align:center;
color:white;
display:block;
width:150px;
height:25px;
margin:0px auto;
padding:4px 0px 0px 0px}
* html #menunavegacion a{height:29px;}

#menunavegacion a:hover{
color:#fff;
background-image:url(objetos/fnh.gif);
background-position:center}

El efecto seria en a:visited pero lo he hecho y solo sirve en ie8 y pues queda permanente una vez visitado...

la verdad no creo que sea taaaaaan dificil ,pero no se, me pueden ayudar...

Absalon · #2 (**permalink**) 22/09/2010, 18:24

si un selector estándar funciona en ie, de seguro funciona en el resto de navegadores, sino, habrá algún problema de sintaxis. ahora, lo que quieres hacer necesita persistencia, o sea, que se mantenga el estilo en las distintas peticiones a la pagina, y eso amigo mio se logra por dos medios:

1) cookies + js = al hacer click en un item, creas una cookie que almacene el item seleccionado (o su selector). luego, al cargar la web, js lee la cookie, obtiene el selector y le agrega el estilo css.

2) cookies + tecnologia de servidor = es lo mismo que lo anterior, simplemente el navegador envia la cookie, el servidor la lee, obtiene el valor del item seleccionado y genera el html con la clase (o lo que sea que uses para indicar el estilo) ya puesta en el elemento.

si existe algún otro medio no lo conozco, y si la respuesta no va a la pregunta, puedes preguntar otra vez a ver si entiendo mejor y puedo dar una respuesta correcta.

suerte.

rb3m · #3 (**permalink**) 22/09/2010, 20:07

Ponle un id a los li de la lista:

<ul>
<li id="nav_portada"><a href="#">Portada</a></li>
<li id="nav_rincon"><a href="#">Rincon Municipal</a></li>
...
</ul>

y luego ponle id a cada body dependiendo de la página: <body id="portada">, <body id="rincon">, etc.

Y añade los estilos a tu css:

#portada #nav_portada, #rincon #nav_rincon, ... { estilo de sección actual }

rex16 · #4 (**permalink**) 23/09/2010, 10:59

Absalom gracias por tu respuesta, y haciendo uso de tu sugerencia pregunto de nuevo; no se si lo que dices logre el efecto que busco, lo cierto es que se que el metodo que me sugiere el amigo rb3m es correcto ya que he estado mirando el codigo html css de alguna web que lo tiene y esta escrito de esta forma.

pues bien, rb3m, gracias tambien, pero te cuento que hice estos pasos uno a uno y no sucede nada(tampoco afecta en nada, lo que sugiere que no es algo incoherente, de lo contrario se descuadraria algo)... repito en mis palabras:
1. a cada elemento li le coloco un id asi:<li id="nav_portada"><a href..........
2.en el body de la portada(index.html) coloco <body id="portada">......asi an cada seccion con su id.
3.en la hoja css asi:#portada #nav_portada, #rincon #nav_rincon, ..etc.. todo se coloca seguido y separado por comas, luego dentro de corchetes pongo la imagen:{background-image:url(fondo.gif)}... esto es lo que he hecho

puse tambien el #menunavegacion a:visited{background-image:url(objetos/fondo.gif)}...
serias tan amable de indicarme que falta o que error he hecho.

Guruku · #5 (**permalink**) 29/09/2010, 10:35

Según lo que entendí quieres que el botón azul cambie al pulsarlo a verde y al entrar a la pagina el botón de esa pagina este en rojo y al pulsarlo se ponga verde, es así???

Yo fui mucho más simple, yo puse al botón en la nueva pagina en color rojo y puse en imagen de sustitución la verde.

Haber si me explico lo hice yendo a inspector de etiquetas/comportamientos/+/establecer imagen de barra de navegación, hay eliges la imagen principal, la que sustituye al situarte encima y la que se queda al haberle dado, al cambiar de pagina puse en la primera imagen la ultima, ósea la de ya seleccionado el botón.

Si no me explique bien me avisas y intentare hacer un paso a paso con imágenes.
Ademas como te comente en el otro hilo yo soy vieja escuela y muy simple, así que aun trabajo hasta con tablas y no con Div.

Te pongo mi código por si te sirve.

<a href="index.html" target="_top" onclick="MM_nbGroup('down','group1','inicio1','imagene s/botones/inicio3.jpg',1)" onmouseover="MM_nbGroup('over','inicio1','imagenes/botones/inicio2.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="imagenes/botones/inicio1.jpg" alt="boton inicio" name="inicio1" width="89" height="41" border="0" />

Y el botón de la pagina en la que se esta.

<a href="teatro.html" target="_top" onclick="MM_nbGroup('down','group1','teatro1','imagene s/botones/teatro3.jpg',1)" onmouseover="MM_nbGroup('over','teatro1','imagenes/botones/teatro2.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="imagenes/botones/teatro3.jpg" alt="boton taller de teatro" name="teatro1" width="88" height="41" border="0" /></a>

Adjunto imagen. (Si le das a boton derecho/visualizar imagen lo veras más grande)

rex16 · #6 (**permalink**) 29/09/2010, 15:31

dejame mañana lo analizo, que ahora tengo que salir y te digo... gracias

rex16 · #7 (**permalink**) 30/09/2010, 08:44

haber pues lo que quiero simplemente es que la pestaña de la seccion donde este el visitante se quede seleccionada con la imagen que sera la misma que vea cuando la selecciona con el puntero

de lo que me dices, pues no uso el dreamweaber la estoy escribiendo toda a mano(punto por punto

), la hago en capas y las propiedades onclik, on.. no las utilizo y creo que esas solo son propiedades para tablas, y la verdad no quiero intentar de otra forma (con tablas) porque pierdo lo que llevo

(ya te dije es mi primera web

)....
si sabes algo de lo que dijo rbm3 en un comentario anterior te lo aradezco ya que voy a averiguar sobre eso porque para mi situacion actual creo que esa es la solucion mas limpia y correcta.
gracias