Código:
y esto es el jquery.imagetextoverlay.js<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>
Código:
Con el firefox me funcion todo bien pero en cambio con el IE me da un error en la linea 9 . (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);
A ver si alquien me puede decir como puedo arreglar esto para que funcione tambien en el IE.
Saludos
