Just nu i M3-nätverket
Jump to content

jag behöver hjälp med upprepa en if sats


mac3

Recommended Posts

Hej alla

 

jag har fixas ett script som jag vill att den skall göra.

 

scriptet gör att den kopierar elementets Y och X position samt Mått

och jämför muspekares koordinater med elementets mått om muspekaren går över en elementet då körs en funktion i här fallet byter elementet färg.

 

jag vet att det finns onmouseover och onmouseout men den här scriptet gör att ett element kan ha flera element i sig.

 

 

jag behöver hjälp med upprepa en if sats bara som finns i funktionen getMouseXY(e)

då kan jag använda min Array bättre.

 

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>virtualbox</title>
</head>

<script type="text/javascript">


/* 
hämtar elementets Y position
*/

function getY( oElement )
{
var iReturnValue = 0;
elementid=document.getElementById(oElement)
while( elementid != null ){
iReturnValue += elementid.offsetTop;
elementid = elementid.offsetParent;
}

return iReturnValue;
}

/* 
hämtar elementets X position
*/

function getX( oElement )
{
var iReturnValue = 0;
elementid=document.getElementById(oElement)
while( elementid != null ){
iReturnValue += elementid.offsetLeft;
elementid = elementid.offsetParent;
}
return iReturnValue;
}


function red() 
{
document.getElementById('inner').style.backgroundColor="red";
}

function blue() 
{
document.getElementById('inner').style.backgroundColor="blue";
}


/* 
Kolla om är Internet Explorer eller Mozilla Firefox
om det är Mozilla Firefox då körs .captureEvents(Event.MOUSEMOVE)
*/


 var IE = document.all?true:false;
 if (!IE) document.captureEvents(Event.MOUSEMOVE)

 	/* 
 	funktionen getMouseXY körs 
 	  */
   document.onmousemove = getMouseXY;

   	/* 
variablerna för muspekares koordinater 
*/

 var tempX = 0;
 var tempY = 0;



   function getMouseXY(e) {


   /* om  är Internet Explorer då körs första if satsen annars om är Mozilla Firefox då körs andra if satsen
   och sätter värdena för variablerna.

   */

   if (IE) { 
     tempX = event.clientX + document.body.scrollLeft;
     tempY = event.clientY + document.body.scrollTop;
   }
   else {  
     tempX = e.pageX;
     tempY = e.pageY;
   }  

   if (tempX < 0){tempX = 0;}
   if (tempY < 0){tempY = 0;}  


 /* en array med  elementets mått */  

   element = new Array();

   element[0]= new Array('1','ui', getX('ui'),getY('ui'),document.getElementById('ui').offsetHeight,document.getElementById('ui').offsetWidth,red);
   element[1]= new Array('1','top', getX('top'),getY('top'),document.getElementById('top').offsetHeight,document.getElementById('top').offsetWidth,blue);




  /* skriver ut muspekares koordinater */ 
   document.getElementById("divCoord").innerHTML = "Musen: X="+tempX+",Y="+tempY ;




   /* kollar om  muspekares koordinater är lika med elementets mått*/ 
// loop
if (tempX  > (element[1][2]+element[1][5]) || tempX  < element[1][2]  || tempY  > (element[1][3]+element[1][4]) || tempY  < element[1][3]) 
   {


    if (tempX  > (element[0][2]+element[0][5]) || tempX  < element[0][2]  || tempY  > (element[0][3]+element[0][4]) || tempY  < element[0][3]) 
   { 

          // loop end


     // loop


   document.getElementById('inner').style.backgroundColor="green";

    // loop ned
   }

    // loop
   else
   {
     element[0][6]();

   }


 }

   else
   {
     element[1][6]();

   }







 }




</script>

<body>



<div id="top">topp</div>
<div id="divCoord"></div>
<div style="width: 500px; background-color: #7fffd4;" id="ui"><div style="background-color: #9acd32; height: 144px; width: auto;" id="inner"><div style="background-color: #bc8f8f;">inner div</div>ytter div </div></div>

</body>
</html>

Link to comment
Share on other sites

Anropa funktionen getMouseXY(e) igen? If-satsen innehåller massa variabler och att plocka ut dem till argument för en ny funktion är också en lösning.

 

Sen vill jag bolla en fråga tillbaka (och vidare), kan du inte lägga in element inne i elementet för att få ut samma sak? T ex:

 


/* JavaScript kod jag inte kan för att ändra färg på element */

<div id="blue" onMouseOver="changeColor(blue);">Ett element
<div id="red" onMouseOver="changeColor(red);">Ett sub-element
</div>
</div>

Link to comment
Share on other sites

Anropa funktionen getMouseXY(e) igen? If-satsen innehåller massa variabler och att plocka ut dem till argument för en ny funktion är också en lösning.

 

Sen vill jag bolla en fråga tillbaka (och vidare), kan du inte lägga in element inne i elementet för att få ut samma sak? T ex:

 


/* JavaScript kod jag inte kan för att ändra färg på element */

<div id="blue" onMouseOver="changeColor(blue);">Ett element
<div id="red" onMouseOver="changeColor(red);">Ett sub-element
</div>
</div>

 

hejsan och tack

 

den här körs getMouseXY(e) när musen rör på sig

allså när användare rör på musen då körs funktionen getMouseXY(e)

den gör att den ta arrays innehåll och arrays innehåller mått på två element.

och sen jämför den med de två elementets ( Y och X position och höjd samt bredd) med muspekares koordinater. om muspekares koordinater == ( Y och X position och höjd samt bredd) då körs en funktion som red() eller blue() då.

 

mitt målet

var att när användare rör på musen tills användare kommer till område då kommer meny fram.

kolla på länken

då kan ni se bättre hur jag tänker.

 

http://www.mac3.se/admin/visning/

obs det är png filer det gör att Internet Explorer blir långsam med js och bakgrundsfärgen på meny blir svart

men inte på Mozilla Firefox

meny kommer fram när man rör på mus längst ner på bild i fönster.

 

 

 

mvh

mac3

Link to comment
Share on other sites

http://www.w3schools.com/TAGS/tag_map.asp

 

The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas.The name attribute is required in the map element. This attribute is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.

 

The map element contains a number of area elements, that defines the clickable areas in the image map.

 

 

Kanske kan vara en smidigare lösning?

 

Går säkert att fixa någon AJAX/JS modifikation för att få mappen att uppdateras och därmed få en ny mapp för varje bild du visar.

 

Bara en fundering :-)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...