[JS] onmouseout werkt niet goed in mozilla?

[Ethnocentrix]

Ik heb voor een website een scriptje geschreven dat je alpha transparantie van een plaatje moet veranderen als je er met je muis overheen gaat. Onder internet explorer werkt het nu allemaal goed, maar onder mozilla firefox zit er nog 1 bugje in. Het plaatje fade wel in zoals het moet, maar vervolgens als je met je muis van het plaatje afgaat veranderd de transparantie niet terug, wat wel zou moeten.(onder internet explorer werkt het wel goed) Als je vervolgens nog een keer over het plaatje gaat werkt het we lgoed en gaat de transparantie wel terug.
Ligt dit aan mozilla firefox, of zit er toch iets verkeerd in m'n script?

JavaScript:

// fade script by jorrit vd Ven
function fadein(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",40)
}

function highlightit(naam){
if (document.getElementById(naam).style.MozOpacity<1)
document.getElementById(naam).style.MozOpacity=parseFloat(document.getElementById(naam).style.MozOpacity)+0.1
else if (document.getElementById(naam).filters&&img1.filters.alpha.opacity<100)
document.getElementById(naam).filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}

function fadeout(naam) {
clearInterval(highlighting)
if (document.getElementById(naam).style.MozOpacity==1)
document.getElementById(naam).style.MozOpacity=0.5

else if (document.getElementById(naam).filters&&document.getElementById(naam).filters.alpha.opacity==100)
document.getElementById(naam).filters.alpha.opacity=50
}

alvast bedankt!

[Johnny]

Dit script zit wel erg ingewikkeld in elkaar. Die browserchecks heb je helemaal niet nodig. Zet gewoon de transparantie in alle gevallen op zowel de MSIE/Mozilla manier (je vergeet trouwens de KHTML en CSS3) en als een browser het ondersteunt dan zal hij het gewoon toepassen.

Ik heb ooit eens een script geschreven dat precies hetzelfde doet: http://www.brainerror.net/scripts_js_blendtrans.php

[Ethnocentrix]

Ik heb het script aangepast, maar nu fade 'ie helemaal niet meer terug
Als je er nu op gaat staan wordt opacity 1.0, en als je eraf gaat blijft ie 1.0. Als je er vervolgens weer op gaat staan springt ie heel snel terug naar 0.5, om vervolgens weer naar 1 te faden.

Ik denk toch dat er een probleem zit in het onmouseout="fadeout('img1')" gebeuren in mozilla zit, want het faden enzo werkt goed, alleen het terugfaden naar 0.5 werkt niet

[ Voor 4% gewijzigd door Ethnocentrix op 07-06-2004 22:54 ]

[crisp]

Ik zou graag ook de bijbehorende HTML willen zien

In ieder geval gebruik je in je script te veel lookups (als je de lookup maar 1x doet en opslaat in een var is je script meteen 10x zo snel), en ga je erg ranzig om met globals.

[MBV]

je zou eens kunnen kijken of het aan de onmouseout ligt door een alert in je functie te plaatsen. Heeft mij wel eens geholpen

[Ethnocentrix]

ok, dit is wat ik nu heb:

code:

<img src="gfx/contact.jpg" id="img1" onmouseover="fadein('img1')" 
onmouseout="fadeout('img1')" style="-moz-opacity: 0.5; FILTER: alpha(opacity=50);">
<img src="gfx/contact.jpg" id="img2" onmouseover="fadein('img2')" 
onmouseout="fadeout('img2')" style="-moz-opacity: 0.5; FILTER: alpha(opacity=50);">

<script type="text/javascript">
function fadein(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",40)
}

function highlightit(naam){
document.getElementById(naam).style.MozOpacity=parseFloat(document.getElementById(naam).style.MozOpacity)+0.1
document.getElementById(naam).style.Opacity=parseFloat(document.getElementById(naam).style.Opacity)+0.1
document.getElementById(naam).filters.alpha.opacity+=10

}

function fadeout(naam) {
clearInterval(highlighting)
document.getElementById(naam).style.MozOpacity=0.5
document.getElementById(naam).style.Opacity=0.5
document.getElementById(naam).filters.alpha.opacity=50
}
</script>

[Ethnocentrix]

MBV schreef op 07 juni 2004 @ 22:59:
je zou eens kunnen kijken of het aan de onmouseout ligt door een alert in je functie te plaatsen. Heeft mij wel eens geholpen

