[Javascript / Netscape] - mousemove in layer

[Verwijderd]

Hallo,

Ik ben een paar uur inmiddels al weer bezig om een javascriptje werkend te krijgen in netscape (nummertje 7) zoals ik zou willen.

Wat is wil is simpel. Een plaatje laten mee schuiven in een layer. De mousemove over document is geen probleem, maar van de layer wel. Ik heb ook geprobeert de mousemove event en de verwijzing naar de functie om te draaien maar dat mocht ook niet baten. Dit is mijn code

code:

  <script language="JavaScript">
  <!--
  // Detect if the browser is IE or not.
  // If it is not IE, we assume that the browser is NS.
  var IE = document.all?true:false
  if (!IE){
    document.captureEvents(Event.MOUSEMOVE)
    document.layers['menu_bar'].document.onmousemove = move;
    //Werkt dus niet  ^^^^^ 
    document.onmousemove = move;
    //Werkt wel maar niet zoals gewenst ^^^^^ 
  } else{
    document.menu_bar.onmousemove = move;
  }
  var tempX = 0

  function move (e){
    if(!e)
      e = window.event;
    if (IE) { // grab the x-y pos.s if browser is IE
      tempX = event.clientX
    } else {  // grab the x-y pos.s if browser is NS
      tempX = e.pageX
    }

    document.getElementById('mover').style.left = tempX + "px"
    document.getElementById('mover').style.visibility = "visible"
    return true
  }
  //-->
  </script>

En de layers:

code:

    [img]"./images/mover.png"[/img]

                <div name="menu_bar" id="menu_bar" onmousemove="move()" style="height: 30px; position: absolute; margin-left: 19px; margin-top: -11px; z-index:21;">
                <table cellpadding="0" cellspacing="0" id="menu_bar" style="height: 21px; margin-left: -18px; margin-right: -29px;" width="482">
                  <tr>
                    <td width="18"></td>
                    <td align="center"><a class="menuitem" href="">Home</a></td>
                    <td width="1">[img]"./images/menu_splitter.png"[/img]</td>
                    <td align="center"><a class="menuitem" href="?page=">Menu 2</a></td>
                    <td width="1">[img]"./images/menu_splitter.png"[/img]</td>
                    <td align="center"><a class="menuitem" href="?page=">Menu 3</a></td>
                    <td width="1">[img]"./images/menu_splitter.png"[/img]</td>
                    <td align="center"><a class="menuitem" href="?page=">Menu 4</a></td>
                    <td width="1">[img]"./images/menu_splitter.png"[/img]</td>
                    <td align="center"><a class="menuitem" href="?page=contact">Contact</a></td>
                    <td width="24"></td>
                  </tr>
                </table></div>

[ Voor 19% gewijzigd door Verwijderd op 12-01-2005 00:44 ]

[Woudloper]

En als je nou eens:

JavaScript:

document.getElementById('menu_bar').onmousemove = move;

Verder schrok ik eerst omdat je het over Netscape had, maar gelukkig een nieuwe versie. Overigens kan je daar net zo goed Firefox of Mozilla voor gebruiken....

Het menu kan je ook creeëren middelss het style van list, kijk hier (Listamatic) maar eens. Hier op het forum zijn ook diverse topics geweest over het stylen van lists...

[Verwijderd]

Helaas... werkt ook niet

Ik heb gekeken op de link maar is niet wat ik bedoel. Ik wil een soort van muisvolger in de menu balk.

Op http://www.webdc.nl/beta is het probleem te zien. Ik wil uiteraard een pagina maken die op meerdere browsers helemaal goed werkt. IE = Ok , NS = niet Ok

Wanneer iemand dus suggesties heeft

Ik weet dus zeker dat het niet aan het scriptje ligt, want wanneer ik de mousemove aan 'document' alleen koppel dan werkt ie perfect.

[ Voor 40% gewijzigd door Verwijderd op 12-01-2005 11:31 . Reden: Verduidelijking ]

[crisp]

Het ligt wel aan je script; de 'NS'-manier die je hier gebruikt is voor Netscape 4 en werkt dus niet in moderne browsers.
Lees je eens in in DOM, en de verschillende event-modellen.

[Verwijderd]

zal ik doen. tnx voor de tip

[Verwijderd]

Ik heb het gevoel dat ik er bijna ben

code:

  <script language="JavaScript">
  <!--
  // Detect if the browser is IE or not.
  // If it is not IE, we assume that the browser is NS.
  var IE = document.all?true:false
  if (!IE)
    document.captureEvents(Event.MOUSEMOVE)
  document.getElementsById("menu_bar").onmousemove=move

  var tempX = 0

  function move (e){
    if(!e)
      e = window.event;
    if (IE) { // grab the x-y pos.s if browser is IE
      tempX = event.clientX
    } else {  // grab the x-y pos.s if browser is NS
      alert(window);
      tempX = e.pageX
      alert(tempX);
    }

    document.getElementById('mover').style.left = tempX + "px"
    document.getElementById('mover').style.visibility = "visible"
    return true
  }
  //-->
  </script>

Bij mijn alert(window); krijg in windowObject als message. Echter kent ie event niet!!!

IEmand suggesties?

[Verwijderd]

event is met een kleine letter (JS is casesensitive) mousemove is volgens mij ook helemaal lowercase, maar het zou ook mouseMove kunnen zijn (weet niet zeker)

[crisp]

het is getElementsById
captureEvents werkt geloof ik nog wel in Moz/FF maar je kan net zo goed element.onmousemove gebruiken.

[ Voor 58% gewijzigd door crisp op 13-01-2005 08:53 ]

[Verwijderd]

Heb al een werkende oplossing voor degene die geïnteresseerd is:

code:

<script language="JavaScript">
<!--

tempX = 0;

function move(e)
{
  if (window.ActiveXObject){
  tempX = event.clientX;
  } else if(document.addBinding){
  tempX = e.pageX;
  }

  document.getElementById('mover').style.left = tempX + "px";
  document.getElementById('mover').style.visibility = "visible";
  return true;
}

window.onload = function(){
  if(!document.getElementById){ return;}
  document.getElementById('menu_bar').onmousemove = move;
}
</script>

Thanks anyway.

P.s. ik wist het wel dat getElementById was maar begon heel even te twijfelen. Zag met een s ertussen namelijk op een tutorial site

Statix

[crisp]

JavaScript:

if (window.ActiveXObject){
tempX = event.clientX;
} else if(document.addBinding){
tempX = e.pageX;
}

waarom properties af gaan vragen die er eigenlijk helemaal niets mee te maken hebben? Doe dan gewoon meteen zo:

JavaScript:

if (!e) e = event;
tempX = e.clientX || e.pageX;