javascript menu mouseovers 2

[Verwijderd]

Ik heb momenteel het volgende javascript menu:

code:

function openMenu(cat) {
this.cat = cat;
document.write('<span class = "level1">');
document.write('<a href = "' + thisPage + '?page=null" 

target="_self">');
if (lev1img=='yes') {
document.write('<img src="' + imgPath + lev1OpName 
+'" width="' + lev1OpWidth + '" height="' 
+ lev1OpHeight + '"border="0">');
}
document.write(cat + '</a><span><br>');
for (x=0;x<thisMenu.length;x++){
 document.write('<span class = "level2">');
 if (lev2img=='yes') {
 document.write('<img src="' + imgPath 
+ lev2Name +'" width="' + lev2Width 
+ '" height="' + lev2Height + '">');
 }
 if (lev2Char=='yes') {
 document.write(bullet);
 }
 document.write('<a href="' + linka + thisMenu[x].linkb + '">' 
+ thisMenu[x].name + '</a><span><br>');
}
}

function closeMenu(cat,pass) {
this.cat = cat;
this.pass = pass;
document.write('<span class = "level1">');
document.write('<a href = "' + thisPage 
+ '?page='+pass+'" target="_self">');
if (lev1img=='yes') {
document.write('<img src="' + imgPath 
+ lev1ClosName +'" width="' + lev1ClosWidth 
+ '" height="' + lev1ClosHeight + '"border="0">');
}
document.write(cat + '</a><span><br>');
}

lev1OpName staat (in het .js bestandje) voor een pijltje verticaal (betekent: menu open)

lev1ClosName staat (in het .js bestandje) voor een
horizontaal pijltje (betekent: menu gesloten)

Nu wil ik dat als de gebruiker met de muis over de pijltjes heen gaat, de pijtjes van kleur veranderen. Hiervoor heb ik twee extra pijltjes gemaakt. Dezelfde pijlen als de open en close pijlen, alleen in een andere kleur. Nu loop ik vast, hoe bouw ik dit in in de code?

Moet het met zoiets:

code:

onmouseover="open_hover.gif'" onmouseout="open.gif'"

En zo ja, hoe? Voor alle zekerheid hier ook nog het stukje code in het .js bestandje dat de pijltjes definieert:

code:

lev1OpName='open.gif';          
lev1OpHeight='10';              
lev1OpWidth='10';
                
lev1ClosName='closed.gif';      
lev1ClosHeight='10';            
lev1ClosWidth='10';

Wie kan mij helpen?

[André]

Dit lijkt wel veel op een scriptrequest, jij hebt een kant en klaar script en die moeten wij hier even uitbreiden.

Voordat je met zoiets gaat werken moet je wat meer kennis hebben van javascript, en als je dat niet hebt dan even een kant en klaar script downloaden die precies doet wat jij wil.

(NOFI)

[Verwijderd]

ik ben sprakeloos... Ik heb hiermee DUIDELIJK enorm mijn best gedaan en dan wordt dat zo ARROGANT afgedaan...?

Een scriptrequest is iets heel anders. Ik heb hier uren mee zitten klooien. Ik weet inmiddels meer van Javascript dan mijn man, maar ben nu eenmaal geen expert...

[Morrar]

Ok, had ff geen zin om je hele code te gaan uitpluizen, maar standaard werkt het zo:

- geef je image een naam (name="blaat")
- stop de volgende code in de link om het plaatje:

<a href="blaat.htm"
onmouseover="document.images['blaat'].src='blover.gif'"
onmouseout="document.images['blaat'].src='blout.gif'"
>[img]"blaat.gif"></a[/img]

Moet je zelf ff kijken waar dat in de document.write()'s moet, en hoe je handig namen voor je plaatjes kunt genereren. Ook zijn de mouseover / mouseout plaatjes mooi in een variabele te zetten.

Suc6.

[André]

Op donderdag 18 juli 2002 14:06 schreef dJorXZ het volgende:
ik ben sprakeloos... Ik heb hiermee DUIDELIJK enorm mijn best gedaan en dan wordt dat zo ARROGANT afgedaan...?

Ik heb toch NOFI eronder gezet, je hoeft je dus niet aangevallen te voelen. Ik heb het ook niet altijd bij het rechte eind en ben ook maar een simpel iemand.

[HunterPro]

Ik zou beginnen met voor elke knop extra eigenschappen toe te gaan voegen. Dus in je code:

code:

lev1OpName='open.gif';          
lev1OpHeight='10';              
lev1OpWidth='10';
                
lev1ClosName='closed.gif';      
lev1ClosHeight='10';            
lev1ClosWidth='10';

Lev1OpOverName='openover.gif';
lev1ClosHeight='10';            
lev1ClosWidth='10';

Lev1ClosOverName='closedover.gif';
lev1ClosHeight='10';            
lev1ClosWidth='10';

waarbij de twee laatste dus 'nieuw' zijn. Vervolgens ga je uitpluizen hoe deze code eigenlijk werkt. En dan zie je dus dat ie via document.write een <IMG> tag wegschrijft, evenals een <A>. In je <A> tag zeg je dat ie on mouseover de images van <IMG ID='blaat' /> moet veranderen in een ander. Klaar!

[Verwijderd]

Alle onevent attributen moeten volledig geldige javascript statements bevatten. Dat is nu niet het geval. Schrijf zelf een javascript functie die je uitvoert, en dat wordt iets als onmouseover="mijnFunctie('naamvanplaatje', 'hover_open.gif');"

En die functie zal ongeveer het volgende zijn:

code:

function mijnFunctie(naam, plaatje) {
  document.images[naam].src = plaatje;
}

Geef je plaatjes dus ook een id mee, dan kun je één functie voor alle plaatjes gebruiken. Het beste kun je ook de plaatjes preloaden.

[Verwijderd]

Ok, ik ben er mee bezig (alles kraakt heel hard bij mij bovenin <= ik ben blond, hah!) alvast bedankt voor jullie tips.

Mocht ik het nog niet snappen, dan komt die domme blondje wel weer hier terug. Ik vind het nog steeds redelijk ingewikkeld.

Het toevoegen van de

code:

Lev1OpOverName='openover.gif';
lev1ClosHeight='11';            
lev1ClosWidth='11';

Lev1ClosOverName='closedover.gif';
lev1ClosHeight='11';            
lev1ClosWidth='11';

is me al duidelijk, de rest snap ik nog niet helemaal

[Verwijderd]

Op donderdag 18 juli 2002 14:08 schreef Morrar het volgende:
Ok, had ff geen zin om je hele code te gaan uitpluizen, maar standaard werkt het zo:

- geef je image een naam (name="blaat")
- stop de volgende code in de link om het plaatje:

<a href="blaat.htm"
onmouseover="document.images['blaat'].src='blover.gif'"
onmouseout="document.images['blaat'].src='blout.gif'"
>[img]"blaat.gif"></a[/img]

Moet je zelf ff kijken waar dat in de document.write()'s moet, en hoe je handig namen voor je plaatjes kunt genereren. Ook zijn de mouseover / mouseout plaatjes mooi in een variabele te zetten.

Suc6.

Het is me niet helemaal duidelijk wat je bedoelt met de verschillende 'blaat's. Stel, het plaatje heet open.gif en openover.gif als de muis er op is. Is dit dan fout?:

code:

<a href="open.htm"
 onmouseover="document.images['openover'].src='openover.gif'"
 onmouseout="document.images['open'].src='open.gif'"
>[img]"open.gif"></a[/img]

[HunterPro]

Op donderdag 18 juli 2002 14:33 schreef dJorXZ het volgende:

[..]

Het is me niet helemaal duidelijk wat je bedoelt met de verschillende 'blaat's. Stel, het plaatje heet open.gif en openover.gif als de muis er op is. Is dit dan fout?:

code:

<a href="open.htm"
 onmouseover="document.images['openover'].src='openover.gif'"
 onmouseout="document.images['open'].src='open.gif'"
>[img]"open.gif"></a[/img]

hij's bijna goed

<a href="open.htm"
onmouseover="document.images['open'].src='openover.gif'"
onmouseout="document.images['open'].src='open.gif'"
>[img]"open.gif"></a[/img]



[edit]
maar zo heeft die variablen aanmaken natuurlijk nul komma nul zin, gebruik een function zoals Cheatah al zei

[Verwijderd]

Dus ik gebruik zowel bovenstaande code als de function van Cheatah?

code:

function mijnFunctie(over, over.gif) {
  document.images[over].src = over.gif;
}

[Verwijderd]

Hèh getver, ik begrijp er nu helemaal niets meer van. Waar moet die functie dan staan en waar moet

code:

<a href="open.htm"
onmouseover="document.images['open'].src='openover.gif'"
onmouseout="document.images['open'].src='open.gif'"
>[img]"open.gif"></a[/img]

dan staan? En moeten die dan tussen '' en moet ik ze meer dan 1 keer aanmaken?

[André]

code:

<script language="javascript">

  function over(plaatje)
  {
    plaatje.src = "openover.gif";
  }
  
  function uit(plaatje)
  {
    plaatje.src = "open.gif";
  }

</script>

<a href="open.htm">
  [img]"open.gif">
</a[/img]

Even uit m'n hoofd, misschien kom je zo verder... ;)'

_{ben ik nou weer liev?}

[Verwijderd]

Op donderdag 18 juli 2002 14:52 schreef Yogho het volgende:

code:

<script language="javascript">

  function over(plaatje)
  {
    plaatje.src = "openover.gif";
  }
  
  function uit(plaatje)
  {
    plaatje.src = "open.gif";
  }

</script>

<a href="open.htm">
  <img onmouseover="over(this)" 
onmouseout="uit(this)" src="open.gif">
</a>

Even uit m'n hoofd, misschien kom je zo verder... ;)'

_{ben ik nou weer liev?}

_{je bent een schat}

Ik heb ze in de <head> gezet, die codes van je. Ik krijg alleen een kruisje met een blauw vierkant eromheen...

[Bosmonster]

Op donderdag 18 juli 2002 14:52 schreef Yogho het volgende:

code:

<script language="javascript">

[...]

</script>

<a href="open.htm">
  [img]"open.gif">
</a[/img]

Even uit m'n hoofd, misschien kom je zo verder... ;)'
_{ben ik nou weer liev?}

_{dit werruk nie in NS4 he}

[André]

Op donderdag 18 juli 2002 15:04 schreef dJorXZ het volgende:

[..]

_{je bent een schat}

Ik heb ze in de <head> gezet, die codes van je. Ik krijg alleen een kruisje met een blauw vierkant eromheen...

In de <img> een border="0" zetten:

<img border="0"...

[Verwijderd]

Op donderdag 18 juli 2002 15:19 schreef Yogho het volgende:

[..]

In de <img> een border="0" zetten:

<img border="0"...

ok,ok, dat weet ik. Maar wat doet die code verder? Ik zie niets? Hij pakt nog steeds geen andere plaatjes voor mouseover...

[André]

Op donderdag 18 juli 2002 15:22 schreef dJorXZ het volgende:

[..]

ok,ok, dat weet ik. Maar wat doet die code verder? Ik zie niets? Hij pakt nog steeds geen andere plaatjes voor mouseover...

Bij mij werkt hij nu prima, maar als jij een kruisje krijgt betekent dat dat hij de plaatjes niet kan vinden.

Het script op zich werkt perfect als je hem in de head plaatst. Als je nu het script wat ik gepost heb in een losse html file zet doet ie ut dan wel?

[Verwijderd]

Ok, dat lukt me nu. Ik krijg mijn image getoond en hij verandert ook nog. Maar hoe integreer ik dit nu met

code:

document.write('<a href = "' + thisPage + '?page=null" 

target="_self">');
if (lev1img=='yes') {
document.write('<img src="' + imgPath + 
lev1OpName +'" width="' + lev1OpWidth + 
'" height="' + lev1OpHeight + '"border="0">');
}
document.write(cat + '</a>

[André]

code:

document.write('<a href = "' + thisPage + '?page=null" target="_self">');

if (lev1img=='yes') 
{
  document.write('[img]"'[/img]');
}

document.write(cat + '</a>

Zo, en natuurlijk de functies over en uit in de header.

[Verwijderd]

Nee, dat vindt ie helemaal niet leuk. Error etc. Volgens mij moeten we ook op de ene of andere manier iets doen met de extra variabelen die gecreëerd zijn in het .js bestand.

code:

Lev1OpOverName='openover.gif';
lev1ClosHeight='11';            
lev1ClosWidth='11';

Lev1ClosOverName='closedover.gif';
lev1ClosHeight='11';            
lev1ClosWidth='11';

Je ziet namelijk dat de oude variabelen wel voorkomen in de code, dit zijn in het .js bestand:

code:

lev1OpName='open.gif';          
lev1OpHeight='11';              
lev1OpWidth='11';               

lev1ClosName='closed.gif';      
lev1ClosHeight='11';            
lev1ClosWidth='11';

[Verwijderd]

Wat ik eigenlijk wil is een menuutje à la deze hier:

[disjfa]

http://www.dhtmlcentral.com/script/script.asp?id=31

zow.... dat was moeilijk... nu nog ff de rest leren

[Verwijderd]

Op donderdag 18 juli 2002 17:15 schreef disjfa het volgende:
[url="http://www.dhtmlcentral.com/script/script.asp?id=31"]http://www.dhtmlcentral.com/script/script.asp?id=31[/url]

zow.... dat was moeilijk... nu nog ff de rest leren

Dat menu hàd ik juist al een keer gemaakt. Loopt nog steeds ergens op een site van me. Maar ik probeer nu iets anders, een menu met mouseover-buttons en uitvouwende submenu's, zie de link die ik hierboven postte.