✔ 2 in 1 button

S

Samy-Deluxe

Erfahrenes Mitglied
Guten Tag/Abend/Nacht

Ich bräuchte mal Hilfe.
Benötige aus sicherheits Gründen, einen Button in dem 2 Buttons Grafisch dargestellt sind und die durch Position der Maus Feststellen liese, ob es der Linke oder Rechte Button sei.
Mit <img usemap="#map" src="button.gif"> <map>...
sieht man ja trotz allen die Links und deswegen nicht zu gebrauchen.

Hat einer eine Idee, mit Javascript oder so?
 
Keine Ahnung, ob ich dich recht verstanden habe, aber es sollte per <input type="image"> gehen, wenn ich es recht verstanden habe.
Beim Klicken auf Selbigen werden die Klickkordinaten an das Formularziel, in welchem sich der Button befindet, gesendet...du könntest dort also anhand dieser Koordinaten ermitteln, auf welchen der Buttons geklickt wurde.
 
Ja, damit hatte ich es auch gedacht <input type="image">

Ich kenne nur die Position von der ganzen Seite. Wenn jemand doch eine andere Auflösung hat oder das Fenster(POPUP) verschiebt, ist das von wichtigkeit?
Oder kann ich die werte benutzen?

Der Button ist aber Centriert.

Gibt es eine Ausgabe nur der Position vom button?

*EDIT
Ich habe was im SelfHtml gefunden
Code: 
<html><head><title>Test</title>
<style type="text/css">
#vote { position:relative; }
</style>
<script type="text/javascript" language="javascript">
<!--
function bildklick (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  alert("x-Wert: " + Ereignis.layerX + " / y-Wert: " + Ereignis.layerY);
}
function starte_ueberwachung () {
  document.images["vote"].onclick = bildklick;
}
window.onload = starte_ueberwachung;
//-->
</script>
</head><body>

<p align="center"><img src="img/klick.gif" width="468" height="35"
        alt="Vote Button" name="vote" id="vote"></p>

</body></html>
Die letzte frage ist, wie bekomme ich die Ereignis.layerX und Y werte übergeben
 
Zuletzt bearbeitet:
Wofür brauchst du denn nun primär die Klick-Position...sprich:was willst du machen, wenn du ermittelt hast, welcher Button geklickt wurde?
 
nun es soll daraufhin ein PHP Code gestartet werden, womit auf die Datenbank ein Rating erhöht wird.

Ich habe den code verändert so das es ein INPUT ist

HTML: 
<html><head><title>Test</title>
<style type="text/css">
#vote { position:relative; }
</style>
<script type="text/javascript" language="javascript">
<!--
function bildklick (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  alert("x-Wert: " + Ereignis.layerX + " / y-Wert: " + Ereignis.layerY);
}
function starte_ueberwachung () {
  document.getElementById('vote').onclick = bildklick;
}
window.onload = starte_ueberwachung;
//-->
</script>
</head><body>

<p align="center"><input type="image" src="img/klick.gif" width="468" height="35"
       name="vote" id="vote"></p>

</body></html>
 
Dann brauchst du das JS-Zeugs wie bereits erwähnt nicht.
Code: 
<form action="deinphpskript.php"><input type="image" src="img/klick.gif" name="vote" ></form>

In deinem PHP-Skript kannst du dann über $_GET['vote_x'] und $_GET['vote_y'] die Klickkordinaten ermitteln und jenachdem weiterverfahren.
Die Klickkoordinaten beziehen sich dabei auf die Position im Button.
 
Mir ist grade aufgefallen das die layerX und layerY function im Internet Explorer nicht Vorhanden ist.

Also muss eine andere lösung her


*EDIT 1*
Ich habe mich nochmal im Selfhtml schlau gemacht.
Wenn ich LayerX und Y benutze, Funktioniert es im Firefox(Netscape)
Wenn ich OffsetX und Y benutze, Funktioniert es im Internet Explorer.

*EDIT 2*
Danke für deine Antwort!
Es klapt fast alles Prima mit PHP

Nur das im Firefox, die Werte von der ganzen Seite genommen werden und beim Internet Explorer die Werte nur vom Button

nicht gut

*EDIT 3*
Hat sich erledigt, der Button war vom CSS auf Position Relativ geschaltet und deswegen hat es so ein Wert erhalten
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück