[js] setAttribute() en mouseover - Softwareontwikkeling

vrijdag 18 oktober 2002 08:21

Acties:

Verwijderd

Topicstarter

Ik heb een probleempje _{ik ben lelijk, heb een kutjeugd gehad, etc.}

Ik schrijf graag nette code en ik haat het om regels dubbele code te kloppen. Met javascript kan ik heel fijn met setAttribute() bijvoorbeeld aan een image tag een width, height of bijvoorbeeld een style opgeven.

Ik heb nu echter het volgende: normaal gesproken, als ik een leuke hoverbutton wil maken, zet ik fijn in iedere img tag zoiets als onmouseover="changePlaatje(this)" onmouseout="changePlaatje(this)" en dat gaat natuurlijk helemaal nergens over. Als ik twintig knoppen onder elkaar heb moet ik twintig keer die attributes opnemen in de tag. Ik heb even een en ander geprobeerd, maar ik kom er niet op of het nu ook mogelijk is om de mouseover behavior vast te leggen buiten de img tag zelf.

_{Het gaat opzich niet eens zozeer om mijn probleem opzich, met CSS kan ik ook best bereiken wat ik nu wil, maar ik ben wel geïnteresseerd in het probleem.}

[ Voor 0% gewijzigd door Verwijderd op 18-10-2002 08:22 . Reden: typo ]

vrijdag 18 oktober 2002 09:26

Acties:

crisp

Devver

Pixelated

Je kan achteraf mbv javascript events koppelen aan elementen mbv DOM.
Voorbeeldje:

JavaScript:

function sethover() {

  var coll = document.getElementsByTagName('img');

  for (var i = 0; i < coll.length; i++) {

    var img = coll[i];
    img.onmouseover = hover;
    img.onmouseout = nohover;

  }

}

function hover() {

  this.src = 'add_hover.gif';

}

function nohover() {

  this.src = 'add.gif';

}

HTML:

<body onLoad="sethover()">

[img]"add.gif"[/img]&nbsp;
[img]"add.gif"[/img]&nbsp;
[img]"add.gif"[/img]&nbsp;

</body>

Intentionally left blank

vrijdag 18 oktober 2002 10:09

Acties:

2

Je kan de onMouseOver attribute prima vastleggen met setAttribute, alleen dit werkt niet in microschoft internet explorer. Probeer maar eens in een normale browser, dan zie je dat het wel werkt.

vrijdag 18 oktober 2002 10:52

Acties:

Bosmonster

*zucht*

Check deze eens:

http://www.youngpup.net/?...ppets/soopa-rollovers.xml

Youngpups roll-over script maakt gebruik van een simpele extra attribute om de mouseover state weer te geven. Werkt wel niet in NS4, maar genereert ook geen foutmeldingen

Vind het wel een aardig systeem iig.

vrijdag 18 oktober 2002 11:11

Acties:

Hangloozz

