Zona Interactiva que aparece!!!

[reycoy]

Hola a todos!!.
He colgado una página en la red con unas imagenes que disponen de zonas interactivas desde las cuales te puedes mover hacia otras páginas y enlaces varios.
El problema es que en momentos determinados, sin saber muy bien el porque, al pinchar en estas zonas, se quedan remarcadas dando una imagen un poco chapucera.
¿Porqué se produce esto?¿Teneis alguna idea?

[KarlanKas]

Pon esto en la etiqueta del enlace:

<A onfocus="this.blur()" ...><IMG ...>

[tunait]

¿Porqué se produce esto?¿Teneis alguna idea?

Eso te sucederá en cualquier enlace html (osea, cualquier enlace creado mediante <a href) que al pinchar toma el foco ese elemento y hasta que no se pincha en otro lado no se pierde.

En los enlaces, tanto de texto como imágenes (también los <area> de los mapas) al clickar queda el recuadro de puntitos.

Puedes pedir que tras hacer click pierda el foco ese enlace (y con el foco se va el recuadrito) con el truco que te dejó Don KarlanKas.

Un saludo

[FLECHA]

¿como seria la etiqueta del enlace y como quedaria finalmente?

Podriais ponerlo? mi desconocimiento es total, gracias.

[tunait]

En el caso del mapa habría que colocarlo en cada tag de area

por ejemplo:

<map name="pepe">
<area shape="rect" coords="0,0,150,434" href="pagina1.htm" onclick="this.blur()">
<area shape="circle" coords="342,422,190" href ="pagina2.htm" onclick="this.blur()">
</map>

En el caso de un enlace de texto o imagen pues también se lo pondríamos en el tag donde esté el href

<a href="pagina.html" onclick="this.blur()">

el blur() lo que hace es quitarle el foco a un elemento que lo tenga

saludos

[FLECHA]

Así es como está en la pagina que tengo diseñada, intento hacer lo que explicas anteriormente pero no me sale, podrias introducir los cambios en el codigo de abajo para verlo.






<map name=fadsfasdf30><area shape=rect coords=81,2,140,61 href=Paginas/pagina1.html alt=""></map><map name=fadsfasdf75><area shape=rect coords=0,0,224,242 href=Paginas/pagina1.html alt=""></map><map name=fadsfasdf6b92><area shape=rect coords=1,1,224,244 nohref alt=""></map>

[tunait]

Claro, sería algo así

<map name=fadsfasdf30>
<area shape=rect coords=81,2,140,61 href=Paginas/pagina1.html alt="" onclick="this.blur()">
</map>

<map name=fadsfasdf75>
<area shape=rect coords=0,0,224,242 href=Paginas/pagina1.html alt="" onclick="this.blur()">
</map>

<map name=fadsfasdf6b92>
<area shape=rect coords=1,1,224,244 nohref alt="" onclick="this.blur()">
</map>

[FLECHA]

! Joder que torpe soy !

Oye tunait; en la primera respuesta que me diste, antes de onclick no pones las comillas y en la segunda respuesta si las has puesto ¿puede ser que por esto no me funcionaba? lo pruebo y te cuento. Así quedó y no me funciona

<map name=fadsfasdf3067007>
<area shape=rect coords=81,2,140,61 href=Paginas/pagina1.html alt="" onclick="this.blur()">
</map>

<map name=fadsfasdf759ce3>
<area shape=rect coords=0,0,224,242 href=Paginas/pagina1.html alt="" onclick="this.blur()">
</map>

<map name=fadsfasdf6b9254>
<area shape=rect coords=1,1,224,244 nohref alt="" onclick="this.blur()">
</map>

[tunait]

¿antes del onclick? nop, no van comillas.

Quizás te refieras a las comillas que lleva el alt="" ??

pero si te fijas en lo que puse en negritas no puse comillas antes del onclick

¿qué es lo que no te funciona? el mapa o el que desaparezca el recuadro de puntos al pinchar?

[FLECHA]

No funciona el que desaparezca el recuadro.

[tunait]

Lo que haré es que te colgaré un ejemplo y así puedes probarlo y copiar el código fuente.

Pero dentro de un rato que me voya cenar

[FLECHA]

Yo hago lo propio, pero delante del ordenado ya que tengo que terminar una paginita para el Lunes sin falta, ya está casi terminada, pero quisiera incluirle este detallito del recuadro antes de los retoques finales. Creo que por hoy ya está bien de trabajar, pues me acabo de dar cuenta que son las 23:11 (en Canarias claro).
A los que somos torpes como yo, el diseño de una web nos lleva un poco mas de tiempo. Seguramente mañana no pueda ver tu respuesta, pero el Domingo sin falta te contesto una vez lo pruebe, ok.

[mifune]

Hola FLECHA, hola tunait.

Bueno, esto no tiene ningún mérito porque es un puro copy&paste (espero que no aparezca ningún chalado escupiéndome por ello ), pero yo es el que utilizo. Ah! te lo pongo con la firma del autor incluida.

