[DOM / JS] onClick gebied bedekt niet gehele IMG

[AxiMaxi]

Het is me eindelijk gelukt om een pagina te maken die er in MSIE, FireFox, Opera en Safari hetzelfde uit ziet!

Eerder had ik al een probleem om het in Safari aan de praat te krijgen wegens een quirk met .onError, maar door deels over te schakelen naar PHP, is dat opgelost.

_{@Quist: ik ga dus ook geen halfwerkende versie mee online zetten. De scripts zijn tijdens het proces min-of-meer gesneuveld}

Het probleem is nu dat ik thumbnails op het scherm zet die een onClick aan zich hebben hangen om hun grotere evenbeeld op het scherm te toveren. Maar het gebied waarin de pointer in een vingertje verandert (= het gebied waarop je kan klikken zodat er een reactie komt) bedekt niet het hele plaatje. Alleen in MSIE werkt het juist, de rest van de browser hebben alleen onderin het thumbnailtje een actief gebied.

Hoe komt dat?

De techniek: in PHP check ik of bepaalde thumbnails bestaan en aan de hand daarvan construeer ik de code om in de uiteindelijke file een JavaScript array te hebben. Vervolgens zet ik met de volgende code de plaatjes op het scherm:

JavaScript:

<script language="JavaScript">
    // Hieronder de array die in PHP geconstrueerd is
    var JSpage = new Array();
    JSpage[1] = new Array("01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11");
    JSpage[2] = new Array("01", "02", "03");
    
    var gArtist  = "antimatterman"; // naam van de artiest, geconstrueerd in PHP
    var gActive = 0;
    var thumbArray = new Array();

    // Deze function wordt aangeroepen door een onClick op de thumbs
    function changeThumbs(gallery,picset) {

        // check of niet de reeds getoonde pagina wordt geselecteerd
        if ( gallery != gActive ) {

            /* (stukje code uit origineel weggelaten, voor de duidelijkheid) */
            gActive = gallery;

            // converteer e.e.a. om de bestandsnaam van het plaatje in een string te krijgen
            var temp1 = "0" + picset;
            var galleryConv = temp1.substring(temp1.length-2,temp1.length);

            // vind de plek waar de thumbnails staan
            thumbDiv = document.getElementById("thumbs");
            thumbDiv.innerHTML = "";
            var thumbNr = JSpage[gallery].length; // het aantal plaatjes op de pagina
            var brkFlag = 0; // vlaggetje om eenmalig een <br> te kunnen gaan geven

            // loop de pagina door om de thumbs neer te gaan zetten
            for ( tel = 0; tel < thumbNr; tel++ ) {

                /* firstPic variabele wordt gemaakt, voor overzicht even weggelaten */
                // zet de thumbnails op het scherm
                newThumb = document.createElement("img");
                newThumb.className = "thumb";
                newThumb.src = gArtist+"/pix/tn_"+galleryConv+"_"+JSpage[gallery][tel]+"_"+gArtist+".jpg";
                newThumb.id = "thumb"+tel;
                newThumb.onclick = function() { changePhoto(this.src); };
                thumbDiv.appendChild(newThumb);

                // als je halverwege bent, ff een <br> doen voor de tweede rij thumbnails
                if ( ( brkFlag != 1) && ( tel > (0.5*thumbNr-1) ) ) {
                    brkFlag = 1;
                    thumbDiv.appendChild(document.createElement("br"));
                } 
            }
        changePhoto(firstPic); // als je klaar bent, gelijk ff de eerste foto weergeven
        }
    }

Werkend te zien op deze pagina.

[ Voor 7% gewijzigd door AxiMaxi op 04-06-2005 22:32 ]

[BARO]

Bij mij werkt het script perfect met Netscape 7.0 & IE 6.0

[crisp]

Je div#artistlogo valt deels over de thumbnails...

[CrashOne]

Jeez, iedereen is weer snel vandaag op de vroege morgen, maar het probleem is idd #artistlogo, haal de height daar eens weg.

[japaveh]

Om dit soort dingen te kunnen ontdekken is de Web developer toolbar van FF echt (bijna) onmisbaar. Vooral de optie

Outline > Outline Block Level Elements

Je ziet dan direct dat er over de plaatjes een element verschijnt.

[AxiMaxi]

Hé, wat stom van mij en wat geweldig van jullie!
Dank!