Unión de dos javascript.

Buenas.

Se va a instalar en la web un sencillo javascript que permite poner subtítulos a las imágenes y todo ello sin alejarnos del xhtml. Es decir, que no vamos a hacer nada raro con lo que la web seguirá siendo pequeña y no usará cosas raras.



El script lo que hace es hacer visible el campo "title" que toda imagen debería tener definida en el html. Ese title que ahora se ve si paramos el ratón encima de las fotos (si es que el que maquetó se molestó en añadir dicho campo ) pasará a ser visto como los pies de foto de cualquier revista.

Bueno, al tema. El hecho es que el javascript que lo hace es muy pequeño y ocupa como 1kb:

function addCaptionsToImages() {
	wrapImagesInDiv( 'comentada', [], [ 'float' ] );
}
if(typeof window.addEventListener != 'undefined') {
	window.addEventListener('load', addCaptionsToImages, false);
}
else if(typeof document.addEventListener != 'undefined') {
	document.addEventListener('load', addCaptionsToImages, false);
}
else if(typeof window.attachEvent != 'undefined') {
	window.attachEvent('onload', addCaptionsToImages);
}
function wrapImagesInDiv( className, attributes, styles ) {
	var images = document.getElementsByClassName(className);
	for ( var i = 0; i < images.length; ++i ) {
	var img = images[i];
	// Lift the image out of the page and insert a div under it.
	var parent = img.parentNode;
	var frame = document.createElement('div');
	var txt = document.createTextNode(img.getAttribute('title'));
	parent.insertBefore(frame, img);
	parent.removeChild(img);
	frame.appendChild(img);
	frame.appendChild(txt);
	// These are special cases.  We always copy these from the image to the
	// div.
	frame.style.width = img.getAttribute('width') + 'px';
	frame.className = img.className;
	// Copy specified attributes and style properties from the image to the
	// div.
	for ( var j = 0; j < attributes.length; ++j ) {
		frame.setAttribute(attributes[j], img.getAttribute(attributes[j]));
	}
	for ( var j = 0; j < styles.length; ++j ) {
		frame.style[styles[j]] = img.style[styles[j]];
	}
}
}

La putada es que dicho javascript toma una función de una librería de javascripts que ocupa 70kb. Es como comprar un saco de caramelos si sólo quieres uno.

Así que lo que me gustaría hacer es extraer la función document.getElementsByClassName de la librería "prototype" y añadirla diréctamente al script anterior. Yo de javascript, ni papa .

La librería prototype es:

/*  Prototype JavaScript framework, version 1.5.0
 *  (c) 2005-2007 Sam Stephenson
 *
 *  Prototype is freely distributable under the terms of an MIT-style license.
 *  For details, see the Prototype web site: http://prototype.conio.net/
 *
/*--------------------------------------------------------------------------*/
[.....]
document.getElementsByClassName = function(className, parentElement) {
  if (Prototype.BrowserFeatures.XPath) {
    var q = ".//*[contains(concat(' ', @class, ' '), ' " + className + " ')]";
    return document._getElementsByXPath(q, parentElement);
  } else {
    var children = ($(parentElement) || document.body).getElementsByTagName('*');
    var elements = [], child;
    for (var i = 0, length = children.length; i < length; i++) {
      child = children[i];
      if (Element.hasClassName(child, className))
        elements.push(Element.extend(child));
    }
    return elements;
  }
};
[.....]
  getElementsByClassName: function(element, className) {
    return document.getElementsByClassName(className, element);
  },
[.....]

Pues eso, que si alguien sabe cómo se hacen estas cosas y lo puede hacer o decir cómo, por favor, que lo diga

Bastaría con copiar esa función en un archivo separado con extensión .js, y mediante un include de php incluirlo en cada página.

Lo malo es que la función document.getElementsByClassName seguramente llame a otras funciones dentro del mismo paquete, y entonces ya la hemos cagao.

Pero por probar ...