- Primero crea un archivo .js (que creo que será lo más práctico si tienes varias páginas) con esto:

/ 4LevelWebs ver1.0 [Based on code by Eddie Traversa]
function unblur() {
this.blur();
}
function blurLinks() {
if (!document.getElementById) return;
theLinks = document.getElementsByTagName("A");
theAreas = document.getElementsByTagName("AREA");
for(i=0; i<theLinks.length; i++) {theLinks[i].onfocus = unblur;}
for(i=0; i<theAreas.length; i++) {theAreas[i].onfocus = unblur;}
}
//-->blurLinks End

-Luego en el head lo vinculas y en el body pones un OnLoad="blurLinks()"

Como ya te he dicho a mi me funciona perfectamente y me parece más cómodo que ir tocando todos los enlaces.

Un Saludo.

[FLECHA]

Hola mifune.

A mi no me gusta molestar mas de lo debido, así que intentaré ser breve; desgraciadamente para mi, no tengo ni idea de html ya que estoy empezando a introducirme en ello. Entre otras cosas no sé lo que es un archivo con extensión .js, y referente a lo que me comentas del head y el body pues me pierdo a medias.

Por lo tanto; si estais dispuestos a explicarlo para un desconocedor como yo; perfecto, y si no yo no quisiera robaros tiempo con cosas que a lo mejor son muy basicas ok. Gracias

[mifune]

Ok, ok, no hay problema FLECHA, te cuento:

El script que te puse puedes ponerlo en cada una de tus páginas entre las etiquetas <HEAD> y </HEAD> o bien hacer lo siguiente:

- Abres el bloc de notas y creas un archivo de texto que podemos llamar blurlinks.txt. Coges el script, lo metes ahí y guardas los cambios. Luego le cambias la extensión al archivo por esta .js y te queda blurlinks.js. Y por último lo dejas en la carpeta raiz de tu web.

- Ahora vamos a las páginas. Entre <HEAD> y <HEAD> vinculas el archivo que creaste de la siguiente forma: <script language="JavaScript" src="blurlinks.js"></script>. Luego vas al tag <BODY> y pones un onLoad que haga referencia a la función del script: <BODY onLoad= "blurLinks()">.

Listo!!! De esta forma no tiene que darte ningún problema. Si quisieras poner todo el código en cada una de tus páginas y no utilizar el archivo .js, tendría que ser así:

<HEAD>

<script language="JavaScript">
// 4LevelWebs ver1.0 [Based on code by Eddie Traversa]
function unblur() {
this.blur();
}
function blurLinks() {
if (!document.getElementById) return;
theLinks = document.getElementsByTagName("A");
theAreas = document.getElementsByTagName("AREA");
for(i=0; i<theLinks.length; i++) {theLinks[i].onfocus = unblur;}
for(i=0; i<theAreas.length; i++) {theAreas[i].onfocus = unblur;}
}
//-->blurLinks End
</script>

</HEAD>

Suerte y un saludo.

[tunait]

Buenaass,

tarde pero seguro

al regreso de la cena cuando leí que hasta el domingo aproveché pa dejarlo p'al domingo y aquí estamos.

La opción de usar un javascript para que repase los links y les asigne el blur() es muy práctica te ahorra teclearlos uno por uno.

De todas formas, para que veas como va y eso he puesto el ejemplillo en la red.

Puse dos imágenes con un mapa cada una. Uno de los mapas lleva la instrucción y el otro no. Fíjate en la diferencia al pinchar en una o en la otra

Un saludo

[FLECHA]

Hola tunait
Hola mifune


tunait referente a lo del Domingo mil disculpas, pero es que cuando llegue el Sabado por la noche me entró el mono del ordenador .

Bueno ahora hos dejare para poner en practica todo lo que me habeis explicado.

Por cierto mifune, cada vez que veo la foto que tienes debajo de tu nick me parto el culo de risa , es autentica.

Bueno gracias por vuestro tiempo, seguiremos por aqui mas tarde.

[mifune]

Por cierto mifune, cada vez que veo la foto que tienes debajo de tu nick me parto el culo de risa , es autentica.

Bueno ahora hos dejare para poner en practica todo lo que me habeis explicado.

No dejes de informarnos

Un Saludo.

[FLECHA]

Hola mifune:

En cuanto a la foto es que no puedo aguantarlo, a mi me hizo gracia desde el primer dia que la vi .


Te informo de que todas las ayudas que me disteis tunait y tu, ya estan caminando perfectamente en la ultima pagina que he diseñado y la cual entrego mañana (ESTO FUE UN DETALLITO PARA EL DISEÑO). A mitad de camino me lié , pero despues de despejarme un poco, LO CONSEGUÍ Y todo GRACIAS a VOSOTROS . bueno;..........................seguiremos por aqui ok.

[Ernesto]

Hola:

Yo uso Dreamweaver para diseñar mis páginas y uso una extensión gratuita que se llama IE Link Scrubber. Dicha extensión elimina esa marca chapucera de la que hablais.

Espero haber sido de utilidad.

Saludos a todos.