{ @$%&# }

beetje traag is het wel

maar het werkt.
Daarnaast claimed ie dit:

* easiest rollovers on earth, baby!

wat moet ik daar van denken...als ik de code zo zie dan ben ik geneigd iets anders te vinden

www.jurgroessen.nl

vrijdag 18 oktober 2002 11:25

Acties:

crisp

Devver

Pixelated

Hier in IE6 lukt het me niet eens om met setAttribute de style te zetten, laat staan een onmouseover. In Mozilla werkt dat allemaal probleemloos...

Intentionally left blank

vrijdag 18 oktober 2002 11:25

Acties:

Bosmonster

*zucht*

Hangloozz schreef op 18 oktober 2002 @ 11:11:
beetje traag is het wel maar het werkt.
Daarnaast claimed ie dit:

[...]

wat moet ik daar van denken...als ik de code zo zie dan ben ik geneigd iets anders te vinden

Traag?? Ik zit hier even achter niet de jongste computer maar het loopt als een trein hoor...

En de code is ook supersimpel... die 1.4K haal je er wel uit in vergelijking met bijvoorbeeld de (echt trage) MM_shit() functies

crisp schreef op 18 oktober 2002 @ 11:25:
Hier in IE6 lukt het me niet eens om met setAttribute de style te zetten, laat staan een onmouseover. In Mozilla werkt dat allemaal probleemloos...

Nee klopt is een bug... of bug.. tis er gewoon niet op die manier voor bedoeld imho.

vrijdag 18 oktober 2002 11:30

Acties:

crisp

Devver

Pixelated

Bosmonster schreef op 18 oktober 2002 @ 10:52:
Check deze eens:

http://www.youngpup.net/?...ppets/soopa-rollovers.xml

Youngpups roll-over script maakt gebruik van een simpele extra attribute om de mouseover state weer te geven. Werkt wel niet in NS4, maar genereert ook geen foutmeldingen

Vind het wel een aardig systeem iig.

Goh, het is een verdere uitwerking van wat ik al had gepost

Intentionally left blank

vrijdag 18 oktober 2002 11:35

Acties:

Bosmonster

*zucht*

crisp schreef op 18 oktober 2002 @ 11:30:
[...]

Goh, het is een verdere uitwerking van wat ik al had gepost

Ik vind het alleen te beperkend.. regelmatig gebruik ik bijvoorbeeld gewoon CSS-links en wil de bullet ervoor meeveranderen... Dit soort simpele dingen zijn dan al niet meer mogelijk. In ieder geval meerdere/andere swaps dan op het this-object. Dat laatste (simpele mouseovers voor menu-items etc) gebruik ik eerlijk gezegd zelden meer sinds je meestal hetzelfde veel sneller en 'cleaner' in CSS kan bereiken.

Leuk voor de n00b, maar te beperkend voor ieder ander imho.

vrijdag 18 oktober 2002 11:50

Acties:

Hangloozz

{ @$%&# }

Bosmonster schreef op 18 oktober 2002 @ 11:25:

[...]

Traag?? Ik zit hier even achter niet de jongste computer maar het loopt als een trein hoor...

En de code is ook supersimpel... die 1.4K haal je er wel uit in vergelijking met bijvoorbeeld de (echt trage) MM_shit() functies

op m'n AMD850 hier loopt het niet soepel; je ziet duidelijk even een zandloper en dan een imageswap die wat zwak aanvoelt... een beetje stroperig.

Mar ik ga het eens verder uitpluizen..altijd leuk wat je hier op GoT leert

www.jurgroessen.nl

vrijdag 18 oktober 2002 12:31

Acties:

Verwijderd

Topicstarter

crisp schreef op 18 oktober 2002 @ 09:26:
Je kan achteraf mbv javascript events koppelen aan elementen mbv DOM.
Voorbeeldje:

JavaScript:

function sethover() {

  var coll = document.getElementsByTagName('img');

  for (var i = 0; i < coll.length; i++) {

    var img = coll[i];
    img.onmouseover = hover;
    img.onmouseout = nohover;

  }

}

function hover() {

  this.src = 'add_hover.gif';

}

function nohover() {

  this.src = 'add.gif';

}

HTML:

<body onLoad="sethover()">

[img]"add.gif"[/img]&nbsp;
[img]"add.gif"[/img]&nbsp;
[img]"add.gif"[/img]&nbsp;

</body>

tnx, ik ben al een heel eind verder, er gebeurt zowaar iets

Het werkt alleen nog niet goed, maar ik ga zelf eerst nog even kijken wat er aan de hand is.

Zou je me misschien kunnen vertellen waarom je hier: img.onmouseover = hover; de functie aanroept zonder haken()?

edit:
Ik heb nu het volgende:

JavaScript:

<script type="text/javascript">
function makeHoverButtons() {

    var imgs = new Array();
    imgs = document.getElementById('navigation').getElementsByTagName('img');
    for ( i=0; i<imgs.length; i++ ) {
        currentImg = imgs[i];
        currentImg.onmouseover = hoverIn;
        currentImg.onmouseout = hoverOut;
    }
    
}

function hoverIn() {

    this.src = 'img/'+currentImg.id+'_hover.gif';
    
}

function hoverOut() {

    this.src = 'img/'+currentImg.id+'.gif';
    
}
</script>

Wat ik dus probeer is voor een aantal images hun hover images vast te leggen. Feit is helaas dat javascript en ik nogal vaak ruzie met elkaar hebben, en zo ook nu.
De code die ik nu heb is natuurlijk behoorlijk leip, met global vars en de hele meuk, en mijn code geeft nu iedere image dezelfde hover image (de laatste van het array) en de na-hover image is dus ook weer gewoon de normale image van de laatste waarde uit het array. Kan iemand zien wat ik hier verkeerd doe?

vrijdag 18 oktober 2002 12:51

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op 18 oktober 2002 @ 12:31:
[...]
Zou je me misschien kunnen vertellen waarom je hier: img.onmouseover = hover; de functie aanroept zonder haken()?

Omdat je bij het event hier niet direct een functie aanroept, maar een referentie geeft naar de functie die aangeroepen moet worden...

Intentionally left blank

vrijdag 18 oktober 2002 14:43

Acties:

Verwijderd

Topicstarter

crisp schreef op 18 oktober 2002 @ 12:51:
[...]

Omdat je bij het event hier niet direct een functie aanroept, maar een referentie geeft naar de functie die aangeroepen moet worden...

maar dat houdt dus ook in dat je geen parameters kunt meegeven?

^^^^mijn post hierboven heb ik ge-edit, zouden jullie er nog even naar willen kijken?

vrijdag 18 oktober 2002 15:59

Acties:

Verwijderd

Verwijderd schreef op 18 oktober 2002 @ 14:43:
maar dat houdt dus ook in dat je geen parameters kunt meegeven?

Correct.

vrijdag 18 oktober 2002 17:11

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op 18 oktober 2002 @ 15:59:
[...]

Correct.

oeh dat zuigt

Maar ik heb het nu niet nodig

Ik ben nog even aan het denken geweest met mijn domme kop en dit is er nu uitgekomen:

PHP:

function makeHoverButtons() {

    var imgs = new Array();
    imgs = 
    document.getElementById('navigation').getElementsByTagName('img');
    for ( i=0; i<imgs.length; i++ ) {
        var currentImg = imgs[i];
        currentImg.onmouseover = hoverIn;
        currentImg.onmouseout = hoverOut;
    }
    
}

function hoverIn() {

    this.src = 'img/'+this.id+'_hover.gif';
    
}

function hoverOut() {

    this.src = 'img/'+this.id+'.gif';
    
}

en het lijkt goed te werken

Alleen nog even een simpel preloadertje erin

vrijdag 18 oktober 2002 17:22

Acties:

crisp

Devver

Pixelated

Met parameter:

JavaScript:

1 2	currentImg.onmouseover = function() { hover(1); } currentImg.onmouseout = function() { hover(0); }

JavaScript:

function hover(state) {

  var suf = state? '_hover' : '';
  this.src = 'img/'+this.id+suf+'.gif';

}

kan ook

Intentionally left blank

vrijdag 18 oktober 2002 18:59

Acties:

Verwijderd

Topicstarter

crisp schreef op 18 oktober 2002 @ 17:22 geen onzin:

$_/-\o_$

crisp:

Blues:

en natuurlijk alle anderen: