onmouseover - Bildnummer anzeigen

[Malte Sli]

Hallo,

ich habe mal eine Frage, weil ich nicht weiß wie und ob sich das umsetzen lässt.

Un zwar habe ich eine einige Bilder nacheinander, z.B: <img><img><img><img><img>. Kann ich es irgendwie machen, dass wenn ich mit dem Mauszeiger über das Bild auf der Website fahren, angezeigt wird, das wie vielte Bild das ist? Die Anzeige sollte vielleicht so aussehen, dass sich dann einfach die entsprechende Nummer über das Bild "legt".

PS: Ich kann den img-Tags keine individuellen IDs oder Klassen und Co geben, weil es mehrere tausend sind und ich die per PHP automatisch mit einer Schleifen erzeuge.

Freue mich über jede hilfreiche Antwort.

Malte Sli

[MudGuard]

Hi,

Un zwar habe ich eine einige Bilder nacheinander, z.B: <img><img><img><img><img>. Kann ich es irgendwie machen, dass wenn ich mit dem Mauszeiger über das Bild auf der Website fahren, angezeigt wird, das wie vielte Bild das ist?

PS: Ich kann den img-Tags keine individuellen IDs oder Klassen und Co geben, weil es mehrere tausend sind und ich die per PHP automatisch mit einer Schleifen erzeuge.

Schreib per PHP die Nummer ins title-attribut des IMG.

cu,
Andreas a/k/a MudGuard

[Sara Sumsemuß]

Un zwar habe ich eine einige Bilder nacheinander, z.B: <img><img><img><img><img>. Kann ich es irgendwie machen, dass wenn ich mit dem Mauszeiger über das Bild auf der Website fahren, angezeigt wird, das wie vielte Bild das ist?

PS: Ich kann den img-Tags keine individuellen IDs oder Klassen und Co geben, weil es mehrere tausend sind und ich die per PHP automatisch mit einer Schleifen erzeuge.

Gerade wenn es sehr viele sind und du die Seite selbst erzeugst, solltest du die Bildnummer besser gleich mit der Schleife in den HTML-Code reinschreiben. Mir ist nicht klar, wo du da das Problem siehst.

Per Javascript die Position der <img>-Elemente bei jedem Seitenaufruf neu herauszusuchen ist die schlechtere Wahl, geschweige denn bei jeder Mausberührung. Es ist schon für sich genommen unnötige, da immer mit dem gleichen Ergebnis wiederholte Arbeit, und bei den Massen, die du im Auge hast, befürchte ich, dass jeder zweite Browser bei der Nummerierung für fünf Minuten ins Koma fällt.

Falls es aber unbedingt sein muss, kannst du nach Laden der Seite mit der Funktion getElementsByTagName() des die Bilder umfassenden Elements alle Bildelemente raussuchen, ihnen in einer Schleife ein Attribut (eventuell auch direkt die ID) mit der Nummer sowie mit addEventListener() eine Funktion zuweisen, die beim Berühren mit der Maus aufgerufen wird (beachte: du benötigst nur eine einzelne Funktion, nicht eine pro Element), das Attribut ausliest und anzeigt. Das sieht dann ungefähr so aus:

(function() {
  document.addEventListener("DOMContentLoaded", function () {
    var nummerngirl = function (e) {
      console.log("Das ist gerade Bild " + e.originalTarget.id + ".");
      // Hier würde die Nummerntafel eingeblendet.
    }
    var putze = function (e) {
      // Hier würde die Nummertafel ausgeblendet.
    }
    var i, img;
    img = document.getElementById("bildercontainer").getElementsByTagName("img");
    for (i = img.length - 1; i >= 0; i--) {
      img[i].id = i + 1; // i zählt ab 0, Nummerung soll aber bei 1 beginnen
      img[i].addEventListener("mouseenter", nummerngirl);
      img[i].addEventListener("mouseout", putze);
    }
  });
}());

Ich benutze hier die zwei Ereignisse mouseenter und -out, weil die Alternative mouseover bei jeder Mausbewegung über dem Bild ausgelöst wird. Wird die Nummer an fester Stelle bei/über dem Bild angezeigt, braucht man nicht jedes Wackeln der Maus beobachten.

[Tabellenkalk]

Hallo,

Un zwar habe ich eine einige Bilder nacheinander, z.B: <img><img><img><img><img>.

Das ist doch dann eine Liste von Bildern. Wenn du sie als ordered list ins HTML baust, nummeriert der Browser die Bilder für dich.

Gruß
Kalk

[TS]

Hallo und guten Morgen,

Das ist doch dann eine Liste von Bildern. Wenn du sie als ordered list ins HTML baust, nummeriert der Browser die Bilder für dich.

Was nützt einem eine solche Nummer eigentlick? Die ist doch bloß Makulatur.

Grüße
TS

[Tabellenkalk]

Hallo,

Was nützt einem eine solche Nummer eigentlick? Die ist doch bloß Makulatur.

Man könnte damit herauskriegen, an wievielter Stelle sich das Bild befindet.

Gruß
Kalk

[TS]

Hallo und guten Morgen,

Was nützt einem eine solche Nummer eigentlick? Die ist doch bloß Makulatur.

Man könnte damit herauskriegen, an wievielter Stelle sich das Bild befindet.

An wievielter Stelle von was?
Was kann ich mit dem Wissen dann anfangen? Das ist nur eine Pseudo-Infomration.
Wenn ich jemand den Link auf die Seite schicke und dazu schreibe, er möge sich Bild Nr. ### ansehen, ist das dann das Bild, das ich mir angesehen habe?

Grüße
TS

[Tabellenkalk]

Hallo,

Wenn ich jemand den Link auf die Seite schicke und dazu schreibe, er möge sich Bild Nr. ### ansehen, ist das dann das Bild, das ich mir angesehen habe?

Nö, das hast du dir ja schon angesehen.

je nachdem, wie die Seite funktioniert, wird der jemand aber ein ziemlich identisches Bild zu gesicht kriegen...

Gruß
Kalk

[Gunnar Bittersmann]

@@Malte Sli

Un zwar habe ich eine einige Bilder nacheinander, z.B: <img><img><img><img><img>. Kann ich es irgendwie machen, dass wenn ich mit dem Mauszeiger über das Bild auf der Website fahren, angezeigt wird, das wie vielte Bild das ist?

Da fiele mir content: counter() ein. Allerdings nicht bei img-Elementen, da diese keinen Inhalt haben dürfen. Mit <span><img/></span><span><img/></span><span><img/></span><span><img/></span> ginge das.

Allerdings kann man dann auch gleich <ol><li><img/></li><li><img/></li><li><img/></li><li><img/></li></ol> verwenden und die dann schon vorhandene Numerierung nutzen.

PS: Ich kann den img-Tags keine individuellen IDs oder Klassen und Co geben, weil es mehrere tausend sind und ich die per PHP automatisch mit einer Schleifen erzeuge.

?? Eine Schleife ist prädestiniert dafür, eine Schleifenvariable hochzählen und ausgeben zu lassen.

Mir ist allerdings das eigentliche Problem nicht klar. Du hast mehrere tausend Bilder auf einer Seite? Und was soll dem Nutzer die Bildnummer bringen?

LLAP 🖖

[var]

@Gunnar

Mir ist allerdings das eigentliche Problem nicht klar. Du hast mehrere tausend Bilder auf einer Seite? Und was soll dem Nutzer die Bildnummer bringen?

Ich würde in Ermangelung weiterer Informationen mal ins Blaue hinein tippen, dass hier der Plan darin besteht, einen Container mit Bildern zu fluten, entfernt vergleichbar der Bildersuche bei Suchmaschinen oder einem Fotoblog, wobei dann beim scrollen immer neue Bilder geladen werden.

Aber egal wie es letztlich en detail ausgestaltet ist, die Bildnummer ist glaube ich völlig nutzlos. Zumindest sofern keine entsprechende Suchfunktion implementiert ist.

Wenn es hier nur darum geht, einzelne Bilder herauszuheben, würde ich eher empfehlen, irgendwo in der Ecke jedes Bildes einen kleinen Button unterzubringen, der das ausgewählte Bild in einem neuen Tab öffnet, damit man die Adresse als Lesezeichen im Browser speichern kann.

Gruß,

var

[Malte Sli]

Schon mal vielen Dank für die zahlreichen Tipps und Lösungen.

Aber um die große Frage mal aus dem Raum zu schaffen:

Es gibt viele "Boxen" auf der Seite und ich habe das so, dass man ein Bild in dieser Box hochladen kann. Damit man sich aber entscheiden kann, in welcher Box man das Bild hoch lädt muss man die Nummer wissen, um sie dann anschließend in ein Formular einzugeben. Die Boxen sind so aufgebaut:
<div class='box'><a class='link'><img></a></div>

PS: Die Boxen sind in einer Tabelle aufgereiht.
PPS: Man kann hinter das Bild auch einen Hyperlink legen deswegen der a-Tag.
PPPS: Ich hoffe das hat jetzt nicht mehr Fragen aufgerufen als vorher.

[TS]

Hallo und guten Morgen,

Es gibt viele "Boxen" auf der Seite und ich habe das so, dass man ein Bild in dieser Box hochladen kann. Damit man sich aber entscheiden kann, in welcher Box man das Bild hoch lädt muss man die Nummer wissen, um sie dann anschließend in ein Formular einzugeben. Die Boxen sind so aufgebaut:
<div class='box'><a class='link'><img></a></div>

Das bedeutet aber, dass die Nummer fest an das Bild oder die Box gebunden sein muss und nicht einfach vom Browser "dazuerfunden" werden darf.

Grüße
TS