Just nu i M3-nätverket
Gå till innehåll
Eforum är stängt för nya inlägg och svar sedan 20 juni 2022. Klicka för att läsa vad som hände och om alternativ.

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

mac3

Startad av mac3,
i Webbutveckling

Rekommendera Poster

mac3

mac3

Postad
Postad

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>

Länk till kommentar
Dela på andra webbplatser
EkaErik

EkaErik

Postad
Postad

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>

Länk till kommentar
Dela på andra webbplatser
mac3

mac3

Postad
  • Trådskapare
Postad

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

Länk till kommentar
Dela på andra webbplatser
EkaErik

EkaErik

Postad
Postad

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 :-)

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

Gå till ämneslista


×
×
  • Skapa nytt...