1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Ayuda Comportamiento de imagenes

Tema en 'Javascript' comenzado por GtaSApawer, 2 de Enero de 2017.

  1. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    817
    Me gusta recibidos:
    387
    Puntos de trofeos:
    63
    Género:
    Hombre
    Acaso esto es para un trabajo remunerado?
     
    A AngelKrak le gusta esto.
  2. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    235
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Estoy ayudando a un amigo con un proyecto de la universidad, yo accedí a ayudarlo porque requiere uso de javascript y me sirve a mi para agarrar practica y destreza con el lenguaje. Aún soy un aprendiz, por eso pregunto tanto. :oops:
     
  3. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    235
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Sabrás porque el for no se me ejecuta :oops:.

    Código (Text):
           
            <div id="freewall" class="free-wall">
                <div class="brick ">
                <a class="img-link" href="http://www.youtube.com"><img src="http://lorempixel.com/400/200/" alt="Imagen 1"></a>
                </div>
                <div class="brick ">
                <a class="img-link" href="http://www.youtube.com"><img src="http://lorempixel.com/80/120/" alt="Imagen 2"></a>
                </div>
                <div class="brick ">
                <a class="img-link" href="http://www.youtube.com"><img src="http://lorempixel.com/120/180/" alt="Imagen 3"></a>
                </div>
                <div class="brick ">
                <a class="img-link" href="http://www.youtube.com"><img src="http://lorempixel.com/150/200/" alt="Imagen 4"></a>
                </div>
                <div class="brick ">
                <a class="img-link" href="http://www.youtube.com"><img src="http://lorempixel.com/90/100/" alt="Imagen 5"></a>
                </div>
            </div>
            <script type="text/javascript">

                var imgLink = $(".img-link"),
                    brick_div = $(".brick");
                    img = $(".brick img");


                $(".brick").each(function() {
                    // this.style.backgroundColor =  colour[colour.length * Math.random() << 0];
                   
                    // $(brick_div).append('<span class="tooltiptext">'+ $(img[2]).attr('alt') +'</span>');
                    $(this).width() = $(this).find('img').width();
                    $(this).height() = $(this).find('img').height();

                });

                for (var i = 0; i < brick_div.length; i++) {
                    $(brick_div[i]).append('<span>'+ $(img[i]).attr('alt') +'</span>');
                }
     
     
    Última modificación: 3 de Enero de 2017
  4. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    817
    Me gusta recibidos:
    387
    Puntos de trofeos:
    63
    Género:
    Hombre
    Aun lo que haces creo que está mal, porque veo que siempre queda una linea recta ya sea vertical o horizontalmente, y si te fijas en lo que nos has pasado las imagenes ocupan el espacio y no hay esas lineas.
     
  5. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    235
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Si bueno yo le pregunte a mi amigo, y me dijo que así está bien. De todos modos le voy a decir que consulte con su profesor a ver que le dice. Sería genial lograr eso que dices, pero creo que sería muy engorroso o bueno eso creo.
     
  6. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    235
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Ahora que agregue mas imagenes, detecte un error es el siguiente:
    http://imgur.com/a/0cCoY
    Creo que es mejor colocar esa imagen como background del div, para que no se rompa el efecto.
     
  7. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    235
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Ya el for me funciono, y logre resolver el inconveniente con las imagenes. :)
     
  8. geriito

    geriito Miembro

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    132
    Me gusta recibidos:
    4
    Puntos de trofeos:
    18
    Género:
    Hombre
    Podrias poner como lo solucionastes y enselarnoslo? xD

    Enviado desde mi SM-G900F mediante Tapatalk
     
    A AngelKrak le gusta esto.
  9. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    235
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Aquí está :)

    Código (Text):
    var colour = [
                    "rgb(142, 68, 173)",
                    "rgb(243, 156, 18)",
                    "rgb(135, 0, 0)",
                    "rgb(211, 84, 0)",
                    "rgb(0, 106, 63)",
                    "rgb(192, 57, 43)",
                    "rgb(39, 174, 96)",
                    "rgb(41, 128, 185)"
                    ],
                    size = ["65px", "80px", "50px", "30px", "20px", "15px", "40px", "75px", "35px", "25px", "55px"]
                    brick_div = $(".brick");


                $(".brick").each(function() {
                    this.style.backgroundColor =  colour[colour.length * Math.random() << 0];
                    this.style.width = size[size.length * Math.random() << 0];
                    this.style.height = size[size.length * Math.random() << 0];

                });

                for (var i = 0; i < brick_div.length; i++) {
                    $(brick_div[i]).append('<span>'+ $(brick_div[i]).attr('name') +'</span>');
                }

                var tooltips = document.querySelectorAll(".brick span");

                window.onmousemove = function (e) {
                    var x = (e.clientX + 10) + 'px',
                        y = (e.clientY + 20) + 'px';
                    for (var i = 0; i < tooltips.length; i++) {
                        tooltips[i].style.top = y;
                        tooltips[i].style.left = x;
                    }
                };

                $(function() {
                    var wall = new Freewall("#freewall");
                    wall.reset({
                        selector: '.brick',
                        animate: false,
                        cellW: 2,
                        cellH: 2,
                        gutterY: 0,
                          gutterX: 0,
                        onResize: function() {
                            wall.fitWidth();
                        }
                    });
                    wall.addCustomEvent('onBlockLoad', function(setting){
                        console.log(setting);
                    });
                    wall.fitWidth();
                });
     
    A AngelKrak y Dawud les gusta esto.
  10. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    657
    Me gusta recibidos:
    498
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Aquí te os dejo el mismo código anterior solo he eliminado jQuery por JS en unas líneas solamente

    Código (Javascript):
        var colour = [
            "rgb(142, 68, 173)",
            "rgb(243, 156, 18)",
            "rgb(135, 0, 0)",
            "rgb(211, 84, 0)",
            "rgb(0, 106, 63)",
            "rgb(192, 57, 43)",
            "rgb(39, 174, 96)",
            "rgb(41, 128, 185)"
            ],
            size = ["65px", "80px", "50px", "30px", "20px", "15px", "40px", "75px", "35px", "25px", "55px", "95px", "105px", "120px"],
            brick_div = document.getElementsByClassName("brick");

        for (var i = 0; i < brick_div.length; i++) {
             var thisDiv = this.brick_div[i];

            thisDiv.style.backgroundColor =  colour[colour.length * Math.random() << 0];
            thisDiv.style.width = size[size.length * Math.random() << 0];
            thisDiv.style.height = size[size.length * Math.random() << 0];
        }


        for (var i = 0; i < brick_div.length; i++) {
            var thispan = this.brick_div[i];
            var span = document.createElement("span");
            thispan.appendChild(span).setAttribute('name','');

        }
     
    veo que usas window.onmousemove y lo asignas como estilo left y top ...Pero mi duda es:
    ¿En qué te servirá al colocarlo así o que función tendrá o_O?

    Aquí la img
    murocolors.jpg
     
    A AngelKrak le gusta esto.
  11. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    235
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    El window.onmousemove es para hacer el tooltip, soy nuevo en javascript y no se si esa es la mejor manera de hacerlo.
     
    A AngelKrak le gusta esto.
  12. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    657
    Me gusta recibidos:
    498
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Pues para crear un tooltip así no lo creo tienes que definir tus estilos css primero del tooltip, además en el onmouseover tienes un ciclo for el que índica que a todos los elementos span creados se le asigne la posicion X y Y a los estilo top y left ... Esa parte lo puedes visualizar en el inspector de elementos de la página... ¿Vas a mostrar las coordenas en los tooltips??

    Puedes asignarle el valor de las coordenas al atributo title el cual es el tooltip default que proporciona html :D.

    hay mucha forma de hacer un tooltip....
     
    A AngelKrak le gusta esto.
  13. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    235
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Bueno pero con la forma en la que lo hice a simple vista no vi ningun error. Por eso lo deje así. :(
     
  14. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    657
    Me gusta recibidos:
    498
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Aquí te dejo un link de esta página que talvéz conozca http://www.w3schools.com/css/css_tooltip.asp es un forma de realizar un tooltip
    Esta te podrá ayudar en diversos lenguajes tales como JS que mencionas que aun estas aprendiendo.... hay otro que veras en la parte del menú
     
    A AngelKrak le gusta esto.

Comparte esta página