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
|
|
#1 (permalink) |
![]() Fecha de Ingreso: marzo-2004
Mensajes: 180
|
estilo diferente de link
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 |
|
|
|
|
|
#3 (permalink) |
![]() Fecha de Ingreso: marzo-2004
Mensajes: 180
|
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 |
|
|
|
|
|
#4 (permalink) |
|
Moderata
![]() ![]() ![]() ![]() ![]() ![]() Fecha de Ingreso: noviembre-2002
Ubicación: Madrid
Mensajes: 19.891
|
Hola migueilichenco
En esta página tienes varios tooltip, algunos con imágenes: http://www.dyn-web.com/dhtml/tooltips/ Saludos, ![]() |
|
|
|
|
|
#5 (permalink) |
![]() |
Código:
Eso es lo que yo encontré en la web esa de tooltips<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>
y para mostrarlo solo tienes que poner onmouseover="doTooltip(event, tipMsg['aquielnombre'] )"
__________________
Version: 3.1 GCS/d-s:>a---- C++ U---PL E-> w+++$N+ o K- w+++++ O---- M> V--> PS+++ PE y PGP t- 5> X R+ tv(-) b DI D+++ G e> h r- y+> z- ------END GEEK CODE BLOCK------ Última edición por Rebel001; 26-ene-2006 a las 17:25. |
|
|
|
|
|
#7 (permalink) |
![]() Fecha de Ingreso: marzo-2004
Mensajes: 180
|
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:
|
|
|
|
|
|
#8 (permalink) |
![]() Fecha de Ingreso: mayo-2008
Mensajes: 1
|
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. |
|
|
|