omouseover på to div's

et id der starter med et tal er ikke gyldigt.



<div id="div1"></div>
<div id="div2"></div>
<script type="text/javascript">
div1 = document.getElementById("div1");
div1 = document.getElementById("div1");

div1.onmouseover = function()
{
MouseOver();
}

div2.onmouseover = function()
{
MouseOver();
}

div1.onmouseout = function()
{
MouseOut();
}

div2.onmouseout = function()
{
MouseOut();
}

function MouseOut()
{
//kode
}

function MouseOver()
{
//kode
}

</script>

Du kan også sætte flere ad gangen sådan her:

<div id="div1"></div>
<div id="div2"></div>

<script type="text/javascript">
div1 = document.getElementById("div1");
div1 = document.getElementById("div2");

div1.onmouseover = div2.onmouseover = function(){
  MouseOver();
}

div1.onmouseout = div2.onmouseout = function(){
  MouseOut();
}

function MouseOut(){
  //kode
}

function MouseOver(){
  //kode
}
</script>

hvis de skal gøre præcis det samme.

Hvis jeg bruger ovenstående script skal jeg så ikke smide nogle onmouseover eller onmouseout ind i min div - eller td som det faktisk er.

Jeg har følgende:

<td id="menu01"></td>
<td id="menu02"></td>
<td id="menu03"></td>
<td id="menu04"></td>

I min css har jeg lavet mouseover effekterne og de virker, men når musen er over menu01 vil jeg gerne have aktiveret mouseover på menu02 også. Jeg forklarede det måske ikke helt præcist i første omgang.

Mvh Weeelo

Nej, det kan du ikke, fordi du gør det med CSS. :) Så virker vores koder ikke.

Hvis du gjorde det med ren JavaScript, kunne du sagtens.

mouseover i CSS ("hover") er nemlig ikke det samme som onmouseover i JS.

Men hvis du viser mig, hvordan din CSS-mouseover ser ud, kan jeg godt lave den til dig i JavaScript, så den fungerer på begge felter.

Ok. Hvad er tricket i at referere til funktionen MouseOut og MouseOver i stedet for blot at skrive funktionerne i kaldene? Altså:

<script type="text/javascript">
div1 = document.getElementById("div1");
div1 = document.getElementById("div2");

div1.onmouseover = div2.onmouseover = function(){
    //kode
}

div1.onmouseout = div2.onmouseout = function(){
    //kode
}

</script>

Min CSS ser således ud. Med musen over menu03 skal menu04 også aktiveres som mouseover.

#menu03 {
    background-image: url(../images/menu_03.png);
    width: 122px;
    height: 29px;
    cursor: pointer;
}
#menu03:hover {
  background-position: 0 29px;
}

#menu04 {
    background-image: url(../images/menu_04.png);
    width: 18px;
    height: 29px;
    cursor: pointer;
}
#menu04:hover {
  background-position: 0 29px;
}

Tricket er, at du kun skal skrive "//kode" én gang i stedet for 2. Så det er en smagssag. Du kan også sagtens sætte det direkte på tags'ene.

Ikke helt, da de to mouseover er forskellige og ligeledes med de to mouseout. Man kan selvfølgelig godt lave en overordnet mouseout, der bare satte hele skidtet til udgangspunktet. Hvordan kan det klares med css'en og javascript som du mente godt kunne lade sig gøre?

Mvh Weeelo

Altså CSS'en må i så fald droppes.

I stedet kunne det gøres omtrent sådan her:

<td id="menu01" onmouseover="this.backgroundPosition=document.getElementById('menu02').backgroundPosition='0 29px'" onmouseout="this.backgroundPosition=document.getElementById('menu02').backgroundPosition='0'"></td>
<td id="menu02" onmouseover="this.backgroundPosition=document.getElementById('menu01').backgroundPosition='0 29px'" onmouseout="this.backgroundPosition=document.getElementById('menu01').backgroundPosition='0'"></td>

Det er ikke pænt, men jeg tror ikke, du kan gøre det udelukkende i CSS.

