Foros del web, para los que viven de bits

Mahituna · 31-mar-2006, 07:05

Perdonar mi ignorancia nosé como se llama lo que busco pero es como cuando me acerco a los enlaces del foro que se abre como una ventanita que se ve la pregunta del forero sin abrir el enlace. Podríais decirme como se hace.

Muchas gracias.

xevisoyyo · 31-mar-2006, 08:10

Tan solo añade title a tus enlaces

ejemplo
<a href="enlace.html" title="Emisora de música clásica las 24 horas del día.">Música clásica</a>

También puedes usar javascript, pasate por allí si te interesa más.

En el caso de este foro es de gran utilidad, y si no me equivoco usan el ejemplo que te puse.

Saludos

Mahituna · 31-mar-2006, 15:28

Muchas gracias por la pronta respuesta

Pero me surge un problema solo me sale la primera palabra de la frase, e intentado buscar en el foro que me dijiste pero no logro encontrarlo hay muchos mensajes. Si sabes algo te agradezco mogollon tu ayuda.

Por cierto como se llama esta acción?

Un abrazote.

ElAprendiz · 31-mar-2006, 16:34

pon el codigo.

K3NNY · 31-mar-2006, 19:11

Me parece que lo que busca Mahituna es hacerlo automaticamente. De todas formas, si no se explaya un poco mas en su pregunta es dificil ayudar...

causita · 31-mar-2006, 19:51

a lo q se refiere MAHITUNA es a lo sgte:

corrígeme si me equivoco xfavor..

ahora, no es al link directamente, sino a la celda dnd está ubicado el link.

salu2

causita · 31-mar-2006, 20:16

creo q lo q tu estás buscando es algo cómo esto. Es sencillo de usar.

El paso 1 lo colocas dentro de <HEAD>, el paso 2 dentro del <BODY> de tu página, y el 3er paso lo colocas dentro del <A HREF="">, es decir dentro del vínculo.es decir...

Cita:

<a href="#" onMouseover="ddrivetip('aqui colocas el texto que quieras a aparezca','yellow', 100)";
onMouseout="hideddrivetip()">Acerca de mi</a>

donde el # lo sustituyes por la página a la cual quiere hacer referencia

Espero sea de tu ayuda.

salu2

Mahituna · 01-abr-2006, 06:58

Eso es Causita eso buscoooo voy a probarlo graciasssssssssssss a todos

un supermega besoooooooooooo

Mahituna · 01-abr-2006, 07:28

Lo intento y no me sale esperaré cuando tenga un poco más de tiempo creo que no lo copio bien o algo así.

Besotes.

xevisoyyo · 01-abr-2006, 08:10

busca por tooltip

con title creo que cada navegador te mostrara mas o menos caracteres y creo que la unica alternativa es usar javascript

causita · 01-abr-2006, 11:18

Mahituna....voy a explicartelo detalladamente y t lo envio x privado

causita · 01-abr-2006, 11:42

copia el sgte html

Cita:

<html>
<head>



<style type="text/css">

#dhtmltooltip{
position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line

should always appear last within this CSS*/
filter:

progid:DXImageTransform.Microsoft.Shadow(color=gra y,di

rection=135);
}

</style>
</head>
<body>



<div id="dhtmltooltip"></div>

<script type="text/javascript">

/***********************************************
* Cool DHTML tooltip script- © Dynamic Drive DHTML

code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/

for full source code
***********************************************/

var offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=20 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"]

: document.getElementById?

document.getElementById("dhtmltooltip") : ""

function ietruebody(){
return (document.compatMode &&

document.compatMode!="BackCompat")?

document.documentElement : document.body
}

function ddrivetip(thetext, thecolor, thewidth){
if (ns6||ie){
if (typeof thewidth!="undefined")

tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="")

tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}

function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX :

event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY :

event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the

window
var rightedge=ie&&!window.opera?

ietruebody().clientWidth-event.clientX-offsetxpoint :

window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera?

ietruebody().clientHeight-event.clientY-offsetypoint :

