16 replies to this topic

[perseo]

Me gustaría saber como poner una palabra (más bien un kanji en mi blog), y que al pasar el ratón por encima aparezca la típica cajita amarilla en la que pueda poner ahí la lectura del kanji y la traducción. En blogger.

Eso está en muchos sitios, y llevo un rato buscando pero no encuentro exactamente como ponerlo

[Dhampir]

Luke, use the source. ¿Te refieres a una simple imagen con un caption?

[perseo]

Luke, use the source. ¿Te refieres a una simple imagen con un caption?

En el blog pongo un texto como este:

冬晴れの青空が広がった三十一日、東日本各地でこの冬一番の寒さ
を記録した。　気象庁によると、関東地方などに雪を降らせた上空

[perseo]

Luke, use the source. ¿Te refieres a una simple imagen con un caption?

En el blog pongo un texto como este:

冬晴れの青空が広がった三十一日、東日本各地でこの冬一番の寒さ
を記録した。


Pues quiero que al pasar el ratón por encima de un kanji salga una ventanita en la que pueda poner la traducción y la lectura. Y así con todos los kanji. Si pones el ratón encima del botón de quote en este post, quiero esa misma cajita que se muestra y que pone "Responder directamente a este mensaje"

Edited by perseo, 30 May 2009 - 03:27 PM.

[Takamura]

Creo que lo que buscas es esto: http://www.rikai.com/perl/Home.pl

[kutxipoo]

Pero el rikai es un diccionario que implementas en el navegador. Supongo que lo que quiere, es lo que hace el rikai pero sólo en su página, ¿no? La verdad, es que está muy bien, excepto el diccionario de nombres que a mí no me pilla ninguno. :s

[perseo]

Si, es eso mismo del Rikai, pero para hacerlo yo en mi blog.

Se que debe ser una tontería, poner una línea de código y eso, pero la cosa es que no se qué línea es XD

[Zerfoinder]

Si, es eso mismo del Rikai, pero para hacerlo yo en mi blog.

Se que debe ser una tontería, poner una línea de código y eso, pero la cosa es que no se qué línea es XD

Pues yo no soy un letrado en eso, pero la única forma que se me ocurre es que los kanjis no sean escritos, sino que sean imagenes, i los insertas como tal, y en el codigo de insersion de imagen:

<img src= "miimagendeloskanjis.jpg">

a ese le agregas el codigo ALT que sirve para el cuadrito ese amarillo (y también para mostrarse ese texto cuando la imagen aun no se carga)

<img src= "miimagendeloskanjis.jpg" alt= "Este texto está en el cuadrito amarillo">

Algo así funcionaba eso, tampoco me creas mucho, que te lo estoy diciendo de memoria y hace más de 7 años que no hago nada en html, bueno, nada como eso.

[Charlie Wolfgang Van Hellsing]

Umm pense tener la solucion, pero ahora veo que es sobre texto, anyway, no tengo el codigo a mano pero eso se hacia con javascript, busca "tooltip" en java script.

T.T

[raulero]

Pues con un title a la etiqueta que quieras ya te debería valer, la línea de abajo tiene un title pero no sé si la procesará bien el parser
Para cosas más elaboradas hay muchas cosas en javascript




lo que sea

edit: No, se lo zampa
la cosa es algo como <p title="loquesea"> Lo que sea </p>

Edited by raulero, 31 May 2009 - 12:21 AM.

[Mortan]

Tanto en HTML 4.01 como en la nueva versión 5.0, la propiedad es title.
Es una propiedad común, de modo que cualquier elemento seleccionable pude llevarla.

<a href="xxxx" title="Este link lleva atal o cual sitio">
<img src="atras.jpg" alt="Atr&aacute;s" title="Volver a la p&aacutegina anterior">

La propiedad alt es de la etiqueta IMG y sirve para poner lo que tiene que aparecer si no se carga la imagen. Lo que pasa es que muchos navegadores (empezando por IE) la ponen de tooltip en las imágenes si no hay propiedad title (y en las versiones 5 y anteriores del IE, AUNQUE haya propiedad title).

[perseo]

He conseguido ponerlo, aunque los que están más a la derecha del texto se cortan

La cosa ha quedado de esta forma. Se aceptan sugerencias para mejorarlo

Para ponerlo he seguido estas instrucciones.

[Mortan]

Ah... hora de entrar en CSS.

Para que algo aparezca encima de otras cosas, hay que forzarlo para que se ponga delante, usando la propiedad z-index.
No todos los navegaores la manejan bien, pero debería funcionar al menos en IE8 y FireFox.
http://www.w3schools...pos_z-index.asp

[Maeghith]

No, mortan, el z-index ya lo tiene definido a 10, el problema es el overflow de un par de contenedores.

Tienes que buscar en la sección de CSS los lugares donde se define el overflow del contenedor con id="main-wrapper", que puede ser parecido a esto:

#main-wrapper {
[…]
overflow:hidden;
[…]
}

y el contenedor con class="post-body" que puede ser algo parecido a esto:

.post-body {
[…]
overflow:hidden;
[…]
}

en esos 2 tienes que quitar la linea del overflow.

Eso es posible que te de algún problema con otras cosas, así que te sugiero que uses el tag "acronym" para esto, tendrías que cambiar esto:

<a href="http://kanjimania.blogspot.com/2009/05/textos-de-examen.html#">最低気温<span>さいていきおん la temperatura más baja</span></a>

por esto otro:

<acronym title="さいていきおん la temperatura más baja">最低気温</acronym>

edit: PD refrigeración por radiación

Edited by Maeghith, 04 June 2009 - 02:28 PM.

[Charlie Wolfgang Van Hellsing]

refrigeración por radiación?

Pensé que hay ponías de donde habías sacado lo del acronym xD

[Maeghith]

no, lo pregunta perseo en el blog, supongo que debería haberle contestado allí… pero ya estaba contestando aquí y me pillaba de paso XD

[Takamura]

edit: PD refrigeración por radiación

Perseo, por si te sirve de algo: 放射冷却