estilo diferente de link

[migueilichenco]

Bueno no sabia donde poner esto asi que lo coloque en este foro, me gustaria saber si alguien sabe que lenguaje usa o como s ehace estos enlases verdes de esta pagina web

computing.net/drivers/wwwboard/forum/5193.html

como veran cuando pones el mouse sobre el enlase sale una pequeña ventana y me gustaria hacer eso para mi web, alguna ayuda?

gracias de antemano

[ludovico2000]

No he podido ver cómo lo ha hecho exactamente,pero algo así se podría hacer con unas capas ocultas que se muestren al pasar el ratón por encima con un poquito de javascript.

[migueilichenco]

anduve googleando y no encontre nada que se le paresca en javascript alguna refrencia de esto?? o algo please, y gracias por contestar ludovico2000

Nunca me habia topado con un link asi por eso no se nada al respecto alguien que aya tenido experiencia con el???

gracias de antemano

[JavierB]

Hola migueilichenco

En esta página tienes varios tooltip, algunos con imágenes:

http://www.dyn-web.com/dhtml/tooltips/

Saludos,

[Rebel001]

Código:

<script type="text/javascript">
// <![CDATA[
/*************************************************************************
  This code is from Dynamic Web Coding at dyn-web.com
  Copyright 2001-5 by Sharon Paine 
  See Terms of Use at www.dyn-web.com/bus/terms.html
  regarding conditions under which you may use this code.
  This notice must be retained in the code as is!
*************************************************************************/

function doTooltip(e, msg) {
  if ( typeof Tooltip == "undefined" || !Tooltip.ready ) return;
  Tooltip.show(e, msg);
}

function hideTip() {
  if ( typeof Tooltip == "undefined" || !Tooltip.ready ) return;
  Tooltip.hide();
}
    
// tooltip content 
var tipMsg = [];
tipMsg['rich'] = '<div class="tp1">Some possibilities: images, lists, or other HTML elements - with styles or classes attached too!</div>';
tipMsg['img'] = '<div style="text-align:center"><img src="/images/btns/dot-com-btn.gif" width="176" height="30" alt="" /></div>';
tipMsg['imgTxt'] = '<img src="/images/common/sm-duck.gif" width="90" height="44" alt="" /><div class="tp2">Images and text can go together in a tooltip.</div>';
tipMsg['fm'] = "You can turn off this feature by setting the Tooltip.followMouse property to false.";
tipMsg['cstm'] = "You can control font, size, colors, width, border, offsets, etc. through style sheet and property settings.";
tipMsg['zip'] = "Click to download a zipped file with all the necessary code and example tooltip documents. (Version date: March 14, 2005)";
tipMsg['zip2'] = 'The download file contains the image text tooltip and hover tip also. (Version date: March 14, 2005)';
tipMsg['terms'] = "A license is required for most uses. Don't worry, the fee is very modest.";
tipMsg['bg'] = "The zipped download file contains an example demonstrating a background image in the tooltip."
tipMsg['mod'] = 'The image-text tooltip and hover tip also use the same basic tooltip code.';
tipMsg['txtImg'] = 'Click to see the specially formatted tooltip for images with descriptive text.';
tipMsg['wrtDrag'] = 'Write onclick to a layer you can drag. It has tooltip-like features. Set up for image display.';
tipMsg['menu'] = 'A modified tooltip that you can hover over and display links in.';
tipMsg['under'] = 'Tooltips and other DHTML layers appear behind form select lists in some browsers. Find a solution here.';
tipMsg['rollout'] = 'A zippier tooltip that rolls in and out of view using clipping to incrementally reveal and conceal the layer.';

// preload images
var imageHandler = { 
  imgs:[], path:"", preload:function() { for(var i=0;arguments[i];i++) {
    var img=new Image(); img.src=this.path+arguments[i]; this.imgs[this.imgs.length]=img;}}
}
imageHandler.preload("/images/btns/dot-com-btn.gif", "/images/common/sm-duck.gif");
// ]]>
</script>

Eso es lo que yo encontré en la web esa de tooltips

y para mostrarlo solo tienes que poner
onmouseover="doTooltip(event, tipMsg['aquielnombre'] )"

[migueilichenco]

lo has probado si va ese codigo, por que yo no se como hacer funcionar, si me ayudas :$ no se mucho de js solo PHP

gracias de antemano

[migueilichenco]

bueno encontre este codigo que es un poco ams sencillo pero es de texto, si alguien supiera como modificarlo para que sea de imagenes se lo agardeceria
el codigo:

Código PHP:

  Código Javascript
Globos de ayuda, emergentes o tambien conocidos como tooltip. Muy personalizables, fáciles de implantar en su web y elegantes.
 
Coloque el siguiente código dentro de 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=gray,direction=135);
}
</style>
 
... Coloque el resto del codigo dentro de BODY ...
 
<div id="dhtmltooltip"></div>
<script type="text/javascript">
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.x+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.y+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>
 
... Ahora por último donde quiera un vínculo con un tooltip o globo emergente deberá utilizar la función 
 
ddrivetip('Texto a mostrar', 'Opcional color fondo', Opcional ancho del emergente)
 
Ejemplos:
 
<a href="http://www.hola.com" onMouseover="ddrivetip('Visita hola.com')";
onMouseout="hideddrivetip()">hola<br><img src="logo.gif" border=0></a>
 
<a href="http://www.hola.com" onMouseover="ddrivetip('Yahoo\'s Site', 'yellow', 250)";
onMouseout="hideddrivetip()">hola<br><img src="logo.gif" border=0></a>
 
<DIV onMouseover="ddrivetip('Esto es una capa', '#EFEFEF')";
onMouseout="hideddrivetip()">Ponga aqui su codigo de la capa. Ponga aqui su texto..... aqui su texto.... tecnocodigo.com</div>
 
 
... Notese como en todos los ejemplos se incluye tambien el hideddrivetip() para ocultar el tip una vez el raton no esté sobre el elemento. 
  

gracias de antemano

[chamoco]

Muchas gracias Migueilichenco, no te imaginas cuanto tiempo he invertido buscando este código.

Lo he colocado, y por fin tengo ya tengo mis ventanitas emergentes de ayuda para los usuarios.

He podido modificar sin problemas el tamaño de la ventanita, el color y ancho del borde. Pero lo que aún no he sido capaz de modificar ha sido el tipo de letra y su tamaño. Lo he intentado desde la hoja de estilos pero nada, no se modifica.
Quizá tu sepas como hacerlo.
Quedo muy agradecido por esta ayuda que me has dado.
Muchas gracias.