window.innerHeight-e.clientY-offsetypoint-20

var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) :

-1000

//if the horizontal distance isn't enough to

accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth)
//move the horizontal position of the menu to the left

by it's width
tipobj.style.left=ie?

ietruebody().scrollLeft+event.clientX-tipobj.offsetWid

th+"px" :

window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
else if (curX<leftedge)
tipobj.style.left="5px"
else
//position the horizontal position of the menu where

the mouse is positioned
tipobj.style.left=curX+offsetxpoint+"px"

//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie?

ietruebody().scrollTop+event.clientY-tipobj.offsetHeig

ht-offsetypoint+"px" :

window.pageYOffset+e.clientY-tipobj.offsetHeight-offse

typoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}

function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}

document.onmousemove=positiontip

</script>




<A HREF="#" onMouseover="ddrivetip('JavaScriptKit.com

JavaScript tutorials','yellow', 300)";
onMouseout="hideddrivetip()">AQUI COLOCAS EL

VINCULO</A>


</body>
</html>

Como podrás ver el código está dividido en 3 partes:
- PARTE #1 -> va entre <head> y </head>
- PARTE #2 -> va entre <body> y </body>
- PARTE #3 -> dentro del tag <a href=...>

solo te interesa lo q está en negrita ok? ahora bien, en la parte 3, verás el sgte código

Cita:

onMouseover="ddrivetip('Bienvenidos a MAHITUNA.COM','yellow', 300)";

, el cual funciona de la sgte manera

Cita:

ddrivetip('TU TEXTO A MOSTRAR', 'COLOR DE FONDO OPCIONAL', ANCHO DE LA VENTANITA)

y se verá algo asi

causita · 01-abr-2006, 11:48

no te lo envié x privado xq demasiados caracteres. Espero ahora esté mas claro. Cualquier consulta la haces x esta misma via o si gustas me envias un privado.

salu2

Mahituna · 05-abr-2006, 01:46

Lo probaré y te digo cosas

Muchas gracias causita por todas las molestias que te has tomado . A la vuelta de vacans te lo cuento.

UN ABRAZOOOO

Eggun · 05-abr-2006, 06:43

También ALT, por title

Es también un consejo.

webosiris · 05-abr-2006, 07:08

Cita:

Iniciado por Eggun

También ALT, por title

Es también un consejo.

aclaro que la etiqueta alt es para texto ALTERNATIVO y se usa para cuando (por ej.) no carga una imagen. Para mostrar un texto al pasar con el mouse, se usa el ya mencionado TITLE.

31-mar-2006, 07:05	#1 (permalink)
Mahituna Fecha de Ingreso: marzo-2006 Mensajes: 28	Al acercarse a un link la explicacion Perdonar mi ignorancia nosé como se llama lo que busco pero es como cuando me acerco a los enlaces del foro que se abre como una ventanita que se ve la pregunta del forero sin abrir el enlace. Podríais decirme como se hace. Muchas gracias.

31-mar-2006, 15:28	#3 (permalink)
Mahituna Fecha de Ingreso: marzo-2006 Mensajes: 28	Gracia Muchas gracias por la pronta respuesta Pero me surge un problema solo me sale la primera palabra de la frase, e intentado buscar en el foro que me dijiste pero no logro encontrarlo hay muchos mensajes. Si sabes algo te agradezco mogollon tu ayuda. Por cierto como se llama esta acción? Un abrazote.

31-mar-2006, 19:11	#5 (permalink)
K3NNY Colaborador Fecha de Ingreso: marzo-2004 Ubicación: ARGENTINA! Mensajes: 1.497	Me parece que lo que busca Mahituna es hacerlo automaticamente. De todas formas, si no se explaya un poco mas en su pregunta es dificil ayudar... __________________ delFuego.com.ar mi tumblelog sobre diseño La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.

