JS-onMouseOver escribe x en un div
2 seguidores
como?
el onMouseOver de cada img podria escribir una info-texto diferente, que viene de una bdd, en otro div.
creo que el plantemiento podia ser
definir una variable "leo" que lea el textos traidos de la bdd.
definir una variable "escribe" que al hacer onmouseover active "leo" y lo copie lo leido en un div "info" quitandole el hidden.
se hizo algo parecido en https://www.domestika.org/foros/viewtopic.php?t=13937
esa vez se trataba de que el onmouseover leyera los valores de "x" e "y" y pasarselos al top left de un div.
(genialmente resuelto por meddle)
meddle
esta vez en lugar de pillar el x/y del id deberias pillar el texto que debe ir en el div de informacion desde un atributo title del elemento a. Te dejo que lo hagas tu, ya me diras si tienes problemas ;)
SSS
me parece un buen y justo trato
ya que asi aprendo a hacer este y
me tendre que aprender el anterior...
manos a la obra.
meddle
venga, ahi va:
http://meddle.dzygn.com/others/mapa/index2.html
Esta comentado, como siempre. Los estilos los pones tu. Tambien puedes hacer que al principio tenga un estilo por defecto (via CSS) y luego lo cambias en el onmouseover. Sigue el ejemplo:
element.style.propiedad = valor
como en el caso de document.getElementById("punto").style.left = x + "px";
Tienes 1000 posibilidades. A disfrutarlo.
SSS
ok,
ahora estoy intentando posicionarlo
correctamente:
no puede ser absolute. dado que el meollo se centra en la pag, el div "info" tiene que ir siguiendo la posicion centrada de lo demas al igual que pasa con el div "punto"
onmouseovers
en el caso del "punto" el div esta escrito en el html y solo cambio con el JS su posicion
pero el div "info" se escribe con JS y no se como colocarlo en un punto sin que sea absolute. por ello al escalar la ventana se me descoloca.
hay alguna manera de corregir esto?
a lo mejor se podria poner el div en html y que el JS solo le añada el title?
cuando carga la pag me lo coloca donde quiere, si es transparente y no tiene texto no pasa nada, pero me sale una molesta barra de scroll vertical. cuando hago el onmouseover me lo recoloca y pone el texto bien.
he añadido codigo a las funciones muestrame y al esconde para que afecten al div "info"
curiosamente (para mi) las funciones muestrame y esconde afectan al color del td > bgcolor="#999999" donde he metido el div "punto"
y tambien td donde he metido el div "info2" que es la posicion en la que quiero poner el div "info".
meddle
yo te recomendaria que posicionaras el div info justo al lado del div punto. Poniendolo donde esta ahi, es decir, en el mismo sitio donde haces el mouseover, entras en conflicto (parpadea porque estas continuamente entrando y saliendo de la capa, no se si mesplico).
el punto tambien deberia insertarse con JS, no tiene sentido que los navegadores que no lo acepten vean un punto fijo que no marca nada. Como ya dije en el otro post, si me apuras el mapa tambien es algo que deberia insertarse via JS.
Dame 5 minutos.
SSS
tambien me sale un tag cuando hago el onmouse over con lo que dice el title, es decir se ve el <br> !
cuando ponga el php se vera todo?
lo del parpadeo da igual si no afecta a los colores de fondo ni al mapa.
si solo se esconde el texto en un div transparente y el punto es ok.
si el mapa se pone en div y parpadea malo,
si el fondo gris oscuro del texto va en el div y no se esconde sino que solo escribe el title tambien malo...
meddle
haz CTRL+R en la pagina del ejemplo, lo he cambiado.
lo del br en el titulo dejame que me lo estudie, no entiendo lo del php. al fin y al cabo el php en el titulo se vera reducido a html, no?
SSS
eso esta de pm
pero no es el caso
el texto y el div "info"
tienen que salir sobre la mancha gris siempre indepencientemente de la colocacion del punto
recarga la pag onmouseovers
tienes razon, no nos liemos con el php.
meddle
entonces le cambias la posicion en el CSS y eliminas la parte donde cambia la posicion para cada punto (en muestrame, donde pone // aqui podrias cambiar el estilo de la capa info. algo como:)
SSS
llevo todo el dia dandole vueltas y soy incapaz de colocar donde quiero el div, si este se escribe desde js. seguro que se puede hacer pero no se como, asi que:
<fieldset>a lo mejor se podria poner el div en html y que el JS solo le añada el title? </fieldset>
por tanto he borrado el js que escribe el div
y me he centrado en
<code> //obtenemos texto informativo a partir del title:
document.getElementById("info").innerHTML = this.title;</code>
violá
ya esta!!
http://www.fechevarria.org/pruebas/onmouseovers.html
tu propuesta es mas completa y tb muy bonita, tomo nota para otra ocasion.
solo queda lo del br en el tag...
gracias
meddle
Para eso deberas encontrar 'algo' que se repita en los titulos para hacer que sea el punto de corte para una nueva linea. Por ejemplo un punto seguido de espacio. La funcion cambiaria a algo como:
<code> newtitle = this.title;
newtitle = newtitle.replace(/. /g, ".<br>");
document.getElementById("info").innerHTML = newtitle;
</code>
SSS
perfecto!
por ejemplo con un espacio mas despues del punto
antes
<code>(/. /g, ".<br>"); </code>
ahora
<code>(/. /g, ".<br>"); </code>
de esta forma no interpreta cada espacio como un newtitle.
solo es newtitle con "puntodosespacios"
http://www.fechevarria.org/pruebas/onmouseovers.html
thnx again
meddle
sastamente, solo falta cambiar el verde por otra cosa y listos
un placer ;)