Hmm, det fungerer ikke.

Det kan ikke være fordi det bliver overrulet af CSS'en, da jeg har prøvet at fjerne min hover dér - det resulterede blot i at der slet ingen mouseover effekt var.

Doh. Jeg mangler "style":

<td id="menu01" onmouseover="this.style.backgroundPosition=document.getElementById('menu02').style.backgroundPosition='0 29px'" onmouseout="this.style.backgroundPosition=document.getElementById('menu02').style.backgroundPosition='0'"></td>
<td id="menu02" onmouseover="this.style.backgroundPosition=document.getElementById('menu01').style.backgroundPosition='0 29px'" onmouseout="this.style.backgroundPosition=document.getElementById('menu01').style.backgroundPosition='0'"></td>

Men nok pænere med en JavaScript-funktion.

Uden for tabellen skriver du:

<script type="text/javascript">
function hover1(o1,o2,sPosition){
  o1.style.backgroundPosition=o2.style.backgroundPosition=sPosition
}
</script>

Og så kan du lave dine td'er sådan her:

<td id="menu01" onmouseover="hover1(this,document.getElementById('menu02'),'0 29px')" onmouseout="hover1(this,document.getElementById('menu02'),'0')"></td>
<td id="menu02" onmouseover="hover1(this,document.getElementById('menu01'),'0 29px')" onmouseout="hover1(this,document.getElementById('menu01'),'0')"></td>

Det fungerer ikke helt. Hvis jeg aktiverer hover på menu01, så virker hover ikke på menu02, men hvis jeg aktiverer hover på menu02 inden menu01, så fungerer den. Så snart menu01 har været aktiveret er der dog ikke noget at komme efter.

Jeg har ændret lidt i skidtet:

function mouseover(obj){
  obj.style.backgroundPosition='0 29px'
}
function mouseout(obj){
  obj.style.backgroundPosition='0 0'
}
function mouseover(obj1,obj2){
  obj1.style.backgroundPosition=obj2.style.backgroundPosition='0 29px'
}
function mouseout(obj1,obj2){
  obj1.style.backgroundPosition=obj2.style.backgroundPosition='0 0'
}

<td id="menu01" onmouseover="mouseover(this,document.getElementById('menu02'))" onmouseout="mouseout(this,document.getElementById('menu02'))"></td>
<td id="menu02" onmouseover="mouseover(this);" onmouseout="mouseout(this)"></td>

I din kode har du 2 mouseover()-funktion og 2 mouseout-funktioner. Det kan man ikke have, for hvordan skal koden så vide, hvilken en der skal bruges?

Det skal vel bare være:

function mouseover(obj1,obj2){
  if(obj1)obj1.style.backgroundPosition="0 29px";
  if(obj2)obj2.style.backgroundPosition="0 29px"
}
function mouseout(obj1,obj2){
  if(obj1)obj1.style.backgroundPosition="0 0";
  if(obj2)obj2.style.backgroundPosition="0 0"
}

<td id="menu01" onmouseover="mouseover(this,document.getElementById('menu02'))" onmouseout="mouseout(this,document.getElementById('menu02'))"></td>
<td id="menu02" onmouseover="mouseover(this)" onmouseout="mouseout(this)"></td>

Kommet videre?

Hov, det er jeg faktisk ikke. Gik lidt i stå, da jeg synes jeg har prøvet virkelig mange ting! I Java kan man godt have to mouseover()-funktioner, sålænge de tager et forskelligt antal parametre, så derfor troede jeg egentlig at det samme galt i Javascript, men det har jeg ingen idé om?

Problemet som status er nu, lyder:

Jeg har en række td's med hver sit id, fra menu01 - menu08. Enkeltvis fungerer de fint med deres mouseover og mouseout, men i et tilfælde skal det fungere lidt anderledes. Ved mouseover på menu03, skal både menu03 og menu04 aktiveres, og ved mouseout skal de deaktiveres - det virker fint. Ved mouseover på menu04 er det kun den, der skal aktiveres, men problemet her er, at den ikke deaktiveres ved mouseout. Den eneste måde at fjerne mouseover-effekten, er ved at køre musen tilbage på menu03, og trække den væk derfra igen.