31-mar-2006, 19:51	#6 (permalink)
causita Fecha de Ingreso: noviembre-2002 Ubicación: Lima-Perú Mensajes: 1.849	a lo q se refiere MAHITUNA es a lo sgte: corrígeme si me equivoco xfavor.. ahora, no es al link directamente, sino a la celda dnd está ubicado el link. salu2 __________________ \|\| no hay pregunta tonta....lo q hay son tontos q no preguntan \|\| d-.-b El Causita

31-mar-2006, 20:16	#7 (permalink)
causita Fecha de Ingreso: noviembre-2002 Ubicación: Lima-Perú Mensajes: 1.849	DHTML Tooltip creo q lo q tu estás buscando es algo cómo esto. Es sencillo de usar. El paso 1 lo colocas dentro de <HEAD>, el paso 2 dentro del <BODY> de tu página, y el 3er paso lo colocas dentro del <A HREF="">, es decir dentro del vínculo.es decir... Cita: <a href="#" onMouseover="ddrivetip('aqui colocas el texto que quieras a aparezca','yellow', 100)"; onMouseout="hideddrivetip()">Acerca de mi</a> donde el # lo sustituyes por la página a la cual quiere hacer referencia Espero sea de tu ayuda. salu2 __________________ \|\| no hay pregunta tonta....lo q hay son tontos q no preguntan \|\| d-.-b El Causita

31-mar-2006, 08:10	#2 (permalink)
xevisoyyo Fecha de Ingreso: mayo-2005 Mensajes: 165	Tan solo añade title a tus enlaces ejemplo <a href="enlace.html" title="Emisora de música clásica las 24 horas del día.">Música clásica</a> También puedes usar javascript, pasate por allí si te interesa más. En el caso de este foro es de gran utilidad, y si no me equivoco usan el ejemplo que te puse. Saludos

31-mar-2006, 16:34	#4 (permalink)
ElAprendiz Fecha de Ingreso: noviembre-2002 Ubicación: Maipu, Chile Mensajes: 3.698	pon el codigo.

01-abr-2006, 06:58	#8 (permalink)
Mahituna Fecha de Ingreso: marzo-2006 Mensajes: 28	Eso es Causita eso buscoooo voy a probarlo graciasssssssssssss a todos un supermega besoooooooooooo

01-abr-2006, 07:28	#9 (permalink)
Mahituna Fecha de Ingreso: marzo-2006 Mensajes: 28	Lo intento y no me sale esperaré cuando tenga un poco más de tiempo creo que no lo copio bien o algo así. Besotes.

01-abr-2006, 08:10	#10 (permalink)
xevisoyyo Fecha de Ingreso: mayo-2005 Mensajes: 165	busca por tooltip con title creo que cada navegador te mostrara mas o menos caracteres y creo que la unica alternativa es usar javascript

01-abr-2006, 11:18	#11 (permalink)
causita Fecha de Ingreso: noviembre-2002 Ubicación: Lima-Perú Mensajes: 1.849	Mahituna....voy a explicartelo detalladamente y t lo envio x privado __________________ \|\| no hay pregunta tonta....lo q hay son tontos q no preguntan \|\| d-.-b El Causita

