Foros del Web » Creando para Internet » HTML »

Ver mas info al pasar mouse por ensima

Estas en el tema de Ver mas info al pasar mouse por ensima en el foro de HTML en Foros del Web. Quiero que al pasar el mouse sobre una imagen, me aparezca una capa o algo con un texto de no mas de 2 renglones. Algo ...
  #1 (permalink)  
Antiguo 10/08/2006, 10:50
 
Fecha de Ingreso: diciembre-2003
Ubicación: lanus
Mensajes: 78
Antigüedad: 14 años
Puntos: 0
Ver mas info al pasar mouse por ensima

Quiero que al pasar el mouse sobre una imagen, me aparezca una capa o algo con un texto de no mas de 2 renglones.

Algo sencillo, pero no lo encuentro
Gracias
  #2 (permalink)  
Antiguo 10/08/2006, 16:21
 
Fecha de Ingreso: mayo-2006
Mensajes: 475
Antigüedad: 11 años, 7 meses
Puntos: 58
Con dreamweaver (si lo tienes) es muy facil. Utiliza
comportamientos.
  #3 (permalink)  
Antiguo 10/08/2006, 23:23
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Hola dnmpatricio.

A ver si te sirve esto:

Cita:
<html>

<head>

<title> </title>

<style type="text/css">
<!--
#dhtmltooltip
{position: absolute;
width: 150px;
border: 1px solid #000000;
padding: 2px;
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=bla ck,direction=135);}
//-->
</style>

</head>

<body>

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

<script type="text/javascript">
<!--
/***********************************************
* - © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
***********************************************/

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.offsetWidth+"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.offsetHeight-offsetypoint+"px"

: window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"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="TU PAGINA WEB.COM" onmouseover="ddrivetip('<FONT ...>Linea 1, Linea 1, Linea 1<br

/>Linea 2, Linea 2, Linea 2</FONT>','#FFFFFF', 170)" onmouseout="hideddrivetip()" onclick =

"this.target='_blank'"><img src="TU IMAGEN.JPG" alt="" title="" /></a>

</body>
</html>
Nota: #FFFFFF = color de fondo del recuadro, 170 = width (ancho del recuadro)

¡Que tengas suerte!
__________________
· Lo poco que sé, lo he aprendido de AQUÍ ·
· No contesto por M.P. ·
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 18:55.