Frank: Bildkoordinaten eines Button

SELF-Forum

Bildkoordinaten eines Button

Frank
– Informationen zu den Bewertungsregeln

Hallo zusammen!

Ich möchte durch den Klick auf ein Bild (<img>) die Koordinaten des Mausklicks bzgl. der linken oberern Ecke des Bildes herausfinden.

Bei IE funktioniert das einfach mit xoffset siehe funktion Koord_IEX() *1.

Das gleiche möchte ich auch mit NS erreichen.:
Ich habe das Mausereignis Mousedown überwacht *2 und und kann auch die Koordinaten der  *3 HTML Seite Ermitteln.

Jetzt muß ich noch wissen wie ich die  *4 Eckkoordinaten des Breiches <div> mit Name Bild1 ermitteln kann.
Weiss jemand wie das geht.

chau
und Grüsse
Frank

<html><head><title>Test</title>

<script language="JavaScript">
//Koordinaten des Bildes
var coord_x;
var coord_y;
//Koordinaten der Html Setie
var page_x;
var page_y;
//Oberer Ecke des LAyers
var lay_edge_x;
var lay_edge_y;

function LayerPos(Ereignis)
{
if (document.layers)
{
*2      page_x = Ereignis.pageX;
page_y = Ereignis.pageY;

*4       //funktioniert nicht
lay_edge_x = document.layers['blid1'].left
lay_edge_y = document.layers['bild1'].top
alert('Ecke des ALyers' + lay_edge_x);

coord\_x = page\_x - lay\_edge\_x  
coord\_y = page\_y - lay\_edge\_y  
}

}

function init()
{
* 2  if (document.layers)
{
  document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown = LayerPos;
}

*1 function Koord_IEX()
{
var clickx;
var clicy;

clickx =window.event.offsetX;   
clicky =window.event.offsetY;

alert ('Mausclick im Button' + clickx);
alert ('Mausclick im Button' + clicky);
}

</script>

</head><body onload="init()">
<table border="3">
<tr>
<td> Text Text Text Text</td>
<td> Text Text Text Text</td>
</tr>
<tr>
<td> Text Text Text Text</td>
<td><div id="bild1"><img src="Geomark02.gif" width="126" height="25" alt="" border="0" onClick="Koord_IEX()"></div></td>
</tr>
</table>

P.S  noch eine Sache von minderer Wichtigkeit: Falls jemand gerade zufällig weiss wo ich den Sourccode für ein Pull Down Menü finde wäre ich dankbar, dann muss ich das schon nciht selber machen

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Bildkoordinaten eines Button

    simon carst
    – Informationen zu den Bewertungsregeln

    P.S  noch eine Sache von minderer Wichtigkeit: Falls jemand gerade zufällig weiss wo ich den Sourccode für ein Pull Down Menü finde wäre ich dankbar, dann muss ich das schon nciht selber machen

    tach,

    leider habe ich nur hierfür eine antwort....

    http://www.editeurjavascript.com/scripts/scripts_nav_12.php

    viel spass

    sim

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Bildkoordinaten eines Button

    Tausch
    – Informationen zu den Bewertungsregeln

    Bei IE funktioniert das einfach mit xoffset siehe funktion Koord_IEX() *1.

    Das gleiche möchte ich auch mit NS erreichen.:

    Hallo,

    genau vor dem selben Problem stand ich auch schon einmal, aber bin dann zu dem Ergebniss gekommen, dass es mit Netscape einfach nicht geht, weil xoffset nicht interpretiert wird.
    Die einzige Möglichkeit dürfte wahrscheinlich sein, die Graphik in ein eigenes Frame zu sperren, das genau die Größe der Graphik entspricht oder alternativ die Graphik per CSS absolut positionieren und danach die Bildkoordinaten mit PageX/PageY abfangen.
    Ich habe es selbst noch nicht versucht, aber ich werde es bei Gelegenheit einmal ausprobieren.

    Ich weiß, die Lösung ist nicht sehr elegant, aber für Netscape gibt es IMHO eben keine andere Möglichkeit.
    Ich hoffe, ich habe dir trotzdem etwas helfen können.

    Tausch.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Bildkoordinaten eines Button

    holger kuehne
    – Informationen zu den Bewertungsregeln

    Hi
    Wenn du die Position von 'bild1' brauchst, dann darfst du nicht nach der Position von 'blid1' fragen ;-))
    Also

    function LayerPos(Ereignis)
    {

    »»  if (document.layers)
    »»  {

    *2      page_x = Ereignis.pageX;

    »»  page_y = Ereignis.pageY;
    »»

    *4       //funktioniert nicht

    »»  lay_edge_x = document.layers['bild1'].left *hier war der Fehler*
    »»  lay_edge_y = document.layers['bild1'].top
    »»  alert('Ecke des Layers' + lay_edge_x);
    »»  
    »»  coord_x = page_x - lay_edge_x
    »»  coord_y = page_y - lay_edge_y

    Tschau Holger

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  4. Bildkoordinaten eines Button

    Günter Laudenklos
    – Informationen zu den Bewertungsregeln

    Hallo Frank,

    folgende Lösung habe ich mal kurz getestet
    <kleine Randbemerkung>
    left und top entsprechen beim Netscape x und y
    und ein <DIV> ohne jegliches Style-Attribut ist für Netscape kein Layer
    </kleine Randbemerkungr>

    ... snip ...

    <html><head><title>Test</title>

    <script language="JavaScript">
    //Koordinaten des Bildes
    var coord_x;
    var coord_y;
    //Koordinaten der Html Setie
    var page_x;
    var page_y;
    //Oberer Ecke des LAyers
    var lay_edge_x;
    var lay_edge_y;

    function LayerPos(Ereignis)
    {
    if (document.layers)
    {
    page_x = Ereignis.pageX;
    page_y = Ereignis.pageY;

    lay_edge_x = document.layers['bild1'].document.images[0].x
    lay_edge_y = document.layers['bild1'].document.images[0].y

    coord_x = page_x - lay_edge_x
    coord_y = page_y - lay_edge_y
    alert ('Mausclick im Button X=' + coord_x + ' Y='  + coord_y);
    }
        
    }

    function init()
    {
    if (document.layers)
    {
      document.captureEvents(Event.MOUSEDOWN);
    }
    document.onmousedown = LayerPos;
    }

    function Koord_IEX()
    {
    var clickx;
    var clicy;

    clickx =window.event.offsetX;
    clicky =window.event.offsetY;
      
    alert ('Mausclick im Button' + clickx);
    alert ('Mausclick im Button' + clicky);
    }

    </script>

    </head><body onload="init()">
    <table border="3">
    <tr>
    <td> Text Text Text Text</td>
    <td> Text Text Text Text</td>
    </tr>
    <tr>
    <td> Text Text Text Text</td>
    <td><div id="bild1" style="position:relative;"><img src="Geomark02.gif" width="126" height="25" alt="" border="0" onClick="Koord_IEX()"></div></td>
    </tr>
    </table>

    ... snap ...

    Viele Grüße Günter

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Bildkoordinaten eines Button

      Frank
      – Informationen zu den Bewertungsregeln

      Danke Günter hat funktionier

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln