Foros del Web » Creando para Internet » Diseño web »

estilo diferente de link

Estas en el tema de estilo diferente de link en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/01/2006, 12:01
 
Fecha de Ingreso: marzo-2004
Mensajes: 186
Antigüedad: 13 años, 8 meses
Puntos: 0
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
__________________
Software a Medida
voip Locutorios
  #2 (permalink)  
Antiguo 26/01/2006, 12:16
Avatar de ludovico2000  
Fecha de Ingreso: noviembre-2003
Ubicación: Bizkaia
Mensajes: 1.315
Antigüedad: 14 años, 1 mes
Puntos: 2
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.

  #3 (permalink)  
Antiguo 26/01/2006, 13:16
 
Fecha de Ingreso: marzo-2004
Mensajes: 186
Antigüedad: 13 años, 8 meses
Puntos: 0
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
__________________
Software a Medida
voip Locutorios
  #4 (permalink)  
Antiguo 26/01/2006, 13:29
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Hola migueilichenco

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

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

Saludos,
  #5 (permalink)  
Antiguo 26/01/2006, 18:18
Avatar de Rebel001  
Fecha de Ingreso: enero-2004
Mensajes: 140
Antigüedad: 13 años, 11 meses
Puntos: 0
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'] )"

Última edición por Rebel001; 26/01/2006 a las 18:25
  #6 (permalink)  
Antiguo 27/01/2006, 10:44
 
Fecha de Ingreso: marzo-2004
Mensajes: 186
Antigüedad: 13 años, 8 meses
Puntos: 0
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
__________________
Software a Medida
voip Locutorios
  #7 (permalink)  
Antiguo 27/01/2006, 15:35
 
Fecha de Ingreso: marzo-2004
Mensajes: 186
Antigüedad: 13 años, 8 meses
Puntos: 0
encontre algo

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 tooltipMuy personalizablesfáciles de implantar en su web y elegantes.

Coloque el siguiente código dentro de HEAD ...

<
style type="text/css">
#dhtmltooltip{
positionabsolute;
width150px;
border2px solid black;
padding2px;
background-colorlightyellow;
visibilityhidden;
z-index100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filterprogid: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.alldocument.all["dhtmltooltip"] : document.getElementByIddocument.getElementById("dhtmltooltip") : ""

function ietruebody(){
return (
document.compatMode && document.compatMode!="BackCompat")? document.documentElement document.body
}

function 
ddrivetip(thetextthecolorthewidth){
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.operaietruebody().clientWidth-event.clientX-offsetxpoint window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.operaietruebody().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=ieietruebody().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=ieietruebody().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
__________________
Software a Medida
voip Locutorios
  #8 (permalink)  
Antiguo 12/05/2008, 05:52
 
Fecha de Ingreso: mayo-2008
Mensajes: 1
Antigüedad: 9 años, 7 meses
Puntos: 0
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.
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 06:51.