Sådan her ser mine mouseover og mouseout ud:

onmouseover="mouseover(this,document.getElementById('menu04'));"
onmouseout="mouseout(this,document.getElementById('menu04'));"

Og sådan her ser min Javascript-kode ud:

function mouseover(obj1,obj2){
  obj1.style.backgroundPosition=obj2.style.backgroundPosition='0px 29px'
}

function mouseout(obj1,obj2){
  obj1.style.backgroundPosition=obj2.style.backgroundPosition='0px 0px'
}

Kan jeg se hele koden eller et link?

Hvilket element ligger:
onmouseover="mouseover(this,document.getElementById('menu04'));"
onmouseout="mouseout(this,document.getElementById('menu04'));"
på? Kan jeg evt. se den kodedel, som indeholder disse 2 eventhandlers?

Ok, lidt mere test lader til at afsløre, der intet er i vejen med funktionen. Grunden til at den bliver hængende er at der foldes en dropdown menu ud ved mouseover. Jeg skal på en eller anden vis, have tilknyttet min mouseout til denne dropdown menu. Jeg kan dog ikke helt gennemskue funktionsnavnene, måske du kan?


var disappeardelay=200  //menu disappear speed onMouseout (in miliseconds)
var enableanchorlink=0 //Enable or disable the anchor link when clicked on? (1=e, 0=d)
var hidemenu_onclick=1 //hide menu when user clicks within menu? (1=yes, 0=no)

