Foros del Web - estilo diferente de link

Foros del Web (http://www.forosdelweb.com/)

- Diseño web (http://www.forosdelweb.com/f91/)

- - estilo diferente de link (http://www.forosdelweb.com/f91/estilo-diferente-link-366609/)

estilo diferente de link

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

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.

:adios:

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

Hola migueilichenco

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

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

Saludos, :adios:

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'] )"

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

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

Re: estilo diferente de link

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.