Dit heb ik net gedaan, en het blijkt dat als je de 1e keer van het plaatje afgaat dat de moueout helemaal niet getriggerd wordt. Als je vervolgens weer op het plaatje gaat staan, en er weer afgaat wordt de onmouseout wel getriggerd.

@crisp: hoezo ga ik ranzig met globals om? (* Ethnocentrix is javascript n00b)

[ Voor 8% gewijzigd door Ethnocentrix op 07-06-2004 23:13 ]

[Verwijderd]

Of anders kun je natuurlijk ook gewoon een fade-effect van te voren maken en opslaan als een animated gif. Je hebt dan i.i.g. de garantie dat het 'fade-effect' in zowat alle browsers zal werken.

JavaScript:

[img]"image_normal.gif"[/img]

[Ethnocentrix]

dat zou kunnen idd, maar een animated gif gaat iin dit geval teveel ten koste van de kwaliteit van het plaatje.(gif is max 256 kleuren, en dat is te weinig )

[crisp]

HTML:

<img src="gfx/contact.jpg" id="img1" opacity="50" onmouseover="fadein('img1')"
  onmouseout="fadeout('img1')" style="-moz-opacity: 0.50; filter: alpha(opacity=50);">

<script type="text/javascript">

var highlighting = [];

function fadein(which2) {

  highlighting[which2] = setInterval('highlightit(\''+which2+'\')', 40);

}

function highlightit(naam) {

  var el = document.getElementById(naam), curOpacity = parseInt(el.getAttribute('opacity'), 10);

  if (curOpacity < 100) {

    curOpacity += 10;

    if (el.style.MozOpacity) el.style.MozOpacity = (curOpacity / 100) - 0.1;
    else if (el.filters) el.filters.alpha.opacity = curOpacity;

    el.setAttribute('opacity', curOpacity);

  } else {

    clearInterval(highlighting[naam]);
    delete highlighting[naam];

  }

}

function fadeout(naam) {

  if (typeof highlighting[naam] != 'undefined') {

    clearInterval(highlighting[naam]);
    delete highlighting[naam];

  }

  var el = document.getElementById(naam);

  if (el.style.MozOpacity) el.style.MozOpacity = 0.50;
  else if (el.filters) el.filters.alpha.opacity = 50;

  el.setAttribute('opacity', '50');

}
</script>

ik ben alleen te moe nu om uit te leggen waarom dit wel goed werkt...

[sjaakaq]

Johnny schreef op 07 juni 2004 @ 22:18:
Dit script zit wel erg ingewikkeld in elkaar. Die browserchecks heb je helemaal niet nodig. Zet gewoon de transparantie in alle gevallen op zowel de MSIE/Mozilla manier (je vergeet trouwens de KHTML en CSS3) en als een browser het ondersteunt dan zal hij het gewoon toepassen.

Ik heb ooit eens een script geschreven dat precies hetzelfde doet: http://www.brainerror.net/scripts_js_blendtrans.php

Werkt niet in Opera

[crisp]

leokennis schreef op 08 juni 2004 @ 00:29:
[...]

Werkt niet in Opera

nou en? er werken wel meer dingen niet in Opera

[Johnny]

crisp schreef op 08 juni 2004 @ 00:34:
[...]

nou en? er werken wel meer dingen niet in Opera

Zoals bijvoorbeeld transparantie via CSS, wat voor overloop effectjes toch wel een randvoorwaarde is.

_{Of is dat nu eindelijk eens gefixt?}

[crisp]

Johnny schreef op 08 juni 2004 @ 08:55:
[...]


Zoals bijvoorbeeld transparantie via CSS, wat voor overloop effectjes toch wel een randvoorwaarde is.

_{Of is dat nu eindelijk eens gefixt?}

ja, en xmlHTTP, mogelijkheid om door de stylesheet/rules collectie heen te lopen, currentStyle/computedStyle, contentEditable etcetera etcetera. Stuk voor stuk dingen die IE en Mozilla al tijden kunnen (zei het ieder op een eigen manier)

[sjaakaq]

Ow. Wist ik niet. Ik dacht altijd dat Opera zich netjes aan de regels hield

[Ethnocentrix]

bedankt, het script van crisp werkt

iedereen bedankt!