[JS] OnMouseOver, OnMouseOut, OnClick -> Image Replace

[Verwijderd]

Ik ben bezig met het maken van een tooltje waarmee je via javascript en een textarea texten kan bewerken.
Paar mooie knopjes voor o.a. align-left, align-center, align-right, opsom-num, opsom-bol, insert image, insert url.

Nou is het de bedoeling dat je de plaatjes via een mouse-handlers een plaatje laat veranderen. Dit is niet zoon probleem. Kwestie van preloaden en Swappen met een andere src.

Nou wil ik ook dat als je op het plaatje klikt dat het plaatje op de mouseover stand blijft staan, dit werkt ook wel, alleen de javascritpfunctie is er niet echt mooi op geworden.

JavaScript:

buttonImg = new Array();
ImageStatus = new Array();

buttonImg[0] = new Image(0,0);
buttonImg[1] = new Image(0,0);

ImageStatus['align-left'] = 0;
buttonImg[0].src = "editor-align-left.jpg";
buttonImg[1].src = "editor-align-left-mouse.jpg";


function ImageSwitchTo(imgName,n) {
    if (ImageStatus[imgName]==0) {
        document.images[imgName].src = buttonImg[n].src;
    }
    return true;
}

function ImgageClick(imgName) {
    if(ImageStatus[imgName]==0) {
        ImageStatus[imgName]=1;
        document.images[imgName].src = 
        buttonImg[ImageStatus[imgName]].src;
        
    } else {
        ImageStatus[imgName]=0;
    }
    return true;
}

Alleen dit levert redelijk wat code op, dit is niet erg met 1 plaatje, maar ik heb er minimaal 15.
Ik zat nou te denken om een functie te maken die de plaatjes toevoegd(zowel preload als de startwaardes).

JavaScript:

MenuImageArray = new Array();
tmpArray = new Array();

function ImageAddToArray(imgName,NoMouse,Mouse) {
    tmpArray['status'] = 0;
    tmpArray[imgName+'-norm'] = new Image(0,0);
    tmpArray[imgName+'-mouse'] = new Image(0,0);
    tmpArray[imgName+'-norm'] = NoMouse;
    tmpArray[imgName+'-mouse'] = Mouse;
    MenuImageArray[imgName] = tmpArray;
    tmpArray = new Array();
}

function ImageSwitch(imgName) {
    if (MenuImageArray[0]['status']==0) {
        document.images[imgName].src == 
        MenuImageArray[imgName][imgName+'-mouse'].src;
    }
    return true;
}


function ImageClick(imgName) {
    if(MenuImageArray[imgName]['status']==0) {
        MenuImageArray[imgName]['status']=1;
        document.images[imgName].src = 
        MenuImageArray[imgName][imgName+'-mouse'];
    } else {
        MenuImageArray[imgName]['status']=0;
    }
    return true;
}
ImageAddToArray('align-left','editor-align-left.jpg',
'editor-align-left-mouse.jpg');

Er zit ergens een fout en ik krijg hem niet gevonden. Of ga ik nou gewoon geheel fout met javascript om?
De fout zit denk ik in de functie ImageAddToArray.

_{Klein ander probleempje:}
^{Op een of andere manier werkt de preload van het ene script niet op inet, hij laad nogsteeds traag?}

Hier en daar een enter zodat de layout niet te breed wordt.

[Verwijderd]

Oké ik heb mijn code iets wat aangepast, nou werkt het bijna:

JavaScript:

MenuImageArray = new Array();
tmpArray = new Array();

function ImageAddToArray(imgName,NoMouse,Mouse) {
    tmpArray['status'] = 0;
    tmpArray['no_mouse'] = new Image();
    tmpArray['mouse'] = new Image();
    tmpArray['no_mouse'] = NoMouse;
    tmpArray['mouse'] = Mouse;
    MenuImageArray[imgName] = tmpArray;
    return true;
}

function ImageSwitch(imgName) {
    if (MenuImageArray[imgName]['status']==0) {
        MenuImageArray[imgName]['status']=1;

        document.images[imgName].src == MenuImageArray[imgName]['mouse'].src;
    } else {
        MenuImageArray[imgName]['status']=0;
        document.images[imgName].src == MenuImageArray[imgName]['no_mouse'].src;
    }
    return true;
}


function ImageClick(imgName) {
    if(MenuImageArray[imgName]['status']==0) {
        MenuImageArray[imgName]['status']=2;
        document.images[imgName].src = MenuImageArray[imgName][imgName+'-mouse'];
    } else {
        MenuImageArray[imgName]['status']=1;
    }
    return true;
}
ImageAddToArray('align-left','editor-align-left.jpg','editor-align-left-mouse.jpg');

als ik dan dit run

JavaScript:

alert(MenuImageArray['align-left']['mouse'].src);

Dan laat hij zien: undefined
als ik dit laat zien:

JavaScript:

alert(MenuImageArray['align-left']['status'].src);

dan laat hij als ik er op sta 1 zien en er af 0, dus de waardes krijgt hij wel goed door.

Alleen het plaatje kan hij niet veranderen omdat het plaatje niet geladen kan worden of iets in die richting.

[edit]
Erg stom van mij, zit ik dan paar uur op te zoeken.
waarde==waarde1, nee dat werkt niet nee. moet waarde=waarde1 zijn.

Oftenwel, het is gewoon door één =(isje) dat teveel stond.

[edit2]
Het script werkt nu, nog een klein probleempje.
Nogsteeds heb ik een preload probleem
MM Functies van dreamweaver werken niet tegelijk met mijn functies dus dan laad het nog traag.
Iemand een idee wat ik fout die kwa Preloaden in dit script? Overal op GoT en google staat dat het zo moet.

[ Voor 39% gewijzigd door Verwijderd op 08-05-2003 23:03 ]

[Verwijderd]

Het is een beetje lastig om jouw code uit te pluizen. Ik zou het zo doen (tenminste als ik je probleemstelling goed begrijp).

HTML:

<html><head></head>
<body>
[img]"folder.gif"[/img]
<script type="text/javascript">
function doe(){
for (i=0;i<document.images.length;i++){
x=document.images[i];
x.onmouseover=function(){this.src=this.src.substr(0,this.src.indexOf('.'))+'over.gif'};
x.onmouseout=function(){this.src=this.src.substr(0,this.src.indexOf('over.'))+'.gif'};
x.onclick=function(){this.onmouseout=function(){};this.onmouseover=function(){}};

}

}
doe();
</script>
</body></html>

Er zitten hier nog wel wat haken en ogen aan.
Hij pakt nu alle plaatjes. Als je niet alle plaatjes wil hebben, dan kun je het beste filteren op className of zo.
De onmouseover plaatje moet 'over' erbij hebben als filename.
Ik weet niet hoe het gaat met de width en height van onmouseover plaatjes.
Er wordt niet gepreload.