Endlich dojo - oder warum ich lieber auf ein Framework setze

... und da waren sie wieder, meine drei Probleme...

Da der IE anscheindend dynamisch generiertend DOM-nodes nicht die vorhandenen CSS Attribute zufügt konnte ich diesen Lösungsansatz vergessen.

Ich wollte sowieso mal eine Blick auf das dojo Toolkit werfen... Die API-Dokumentation ist zwar de facto nicht vorhanden, dafür gibts auf #dojo auf freenode genügend Hilfe. Und so gehts:

Im Header werden folgende Dateien eingebunden:

    <script type="text/javascript" src="{webRoot}/js/dojo/dojo.js"></script>
    <script type="text/javascript">
        dojo.require("dojo.widget.Tooltip");
    </script>

Und dieses Javascript wandelt mir onLoad

die Bilder der Klasse "popoverImg" in ein dojo-Mouseover um:

/** rewrites class=popoverImg so dojo can make a tooltip out of it
 */
function dojoBigPicInit() {
    if (!W3CDOM) return;
    var imgs = document.getElementsByTagName('img');
    for (var i=0;i<imgs.length;i++)
    {
        if (!imgs[i].className.match(/popoverImg/)) continue;

        //create ID for image
        var imgConnectId = 'bigImg' + i;
        imgs[i].setAttribute('id',imgConnectId);
        var imgParent = imgs[i].parentNode;

        var newNode = document.createElement('span');
        imgParent.appendChild(newNode);

        var tooltipWidget = dojo.widget.createWidget("tooltip", {connectId: imgConnectId,toggle:'fade',toggleDuration:500}, newNode);

        imgSmall  = imgs[i].cloneNode(false);
        imgBig    = document.createElement('img');
        imgParent = imgs[i].parentNode;

        var suffix = imgSmall.src.substring(imgSmall.src.lastIndexOf('.'));
        imgBig.src = imgSmall.src.substring(0,imgSmall.src.lastIndexOf('.')) + "_big" + suffix;
        imgBig.setAttribute('alt', imgSmall.getAttribute('alt'));

        var tooltipContent = document.createElement('span');
        innerSpan = document.createElement('span');
        innerSpan.appendChild(imgBig);
        innerSpan.appendChild(document.createElement('br'));
        myBold = document.createElement('strong');
        myBold.appendChild(document.createTextNode(imgSmall.getAttribute('alt')));
        innerSpan.appendChild(myBold);
        innerSpan.appendChild(document.createElement('br'));
        innerSpan.appendChild(document.createTextNode(imgSmall.getAttribute('title')));

        tooltipContent.appendChild(innerSpan);

        tooltipWidget.setContent(tooltipContent);

        //remove original title or alt attribute, so browser cannot show it
        imgs[i].setAttribute('title','');
        imgs[i].setAttribute('alt','');
    }
}