Foros del Web - Ver Mensaje Individual

alex5o2 · #1 (**permalink**) 23/09/2009, 16:29

Código:

<head>
    <title></title>
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="jquery.imagetextoverlay.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $('#ctlImage').imageTextOverlay({
                top: "0px",
                left: "0px",
                messages: [{
                        text: "Message 2gfhfghgfhfdgfdgfdgdfgfdgfdgfdgdfgdfgfdgfdgfdgfdg fdgfdgfdgdfgfdg fdgfdgfdgfdgfdgfdgfd",
                        top: "1167px",
                        left: "311px",
                        fontSize: "22px"
                    }, {
                        text: "Message 3sdfsdfsdfsfsdfsdfs",
                        top: "100px",
                        left: "100px",
                        color: "black",
                        fontSize: "48px",
                        backgroundColor: "#000"
                    }, {
                        text: "Message 4",
                        top: "200px",
                        left: "200px",
                        letterSpacing: "5px",
                        color: "white",
                        fontSize: "24px",
                        backgroundColor: "green"
                    }
                ]
            });
        });    
    </script>
</head>
<body>
    <img id="ctlImage" src="php.png" />
</body>
</html>

y esto es el jquery.imagetextoverlay.js

Código:

(function($){
    
    $.ImageTextOverlay = function(el, options){
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;
        
        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el; 
        
        // Add a reverse reference to the DOM object
        base.$el.data("ImageTextOverlay", base);
        
        base.init = function(){
            
            base.options = $.extend({},$.ImageTextOverlay.defaultOptions, options);
            
            // Put your initialization code here
            base.createAndUpdateImageText(base.$el, base.options);
        }
        
        // Sample Function, Uncomment to use
        // base.functionName = function(paramaters){
        //     
        // }

        base.createAndUpdateImageText = function($ctlImage, options) {
            var $ctlText = base.createImageText();
            base.updateImageText($ctlImage, $ctlText, options, function() {
               base.createAndUpdateImageText($ctlImage, options);
            });
        }        
        
        base.createImageText = function() {
            var $imageText = $('#ctlImageText');

            if ($imageText.length == 0) {
                $('<div id="ctlImageText" />')
                    .css({
                        position: "absolute"
                    })
                    .appendTo('body')
                    .hide();
                $imageText = $('#ctlImageText');
            }

            return $imageText;
        }    

        base.messageIndex = 0;
        base.updateImageText = function($ctlImage, $ctlText, options, onComplete) {
            var message = options.messages[base.messageIndex++ % options.messages.length];
            var messageOptions = $.extend({}, options, message);
            $ctlText.html(message.text).css({
                fontSize: messageOptions.fontSize
            });
            
            $ctlText.css({
                top: messageOptions.top,
                left: messageOptions.left,
                color: messageOptions.color,
                letterSpacing: messageOptions.letterSpacing,
                backgroundColor: messageOptions.backgroundColor,
            }).fadeIn('slow').animate({ opacity: 1.0 }, 3000).fadeOut('slow', function() {
                onComplete();
            });
        }
        
        base.init();
    }
    
    $.ImageTextOverlay.defaultOptions = {
        fontSize: "24px",
        letterSpacing: "normal",
        color: "white",
        backgroundColor: "transparent"
    }

    $.fn.imageTextOverlay = function(options){
        return this.each(function(){
            (new $.ImageTextOverlay(this, options));
        });
    }

    // This function breaks the chain, but returns
    // the ImageTextOverlay if it has been attached to the object.
    $.fn.getImageTextOverlay = function(){
        return this.data("ImageTextOverlay");
    }
    
})(jQuery);

Con el firefox me funcion todo bien pero en cambio con el IE me da un error en la linea 9 .
A ver si alquien me puede decir como puedo arreglar esto para que funcione tambien en el IE.

Saludos