01-abr-2006, 11:42	#12 (permalink)
causita Fecha de Ingreso: noviembre-2002 Ubicación: Lima-Perú Mensajes: 1.849	copia el sgte html Cita: <html> <head> <!-- AQUI EMPIEZA LA PARTE #1--> <style type="text/css"> #dhtmltooltip{ position: absolute; width: 150px; border: 2px solid black; padding: 2px; background-color: lightyellow; visibility: hidden; z-index: 100; /Remove below line to remove shadow. Below line should always appear last within this CSS/ filter: progid:DXImageTransform.Microsoft.Shadow(color=gra y,di rection=135); }<!-- AQUI TERMINA LA PARTE #1--> </style> </head> <body> <!-- AQUI EMPIEZA LA PARTE #2--> <div id="dhtmltooltip"></div> <script type="text/javascript"> /*********************************************** * Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code **********************************************/ var offsetxpoint=-60 //Customize x offset of tooltip var offsetypoint=20 //Customize y offset of tooltip var ie=document.all var ns6=document.getElementById && !document.all var enabletip=false if (ie\|\|ns6) var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : "" function ietruebody(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function ddrivetip(thetext, thecolor, thewidth){ if (ns6\|\|ie){ if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px" if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor tipobj.innerHTML=thetext enabletip=true return false } } function positiontip(e){ if (enabletip){ var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft; var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop; //Find out how close the mouse is to the corner of the window var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20 var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20 var leftedge=(offsetxpoint<0)? offsetxpoint(-1) : -1000 //if the horizontal distance isn't enough to accomodate the width of the context menu if (rightedge<tipobj.offsetWidth) //move the horizontal position of the menu to the left by it's width tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWid th+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px" else if (curX<leftedge) tipobj.style.left="5px" else //position the horizontal position of the menu where the mouse is positioned tipobj.style.left=curX+offsetxpoint+"px" //same concept with the vertical position if (bottomedge<tipobj.offsetHeight) tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeig ht-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offse typoint+"px" else tipobj.style.top=curY+offsetypoint+"px" tipobj.style.visibility="visible" } } function hideddrivetip(){ if (ns6\|\|ie){ enabletip=false tipobj.style.visibility="hidden" tipobj.style.left="-1000px" tipobj.style.backgroundColor='' tipobj.style.width='' } } document.onmousemove=positiontip </script> <!-- AQUI TERMINA LA PARTE #2--> <!-- AQUI EMPIEZA LA PARTE #3 --> <A HREF="#" onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)"; onMouseout="hideddrivetip()">AQUI COLOCAS EL VINCULO</A> <!-- AQUI TERMINA LA PARTE #3 --> </body> </html> Como podrás ver el código está dividido en 3 partes: - PARTE #1 -> va entre <head> y </head> - PARTE #2 -> va entre <body> y </body> - PARTE #3 -> dentro del tag <a href=...> solo te interesa lo q está en negrita ok? ahora bien, en la parte 3, verás el sgte código Cita: onMouseover="ddrivetip('Bienvenidos a MAHITUNA.COM','yellow', 300)"; , el cual funciona de la sgte manera Cita: ddrivetip('TU TEXTO A MOSTRAR', 'COLOR DE FONDO OPCIONAL', ANCHO DE LA VENTANITA) y se verá algo asi __________________ \|\| no hay pregunta tonta....lo q hay son tontos q no preguntan \|\| d-.-b El Causita

01-abr-2006, 11:48	#13 (permalink)
causita Fecha de Ingreso: noviembre-2002 Ubicación: Lima-Perú Mensajes: 1.849	no te lo envié x privado xq demasiados caracteres. Espero ahora esté mas claro. Cualquier consulta la haces x esta misma via o si gustas me envias un privado. salu2 __________________ \|\| no hay pregunta tonta....lo q hay son tontos q no preguntan \|\| d-.-b El Causita

05-abr-2006, 01:46	#14 (permalink)
Mahituna Fecha de Ingreso: marzo-2006 Mensajes: 28	Lo probaré y te digo cosas Muchas gracias causita por todas las molestias que te has tomado . A la vuelta de vacans te lo cuento. UN ABRAZOOOO

05-abr-2006, 06:43	#15 (permalink)
Eggun Fecha de Ingreso: abril-2006 Mensajes: 18	También ALT, por title También ALT, por title Es también un consejo.

05-abr-2006, 07:08	#16 (permalink)
webosiris Moderador HTML y CSS Fecha de Ingreso: noviembre-2002 Ubicación: /home/montevideo Mensajes: 6.553	Cita: Iniciado por Eggun También ALT, por title Es también un consejo. aclaro que la etiqueta alt es para texto ALTERNATIVO y se usa para cuando (por ej.) no carga una imagen. Para mostrar un texto al pasar con el mouse, se usa el ya mencionado TITLE. __________________ Oraculus.com. Sitios web artesanales para el siglo XXI PSD a HTML. Tu diseño. Nuestro código.

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado