Seite springt bei klick auf Verlinkung an den Seitenanfang von Gunnar Bittersmann, 31.12.2017 13:52

Seite springt bei klick auf Verlinkung an den Seitenanfang

Thirteen37 31.12.2017 07:36

html

Hallo zusammen,

ich habe kaum Erfahrung in Sachen HTML und möchte auch nur ein kleines Projekt realisieren.

Ich benutze eine Automatisierungssoftware (EventGhost) die einen Webserver bietet, der auf entsprechende Events reagiert. Ein solches Event wird so ausgelöst: http://[IP]:[Port]/?[Eventname] also z.b. http://127.0.0.1:1000/?Playbutton Rufe ich diesen Link auf, wird ein Event erzeugt mit dem Namen 'Playbutton'.

Die Seite an der ich bastle soll eine Fernbedienung werden und habe dafür z.B. ein Bild mit einem Play Symbol mit 'http://127.0.0.1:1000/?Playbutton' verlinkt. So weit, so gut - das Ganze funktioniert auch, EventGhost erhält das Event, doch wenn ich auf das verlinkte Bild klicke, springt die Seite automatisch an den Seitenanfang.

Meine Frage ist: Wie verhindere ich das?

Vielen Dank für eure Hilfe!

Hier ist der genaue Quelltext (erzeugt von Microsoft Expression Web 4). Der Einfachheit halber für ein Beispiel habe ich oben einen anderen Titel für das Event genannt.

<!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">

<head>
<meta content="de" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>DVB Viewer Steuerung</title>
<style type="text/css">
.auto-style1 {
	text-align: center;
}

</style>
</head>

<body style="background-color: #808080">

<table align="center" style="width: 100%">
	<tr>
		<td class="auto-style1"><a href="?DVBMenu">
		<img height="" src="menu.png" width="100%" class="auto-style2" /></a></td>
		<td class="auto-style1"><a href="?DVBGuide">
		<img height="" src="Guide.png" width="100%" class="auto-style2" /></a></td>
		<td class="auto-style1"><a href="?DVBMediaCenter">
		<img height="" src="media-center-film-strip-photograms.png" width="100%" class="auto-style2" /></a></td>
		<td class="auto-style1"><a href="?DVBExit">
		<img height="" src="exit.png" width="100%" class="auto-style2" /></a></td>
	</tr>
	<tr>
		<td class="auto-style1"><a href="?DVBRed">
		<img height="" src="red-square-rounded-512.png" width="100%" class="auto-style2" /></a></td>
		<td class="auto-style1"><a href="?DVBGreen">
		<img height="" src="green-square-rounded-512.png" width="100%" class="auto-style2" /></a></td>
		<td class="auto-style1"><a href="?DVBYellow">
		<img height="" src="yellow-square-rounded-512.png" width="100%" class="auto-style2" /></a></td>
		<td class="auto-style1"><a href="?DVBBlue">
		<img height="" src="blue-square-rounded-512.png" width="100%" class="auto-style2" /></a></td>
	</tr>
</table>


<table align="center" style="width: 100%">
	<tr>
		<td></td>
		<td><a href="?DVBUp"><img height="" src="up.png" width="100%" class="auto-style2" /></a></td>
		<td></td>
	</tr>
	<tr>
		<td><a href="?DVBLeft"><img height="" src="left.png" width="100%" class="auto-style2" /></a></td>
		<td><a href="?DVBOK"><img height="" src="keyboard-key-enter.png" width="100%" class="auto-style2" /></a></td>
		<td><a href="?DVBRight"><img height="" src="right.png" width="100%" class="auto-style2" /></a></td>
	</tr>
	<tr>
		<td></td>
		<td><a href="?DVBDown"><img height="" src="down.png" width="100%" class="auto-style2" /></a></td>
		<td></td>
	</tr>
</table>


</body>

</html>

Beitrag melden

– Informationen zu den Bewertungsregeln

Seite springt bei klick auf Verlinkung an den Seitenanfang
Felix Riesterer Homepage des Autors 31.12.2017 10:06

css

html
+1 Informationen zu den Bewertungsregeln
Liebe(r) Thirteen37,

wenn ich auf das verlinkte Bild klicke, springt die Seite automatisch an den Seitenanfang.

Meine Frage ist: Wie verhindere ich das?

meine Antwort: Überhaupt nicht.

Wenn Du einen Link betätigst, dann lädt der Browser die verlinkte Resource. Das ist ein Wechsel von einer Seite zur nächsten. In Deinem Fall scheint man auf der immer gleichen Seite zu bleiben, aber für den Browser ist nun einmal http://example.org/?a etwas anderes als http://example.org/?b.

Du schreibst, dass Du eine Art Fernbedienung bauen willst. Dazu finde ich Deinen HTML-Code extrem ungünstig. Alles steckt in Tabellenzellen. Das ist unflexibel. Warum nicht so?
```
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Meine Fernbedienung</title>
    <style>
      ul {
        list-style: none;
      }
      li {
        display: inline-block;
      }
      li > a {
        background-position: center center;
        background-repeat: no-repeat;
        display: block;
        /* 10px Abstand nach rechts und unten */
        margin: 0 10px 10px 0;
        /* abhängig von den Maßen der Button-Bilder */
        height: 20px;
        width: 30px;
      }
      /* Button-Bilder */
      a[href="?a"] {
        background-image: url(a.png);
      }
      a[href="?b"] {
        background-image: url(b.png);
      }
      a[href="?c"] {
        background-image: url(c.png);
      }
      a[href="?d"] {
        background-image: url(d.png);
      }
    </style>
  </head>
  <body>
    <h1>Meine Fernbedienung</h1>
    <ul>
      <li><a href="?a">a</a></li>
      <li><a href="?b">b</a></li>
      <li><a href="?c">c</a></li>
      <li><a href="?d">d</a></li>
    </ul>
  </body>
</html>
```
Ich habe eine Liste für die Buttons verwendet. Mit den Layout-Angaben im style-Element habe ich dafür gesorgt, dass die Listenelemente nebeneinander wie Fließtext angeordnet werden und 30x20 Pixel groß sind. Willst Du "eine neue Zeile", erstellst Du einfach eine weitere Liste.

Für weitere Hinweise, wie Du das Layout verfeinern kannst, hier wesentliche Links zu Inhalten unseres SELFHTML-Wikis:
- Eigenschaften, die man mit CSS visuell gestalten kann
- Listen in HTML
Liebe Grüße,

Felix Riesterer.
Beitrag melden

+1
Informationen zu den Bewertungsregeln
1. Seite springt bei klick auf Verlinkung an den Seitenanfang
  
  Gunnar Bittersmann Homepage des Autors 31.12.2017 12:16 (Versionen)
  
  css
  
  html
  +1 Informationen zu den Bewertungsregeln
  @@Felix Riesterer
  
  Wenn Du einen Link betätigst, dann lädt der Browser die verlinkte Resource. Das ist ein Wechsel von einer Seite zur nächsten. In Deinem Fall scheint man auf der immer gleichen Seite zu bleiben
  
  Und deshalb scheint mir a hier unangebracht. Es ist keine Navigation; es sind Aktionen. Das sollten also button-Elemente sein:
```
<form>
	<button name="a">a</button>
	<button name="b">b</button>
</form>
```
  oder mit Listen-Markup:
```
<form>
	<ul>
		<li><button name="a">a</button></li>
		<li><button name="b">b</button></li>
	</ul>
</form>
```
  Wenn da mal das = am Ende (die URIs wären https://example.net?a= usw.) nicht stört.
  
  Ansonsten müsste man die Aktion wohl mit JavaScript auslösen. Das Funktionieren des Dingens ohne JavaScript will man sicher nicht unbedingt aufgeben. Was man tun könnte, ist die Links erst mit JavaScript in Buttons umzuwandeln.
  
  Die Menü-Liste bekommt eine ID verpasst: <ul id="menu"> (und form muss nicht außenrum).
  
  Das Script erzeugt die Buttons und packt das jeweilige a-Element hinein. Dazu muss dessen href-Attribut entfernt werden, denn interaktive Elemente sind innerhalb eines Buttons nicht erlaubt.
```
const menuItemElements = document.querySelectorAll('#menu > li');

menuItemElements.forEach(menuItemElement => {
	let aElement = menuItemElement.firstChild;
	let location = aElement.href;
	aElement.removeAttribute('href');
	
	let buttonElement = document.createElement('button');				
	buttonElement.addEventListener('click', event => {
		window.location = location;
	});
	buttonElement.appendChild(aElement);
	
	menuItemElement.appendChild(buttonElement);
});
```
  /* Button-Bilder */ a[href="?a"] { background-image: url(a.png); } a[href="?b"] { background-image: url(b.png); }
  Das ist ein sicheres Indiz, dass die Icons in Markup gehören. Sie sind keine Verzierung, sondern Inhalt.
  
  Also <a href="?a"><img src="a.png" alt="a"></a>
  bzw. <button name="a"><img src="a.png" alt="a"></button>.
  
  LLAP 🖖
  
  --
  “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  Beitrag melden
  
  +1
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
Seite springt bei klick auf Verlinkung an den Seitenanfang
Gunnar Bittersmann Homepage des Autors 31.12.2017 13:52

html
– Informationen zu den Bewertungsregeln
@@Thirteen37
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```
Verwende stattdessen <!DOCTYPE html>.

(Du darfst das HTML weiterhin in XHTML-Syntax schreiben.)
```
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="de" http-equiv="Content-Language" />
```
Die Angabe der Sprache muss so erfolgen: <html lang="de">. Die meta-Angabe kann weg.
```
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
```
Das kannst du einfacher haben: <meta charset="utf-8"/>
```
<body style="background-color: #808080">

<table align="center" style="width: 100%">
```
Sämtliche Darstellungsangaben sollten im Stylesheet stehen, nicht inline im HTML in style-Attributen oder missbilligten darstellungsbezogenen Attributen.
```
		<img height="" src="menu.png" width="100%" class="auto-style2" />
```
Sämtliche Bilder brauchen ein alt-Attribut fü den Alternativtext.

(Und nein, die Ausrede, dass die Anwendung nur für dich ist, zieht nicht. Du willst die Fernbedienung auch noch verwenden, wenn ein Bild Ladehemmungen hat‽ Du willst die Fernbedienung auch noch verwenden, wenn deine Sehkraft nachlässt‽)

LLAP 🖖

--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Thirteen37: Seite springt bei klick auf Verlinkung an den Seitenanfang