Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 3 de 3

Tema: Buen efecto con imágenes: ayuda para hacer lo mismo como mín

  1. #1
    Recien Llegado! Habitante
    Fecha de Ingreso
    29 nov, 06
    Mensajes
    19
    Poder de Reputación
    20

    Buen efecto con imágenes: ayuda para hacer lo mismo como mín

    Hola amigos, por casualidad, he visto esta web:

    http://es.fotolia.com/cat2/30000000


    y tiene un efecto muy bonito: al pasar el ratón encima de cualquiera de las imágenes pequeñas, visualiza la foto ampliada SIN PINCHAR. Si además saliese la imagen ampliada más arriba y con texto, en vez de abajo y a la izquierda (se ve muy mal y muy poco), quedaría todo fabuloso. ¿Habría algún script para hacer como mínimo lo mismo?
    Gracias por ayudar!!!

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    09 oct, 05
    Mensajes
    430
    Poder de Reputación
    24
    Este script que te pongo es el mismo que tengo yo en mi web. El hecho de que las fotos se vean abajo es simplemente una cuestión de espacio, en esta web que nos has dejado de muestra por la ubicación de los enlaces es imposible que se pudieran ver en la parte superior por el tamaño de las imágenes.

    Esto lo tienes que poner entre <HEAD> y </HEAD>


    <script language="javascript" type="text/javascript">
    <!--

    /*
    Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
    Copyright 2002 by Sharon Paine
    Visit http://www.dynamicdrive.com for this script
    */

    /* IMPORTANT: Put script after tooltip div or
    put tooltip div just before </BODY>. */

    var dom = (document.getElementById) ? true : false;
    var ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom) ? true: false;
    var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
    var ns4 = (document.layers && !dom) ? true : false;
    var ie4 = (document.all && !dom) ? true : false;
    var nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false;

    // resize fix for ns4
    var origWidth, origHeight;
    if (ns4) {
    origWidth = window.innerWidth; origHeight = window.innerHeight;
    window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
    }

    // avoid error of passing event object in older browsers
    if (nodyn) { event = "nope" }

    /////////////////////// CUSTOMIZE HERE ////////////////////
    // settings for tooltip
    // Do you want tip to move when mouse moves over link?
    var tipFollowMouse= true;
    // Be sure to set tipWidth wide enough for widest image
    var tipWidth= 160;
    var offX= 20; // how far from mouse to show tip
    var offY= 12;
    var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
    var tipFontSize= "8pt";
    // set default text color and background color for tooltip here
    // individual tooltips can have their own (set in messages arrays)
    // but don't have to
    var tipFontColor= "#000000";
    var tipBgColor= "#DDECFF";
    var tipBorderColor= "#000080";
    var tipBorderWidth= 3;
    var tipBorderStyle= "ridge";
    var tipPadding= 4;

    // tooltip content goes here (image, description, optional bgColor, optional textcolor)
    var messages = new Array();
    // multi-dimensional arrays containing:
    // image and text for tooltip
    // optional: bgColor and color to be sent to tooltip
    messages[0] = new Array('red_balloon.gif','Here is a red balloon on a white background',"#FFFFFF");
    messages[1] = new Array('duck2.gif','Here is a duck on a light blue background.',"#DDECFF");
    messages[2] = new Array('test.gif','Test description','black','white');

    //////////////////// END OF CUSTOMIZATION AREA ///////////////////

    // preload images that are to appear in tooltip
    // from arrays above
    if (document.images) {
    var theImgs = new Array();
    for (var i=0; i<messages.length; i++) {
    theImgs[i] = new Image();
    theImgs[i].src = messages[i][0];
    }
    }

    // to layout image and text, 2-row table, image centered in top cell
    // these go in var tip in doTooltip function
    // startStr goes before image, midStr goes between image and text
    var startStr = '<table width="' + tipWidth + '"><tr><td align="center" width="100%"><img src="';
    var midStr = '" border="0"></td></tr><tr><td valign="top">';
    var endStr = '</td></tr></table>';

    ////////////////////////////////////////////////////////////
    // initTip - initialization for tooltip.
    // Global variables for tooltip.
    // Set styles for all but ns4.
    // Set up mousemove capture if tipFollowMouse set true.
    ////////////////////////////////////////////////////////////
    var tooltip, tipcss;
    function initTip() {
    if (nodyn) return;
    tooltip = (ns4)? document.tipDiv.document: (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
    tipcss = (ns4)? document.tipDiv: tooltip.style;
    if (ie4||ie5||ns5) { // ns4 would lose all this on rewrites
    tipcss.width = tipWidth+"px";
    tipcss.fontFamily = tipFontFamily;
    tipcss.fontSize = tipFontSize;
    tipcss.color = tipFontColor;
    tipcss.backgroundColor = tipBgColor;
    tipcss.borderColor = tipBorderColor;
    tipcss.borderWidth = tipBorderWidth+"px";
    tipcss.padding = tipPadding+"px";
    tipcss.borderStyle = tipBorderStyle;
    }
    if (tooltip&&tipFollowMouse) {
    if (ns4) document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = trackMouse;
    }
    }

    window.onload = initTip;

    /////////////////////////////////////////////////
    // doTooltip function
    // Assembles content for tooltip and writes
    // it to tipDiv
    /////////////////////////////////////////////////
    var t1,t2; // for setTimeouts
    var tipOn = false; // check if over tooltip link
    function doTooltip(evt,num) {
    if (!tooltip) return;
    if (t1) clearTimeout(t1); if (t2) clearTimeout(t2);
    tipOn = true;
    // set colors if included in messages array
    if (messages[num][2]) var curBgColor = messages[num][2];
    else curBgColor = tipBgColor;
    if (messages[num][3]) var curFontColor = messages[num][3];
    else curFontColor = tipFontColor;
    if (ns4) {
    var tip = '<table bgcolor="' + tipBorderColor + '" width="' + tipWidth + '" cellspacing="0" cellpadding="' + tipBorderWidth + '" border="0"><tr><td><table bgcolor="' + curBgColor + '" width="100%" cellspacing="0" cellpadding="' + tipPadding + '" border="0"><tr><td>'+ startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr + '</td></tr></table></td></tr></table>';
    tooltip.write(tip);
    tooltip.close();
    } else if (ie4||ie5||ns5) {
    var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
    tipcss.backgroundColor = curBgColor;
    tooltip.innerHTML = tip;
    }
    if (!tipFollowMouse) positionTip(evt);
    else t1=setTimeout("tipcss.visibility='visible'",100);
    }

    var mouseX, mouseY;
    function trackMouse(evt) {
    mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + document.body.scrollLeft;
    mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + document.body.scrollTop;
    if (tipOn) positionTip(evt);
    }

    /////////////////////////////////////////////////////////////
    // positionTip function
    // If tipFollowMouse set false, so trackMouse function
    // not being used, get position of mouseover event.
    // Calculations use mouseover event position,
    // offset amounts and tooltip width to position
    // tooltip within window.
    /////////////////////////////////////////////////////////////
    function positionTip(evt) {
    if (!tipFollowMouse) {
    mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + document.body.scrollLeft;
    mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + document.body.scrollTop;
    }
    // tooltip width and height
    var tpWd = (ns4)? tooltip.width: (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
    var tpHt = (ns4)? tooltip.height: (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
    // document area in view (subtract scrollbar width for ns)
    var winWd = (ns4||ns5)? window.innerWidth-20+window.pageXOffset: document.body.clientWidth+document.body.scrollLeft ;
    var winHt = (ns4||ns5)? window.innerHeight-20+window.pageYOffset: document.body.clientHeight+document.body.scrollTop ;
    // check mouse position against tip and window dimensions
    // and position the tooltip
    if ((mouseX+offX+tpWd)>winWd)
    tipcss.left = (ns4)? mouseX-(tpWd+offX): mouseX-(tpWd+offX)+"px";
    else tipcss.left = (ns4)? mouseX+offX: mouseX+offX+"px";
    if ((mouseY+offY+tpHt)>winHt)
    tipcss.top = (ns4)? winHt-(tpHt+offY): winHt-(tpHt+offY)+"px";
    else tipcss.top = (ns4)? mouseY+offY: mouseY+offY+"px";
    if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);
    }

    function hideTip() {
    if (!tooltip) return;
    t2=setTimeout("tipcss.visibility='hidden'",100);
    tipOn = false;
    }

    //-->
    </script>

    donde pone CUSTOMIZE HERE son los valores que puedes cambiar, como el color del fondo, borde, tamaño del texto, tipo de letra, color...etc.

    Aquí tienes dos ejemplos de como tienes que poner tus enlaces


    Link 1

    Link 2

    Y por último esto tienes que poner esto antes de </BODY>

    <div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>

    Este script lo puedes encontrar en http://www.dynamicdrive.com/dynamici...agetooltip.htm

    Si tienes algún problema con el script ponlo aquí en el foro porque yo lo tengo en mi página y puedo intentar ayudarte

  3. #3
    Recien Llegado! Habitante
    Fecha de Ingreso
    29 nov, 06
    Mensajes
    19
    Poder de Reputación
    20
    Cita Iniciado por labrujidesigns
    Este script que te pongo es el mismo que tengo yo en mi web. El hecho de que las fotos se vean abajo es simplemente una cuestión de espacio, en esta web que nos has dejado de muestra por la ubicación de los enlaces es imposible que se pudieran ver en la parte superior por el tamaño de las imágenes.

    Esto lo tienes que poner entre <HEAD> y </HEAD>


    <script language="javascript" type="text/javascript">
    <!--

    /*
    Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
    Copyright 2002 by Sharon Paine
    Visit http://www.dynamicdrive.com for this script
    */

    /* IMPORTANT: Put script after tooltip div or
    put tooltip div just before </BODY>. */

    var dom = (document.getElementById) ? true : false;
    var ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom) ? true: false;
    var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
    var ns4 = (document.layers && !dom) ? true : false;
    var ie4 = (document.all && !dom) ? true : false;
    var nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false;

    // resize fix for ns4
    var origWidth, origHeight;
    if (ns4) {
    origWidth = window.innerWidth; origHeight = window.innerHeight;
    window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
    }

    // avoid error of passing event object in older browsers
    if (nodyn) { event = "nope" }

    /////////////////////// CUSTOMIZE HERE ////////////////////
    // settings for tooltip
    // Do you want tip to move when mouse moves over link?
    var tipFollowMouse= true;
    // Be sure to set tipWidth wide enough for widest image
    var tipWidth= 160;
    var offX= 20; // how far from mouse to show tip
    var offY= 12;
    var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
    var tipFontSize= "8pt";
    // set default text color and background color for tooltip here
    // individual tooltips can have their own (set in messages arrays)
    // but don't have to
    var tipFontColor= "#000000";
    var tipBgColor= "#DDECFF";
    var tipBorderColor= "#000080";
    var tipBorderWidth= 3;
    var tipBorderStyle= "ridge";
    var tipPadding= 4;

    // tooltip content goes here (image, description, optional bgColor, optional textcolor)
    var messages = new Array();
    // multi-dimensional arrays containing:
    // image and text for tooltip
    // optional: bgColor and color to be sent to tooltip
    messages[0] = new Array('red_balloon.gif','Here is a red balloon on a white background',"#FFFFFF");
    messages[1] = new Array('duck2.gif','Here is a duck on a light blue background.',"#DDECFF");
    messages[2] = new Array('test.gif','Test description','black','white');

    //////////////////// END OF CUSTOMIZATION AREA ///////////////////

    // preload images that are to appear in tooltip
    // from arrays above
    if (document.images) {
    var theImgs = new Array();
    for (var i=0; i<messages.length; i++) {
    theImgs[i] = new Image();
    theImgs[i].src = messages[i][0];
    }
    }

    // to layout image and text, 2-row table, image centered in top cell
    // these go in var tip in doTooltip function
    // startStr goes before image, midStr goes between image and text
    var startStr = '<table width="' + tipWidth + '"><tr><td align="center" width="100%"><img src="';
    var midStr = '" border="0"></td></tr><tr><td valign="top">';
    var endStr = '</td></tr></table>';

    ////////////////////////////////////////////////////////////
    // initTip - initialization for tooltip.
    // Global variables for tooltip.
    // Set styles for all but ns4.
    // Set up mousemove capture if tipFollowMouse set true.
    ////////////////////////////////////////////////////////////
    var tooltip, tipcss;
    function initTip() {
    if (nodyn) return;
    tooltip = (ns4)? document.tipDiv.document: (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
    tipcss = (ns4)? document.tipDiv: tooltip.style;
    if (ie4||ie5||ns5) { // ns4 would lose all this on rewrites
    tipcss.width = tipWidth+"px";
    tipcss.fontFamily = tipFontFamily;
    tipcss.fontSize = tipFontSize;
    tipcss.color = tipFontColor;
    tipcss.backgroundColor = tipBgColor;
    tipcss.borderColor = tipBorderColor;
    tipcss.borderWidth = tipBorderWidth+"px";
    tipcss.padding = tipPadding+"px";
    tipcss.borderStyle = tipBorderStyle;
    }
    if (tooltip&&tipFollowMouse) {
    if (ns4) document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = trackMouse;
    }
    }

    window.onload = initTip;

    /////////////////////////////////////////////////
    // doTooltip function
    // Assembles content for tooltip and writes
    // it to tipDiv
    /////////////////////////////////////////////////
    var t1,t2; // for setTimeouts
    var tipOn = false; // check if over tooltip link
    function doTooltip(evt,num) {
    if (!tooltip) return;
    if (t1) clearTimeout(t1); if (t2) clearTimeout(t2);
    tipOn = true;
    // set colors if included in messages array
    if (messages[num][2]) var curBgColor = messages[num][2];
    else curBgColor = tipBgColor;
    if (messages[num][3]) var curFontColor = messages[num][3];
    else curFontColor = tipFontColor;
    if (ns4) {
    var tip = '<table bgcolor="' + tipBorderColor + '" width="' + tipWidth + '" cellspacing="0" cellpadding="' + tipBorderWidth + '" border="0"><tr><td><table bgcolor="' + curBgColor + '" width="100%" cellspacing="0" cellpadding="' + tipPadding + '" border="0"><tr><td>'+ startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr + '</td></tr></table></td></tr></table>';
    tooltip.write(tip);
    tooltip.close();
    } else if (ie4||ie5||ns5) {
    var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
    tipcss.backgroundColor = curBgColor;
    tooltip.innerHTML = tip;
    }
    if (!tipFollowMouse) positionTip(evt);
    else t1=setTimeout("tipcss.visibility='visible'",100);
    }

    var mouseX, mouseY;
    function trackMouse(evt) {
    mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + document.body.scrollLeft;
    mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + document.body.scrollTop;
    if (tipOn) positionTip(evt);
    }

    /////////////////////////////////////////////////////////////
    // positionTip function
    // If tipFollowMouse set false, so trackMouse function
    // not being used, get position of mouseover event.
    // Calculations use mouseover event position,
    // offset amounts and tooltip width to position
    // tooltip within window.
    /////////////////////////////////////////////////////////////
    function positionTip(evt) {
    if (!tipFollowMouse) {
    mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + document.body.scrollLeft;
    mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + document.body.scrollTop;
    }
    // tooltip width and height
    var tpWd = (ns4)? tooltip.width: (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
    var tpHt = (ns4)? tooltip.height: (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
    // document area in view (subtract scrollbar width for ns)
    var winWd = (ns4||ns5)? window.innerWidth-20+window.pageXOffset: document.body.clientWidth+document.body.scrollLeft ;
    var winHt = (ns4||ns5)? window.innerHeight-20+window.pageYOffset: document.body.clientHeight+document.body.scrollTop ;
    // check mouse position against tip and window dimensions
    // and position the tooltip
    if ((mouseX+offX+tpWd)>winWd)
    tipcss.left = (ns4)? mouseX-(tpWd+offX): mouseX-(tpWd+offX)+"px";
    else tipcss.left = (ns4)? mouseX+offX: mouseX+offX+"px";
    if ((mouseY+offY+tpHt)>winHt)
    tipcss.top = (ns4)? winHt-(tpHt+offY): winHt-(tpHt+offY)+"px";
    else tipcss.top = (ns4)? mouseY+offY: mouseY+offY+"px";
    if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);
    }

    function hideTip() {
    if (!tooltip) return;
    t2=setTimeout("tipcss.visibility='hidden'",100);
    tipOn = false;
    }

    //-->
    </script>

    donde pone CUSTOMIZE HERE son los valores que puedes cambiar, como el color del fondo, borde, tamaño del texto, tipo de letra, color...etc.

    Aquí tienes dos ejemplos de como tienes que poner tus enlaces


    Link 1

    Link 2

    Y por último esto tienes que poner esto antes de </BODY>

    <div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>

    Este script lo puedes encontrar en http://www.dynamicdrive.com/dynamici...agetooltip.htm

    Si tienes algún problema con el script ponlo aquí en el foro porque yo lo tengo en mi página y puedo intentar ayudarte
    Pues muchísimas gracias por tu amabilidad por ayudarme. Trataré de ponerme a trabajar en ello este fin de semana, haber si soy capaz. GRACIAS

Temas Similares

  1. ¿Como puedo hacer un buen banner?
    Por HoyTodoMuyLejos en el foro Foro General
    Respuestas: 0
    Último Mensaje: 18/01/2009, 17:58
  2. Cómo hacer esto mismo para mi web?
    Por musicmib en el foro Foro General
    Respuestas: 1
    Último Mensaje: 15/01/2007, 22:39

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •