Foros del Web » Creando para Internet » HTML »

Zona Interactiva que aparece!!!

Estas en el tema de Zona Interactiva que aparece!!! en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/07/2003, 02:19
 
Fecha de Ingreso: junio-2003
Mensajes: 318
Antigüedad: 14 años, 5 meses
Puntos: 0
Pregunta Zona Interactiva que aparece!!!

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?
  #2 (permalink)  
Antiguo 21/07/2003, 06:59
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 16 años
Puntos: 60

Pon esto en la etiqueta del enlace:

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

__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #3 (permalink)  
Antiguo 24/07/2003, 05:50
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Cita:
¿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
  #4 (permalink)  
Antiguo 25/07/2003, 13:53
Avatar de FLECHA  
Fecha de Ingreso: mayo-2003
Ubicación: Mi casa
Mensajes: 409
Antigüedad: 14 años, 6 meses
Puntos: 1
¿como seria la etiqueta del enlace y como quedaria finalmente?

Podriais ponerlo? mi desconocimiento es total, gracias.
  #5 (permalink)  
Antiguo 25/07/2003, 13:58
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
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
  #6 (permalink)  
Antiguo 25/07/2003, 16:01
Avatar de FLECHA  
Fecha de Ingreso: mayo-2003
Ubicación: Mi casa
Mensajes: 409
Antigüedad: 14 años, 6 meses
Puntos: 1
no me funciona

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>
  #7 (permalink)  
Antiguo 25/07/2003, 16:14
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
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>

  #8 (permalink)  
Antiguo 25/07/2003, 16:26
Avatar de FLECHA  
Fecha de Ingreso: mayo-2003
Ubicación: Mi casa
Mensajes: 409
Antigüedad: 14 años, 6 meses
Puntos: 1
! 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>

Última edición por FLECHA; 25/07/2003 a las 16:35
  #9 (permalink)  
Antiguo 25/07/2003, 16:43
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
¿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?
  #10 (permalink)  
Antiguo 25/07/2003, 17:06
Avatar de FLECHA  
Fecha de Ingreso: mayo-2003
Ubicación: Mi casa
Mensajes: 409
Antigüedad: 14 años, 6 meses
Puntos: 1
No funciona el que desaparezca el recuadro.
  #11 (permalink)  
Antiguo 25/07/2003, 17:16
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
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
  #12 (permalink)  
Antiguo 25/07/2003, 17:29
Avatar de FLECHA  
Fecha de Ingreso: mayo-2003
Ubicación: Mi casa
Mensajes: 409
Antigüedad: 14 años, 6 meses
Puntos: 1
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.
  #13 (permalink)  
Antiguo 25/07/2003, 20:31
Avatar de mifune  
Fecha de Ingreso: junio-2003
Ubicación: BCNeta
Mensajes: 466
Antigüedad: 14 años, 6 meses
Puntos: 0
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.
  #14 (permalink)  
Antiguo 26/07/2003, 16:28
Avatar de FLECHA  
Fecha de Ingreso: mayo-2003
Ubicación: Mi casa
Mensajes: 409
Antigüedad: 14 años, 6 meses
Puntos: 1
De acuerdo

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
  #15 (permalink)  
Antiguo 26/07/2003, 18:24
Avatar de mifune  
Fecha de Ingreso: junio-2003
Ubicación: BCNeta
Mensajes: 466
Antigüedad: 14 años, 6 meses
Puntos: 0
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.
  #16 (permalink)  
Antiguo 27/07/2003, 03:57
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
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
  #17 (permalink)  
Antiguo 27/07/2003, 04:25
Avatar de FLECHA  
Fecha de Ingreso: mayo-2003
Ubicación: Mi casa
Mensajes: 409
Antigüedad: 14 años, 6 meses
Puntos: 1
De acuerdo

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.
  #18 (permalink)  
Antiguo 27/07/2003, 12:16
Avatar de mifune  
Fecha de Ingreso: junio-2003
Ubicación: BCNeta
Mensajes: 466
Antigüedad: 14 años, 6 meses
Puntos: 0
Cita:
Por cierto mifune, cada vez que veo la foto que tienes debajo de tu nick me parto el culo de risa , es autentica.


Cita:
Bueno ahora hos dejare para poner en practica todo lo que me habeis explicado.
No dejes de informarnos

Un Saludo.
  #19 (permalink)  
Antiguo 27/07/2003, 16:07
Avatar de FLECHA  
Fecha de Ingreso: mayo-2003
Ubicación: Mi casa
Mensajes: 409
Antigüedad: 14 años, 6 meses
Puntos: 1
De acuerdo detallito para el diseño final conseguido

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.
  #20 (permalink)  
Antiguo 29/07/2003, 11:42
Avatar de Ernesto  
Fecha de Ingreso: abril-2003
Ubicación: Canarias
Mensajes: 47
Antigüedad: 14 años, 7 meses
Puntos: 0
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.
__________________
Cuándo se enterará el piano de que no compuso él la partitura, ...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:41.