var ie5=document.all
var ns6=document.getElementById&&!document.all

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function showhide(obj, e, visible, hidden){
if (ie5||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie5 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie5 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie5 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function dropdownmenu(obj, e, dropmenuID){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
if (typeof dropmenuobj!="undefined") //hide previous menu
dropmenuobj.style.visibility="hidden"
clearhidemenu()
if (ie5||ns6){
obj.onmouseout=delayhidemenu
dropmenuobj=document.getElementById(dropmenuID)
if (hidemenu_onclick) dropmenuobj.onclick=function(){dropmenuobj.style.visibility='hidden'}
dropmenuobj.onmouseover=clearhidemenu
dropmenuobj.onmouseout=ie5? function(){ dynamichide(event)} : function(event){ dynamichide(event)}
showhide(dropmenuobj.style, e, "visible", "hidden")
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}
return clickreturnvalue()
}

function clickreturnvalue(){
if ((ie5||ns6) && !enableanchorlink) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie5&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function delayhidemenu(){
delayhide=setTimeout("dropmenuobj.style.visibility='hidden'",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}


Hvor skal den placeres?

Nej, ikke uden at se det i aktion.

Du kan se det her: http://74.53.190.142/

Du kan jo prøve med denne:

var disappeardelay=200;  //menu disappear speed onMouseout (in miliseconds)
var enableanchorlink=0; //Enable or disable the anchor link when clicked on? (1=e, 0=d)
var hidemenu_onclick=1; //hide menu when user clicks within menu? (1=yes, 0=no)

var ie5=document.all;
var ns6=document.getElementById&&!document.all;

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function showhide(obj, e, visible, hidden){
if (ie5||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
obj.visibility=visible;
}
else if (e.type=="click"){
obj.visibility=hidden;
if(oDropdownmenuopener)mouseout(oDropdownmenuopener,oDropdownmenuopener);
}
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie5 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie5 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie5 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

var oDropdownmenuopener=null;
function dropdownmenu(obj, e, dropmenuID){
oDropdownmenuopener=obj;
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
if (typeof dropmenuobj!="undefined") //hide previous menu
dropmenuobj.style.visibility="hidden"
clearhidemenu()
if (ie5||ns6){
obj.onmouseout=delayhidemenu
dropmenuobj=document.getElementById(dropmenuID)
if (hidemenu_onclick) dropmenuobj.onclick=function(){dropmenuobj.style.visibility='hidden'}
dropmenuobj.onmouseover=clearhidemenu
dropmenuobj.onmouseout=ie5? function(){ dynamichide(event)} : function(event){ dynamichide(event)}
showhide(dropmenuobj.style, e, "visible", "hidden")
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}
return clickreturnvalue()
}

function clickreturnvalue(){
if ((ie5||ns6) && !enableanchorlink) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie5&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function delayhidemenu(){
delayhide=setTimeout("dropmenuobj.style.visibility='hidden'",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

Det fungerer ikke. Som jeg ser det bliver oDropdownmenuopener først instantieret længere nede, så den kan slet ikke bruges som reference dér.

Nej, oDropdownmenuopener instantieres jo globalt uden for funktionen og derfor også før, den bliver taget i brug i funktionen showhide, der jo først kaldes ved onmouseout.

Hmm, nej det er rigtigt.

if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
obj.visibility=visible;
}
else if (e.type=="click"){
obj.visibility=hidden;
if(oDropdownmenuopener)mouseout(oDropdownmenuopener,oDropdownmenuopener);
}

Her kaldes mouseout ved klik, men det bør vel være ved en generel mouseout

else if (e.type=="click" || e.type=="mouseover"){ virker dog heller ikke :(

Hov, nej. Det skal være dette:

function delayhidemenu(){
delayhide=setTimeout("dropmenuobj.style.visibility='hidden'",disappeardelay)
}

som skal rettes til:

function delayhidemenu(){
delayhide=setTimeout("dropmenuobj.style.visibility='hidden';if(oDropdownmenuopener)mouseout(oDropdownmenuopener,oDropdownmenuopener);",disappeardelay)
}

Jamen nu ser det jo pludselig rigtig rigtigt ud! Dog er der en enkelt lille hage. Når jeg bevæger mig fra drop down til den menu, som hænger sammen med den, så aktiveres dropdown ikke som mouseover - det skulle den helst gerne.

Dén må jeg lige have en gang til? Er det noget, jeg kan se på linket?

Ja :)

Når du holder musen over "Turneringer", så aktivers både den og pilen ved siden af. Men når du har musen over pilen og går tilbage til "Turneringer" så aktiveres pilen ikke.

Hmm. Det kan jeg ikke umiddelbart forklare.

Eller jo det er selvfølgelig, fordi delayhidemenu køres efter musen holdes over "Turneringer".

I din onmouseover på "Turneringer" og "Klubber" skal du bare sætte oDropdownmenuopener=null;

Faktisk bør du nok på turneringer sætte oDropdownmenuopener=document.getElementById('menu6'); og på klubber sætte oDropdownmenuopener=document.getElementById('menu4');

oDropdownmenuopener=null ser umiddelbart ud til at klare tricket, men når jeg bevæger mig fra pilen ved turneringer til klubber, så hænger pilen fast som mouseover. Dit sidste forslag hjalp ikke.

Hmm. Ja. Det var dét, som mit sidste forslag skulle afhjælpe.

Ret:

var oDropdownmenuopener=null;

til:

var oDropdownmenuopener=oDropdownmenuopener2=null;

og sæt så på turneringer oDropdownmenuopener2=document.getElementById('menu6'); og på klubber oDropdownmenuopener2=document.getElementById('menu4');

Og ret så til sidst:

function delayhidemenu(){
delayhide=setTimeout("dropmenuobj.style.visibility='hidden';if(oDropdownmenuopener)mouseout(oDropdownmenuopener,oDropdownmenuopener);",disappeardelay)
}

til:

function delayhidemenu(){
delayhide=setTimeout("dropmenuobj.style.visibility='hidden';
if(oDropdownmenuopener&&oDropdownmenuopener!=oDropdownmenuopener2)mouseout(oDropdownmenuopener,oDropdownmenuopener);",disappeardelay)
}

Du skal så nok også sætte følgende på dine andre menupunkters onmouseover:
oDropdownmenuopener2=null;

Det er virkelig lækkert. Mange tak for hjælpen! (Og tak for at du lige fik mig mindet om at kigge på det igen :)

;)