nicht angemeldet
Gunnar Bittersmann
Der Martin
Der-Dennis
Der Martin
Felix Riesterer
Der-Dennis
Hallo,
ich habe ein kleines Problem, bei dem ich keine so rechte Idee habe, wie ich das umsetzen sollte.
Auf einer Seite möchte ich einige Bilder anzeigen lassen.
Bewegt der Benutzer jetzt die Maus über und innerhalb eines Bildes, soll sich das Bild ändern aber abhängig von der Position der Maus über dem Bild.
Ich habe zunächst gedacht, dies über eime Image-Map zu realsieren, wobei jedes area shape ein onMouseOver erhält, anstatt einem üblichem onClick, aber das funktioniert leider offenbar nicht ?!
Ein OnMouseOver auf dem Bild funktioniert leider auch nicht, da dieses nur 1 mal aufgerufen wird, wenn die Maus über das Bild bewegt wird, aber nicht mehr innerhalb des Bildes.
Im Moment fällt mir sonst nur ein aufwändiges Mouse-Event ein, dass bei jeder Mausbewegung prüfen muss, ob die Maus zufälligerweise mal ein Bild erwischt hat und dann erst bei welcher Position.
Habt Ihr vielleicht noch andere Ideen?
Klaus
@@Klaus:
nuqneH
Ich habe zunächst gedacht, dies über eime Image-Map zu realsieren, wobei jedes area shape ein onMouseOver erhält, anstatt einem üblichem onClick, aber das funktioniert leider offenbar nicht ?!
Doch, das funktioniert.
Qapla'
Doch, das funktioniert.
Nur bei mir nicht... :-((
Das Bild hat die Abmessung 90x20:
Aber nichtmal das alert wird aufgerufen.
<script>
function img_rating(bild,rating) {
document.images[bild].src = "/images/rating"+rating+".jpg";
alert("test");
}
</script>
<img ID="bild" src="/images/rating0.jpg" onmouseout="bild.src='/images/rating0.jpg'" usemap="#karte" border="0">
<map id="karte" name="karte">
<area shape="1,1,18,20" OnMouseOver="img_rating('bild','1');">
<area shape="19,1,36,20" OnMouseOver="img_rating('bild','2');">
<area shape="37,1,54,20" OnMouseOver="img_rating('bild','3');">
<area shape="55,1,72,20" OnMouseOver="img_rating('bild','4');">
<area shape="75,1,90,20" OnMouseOver="img_rating('bild','5');">
</map>
Klaus
Hallo,
Doch, das funktioniert.
Nur bei mir nicht... :-((
das liegt aber nicht am onmouseover-Event, sondern an deinen ungültigen area-Elementen.
<script>
Hier fehlt das vorgeschriebene type-Attribut.
<map id="karte" name="karte">
Hast du einen besonderen Grund, das map-Element auch mit einer ID auszustatten? Mir fällt gerade nichts ein, wozu das gut sein könnte.
<area shape="1,1,18,20" OnMouseOver="img_rating('bild','1');">
<area shape="19,1,36,20" OnMouseOver="img_rating('bild','2');">
Schau dir die richtige Verwendung von area nochmal an, insbesondere die Attribute shape und coords.
Übrigens ist in HTML konsequente Kleinschreibung üblich. In XHTML ist sie sogar Pflicht.
So long,
Martin
<script>
Hier fehlt das vorgeschriebene type-Attribut.
hatte mir gedacht, dass dies angekreidet wird, ist im Code aber mit type-Attribut angegeben.
<map id="karte" name="karte">
Hast du einen besonderen Grund, das map-Element auch mit einer ID auszustatten? Mir fällt gerade nichts ein, wozu das gut sein könnte.
Mit der ID hatte ich experimentiert auch mit der Groß-Kleinschreibung. Mit der Zeit wird man paranoid, wenn es nicht funktioniert, obwohl es sollte.
<area shape="1,1,18,20" OnMouseOver="img\_rating('bild','1');"> <area shape="19,1,36,20" OnMouseOver="img\_rating('bild','2');">Schau dir die richtige Verwendung von area nochmal an, insbesondere die Attribute shape und coords.
Übrigens ist in HTML konsequente Kleinschreibung üblich. In XHTML ist sie sogar Pflicht.
Laut Anleitung sind die Koordinaten x1,y1, x2,y2, also links oben und rechts unten.
Der erste Shape definiert doch also ein Bereich, der ganz links oben anfängt und 18 pixel breit und 20 pixel hoch ist.
Das zweite fängt bündig wieder oben an, geht 18 pixel weiter nach rechts und wieder 20 nach unten
Oder nicht?
Klaus
Hallo Klaus,
Schau dir die richtige Verwendung von area nochmal an, insbesondere die Attribute shape und coords.
Übrigens ist in HTML konsequente Kleinschreibung üblich. In XHTML ist sie sogar Pflicht.Laut Anleitung sind die Koordinaten x1,y1, x2,y2, also links oben und rechts unten.
alles gut und schön, aber schau Dir nochmal an, was der Martin Dir geschrieben hat: "insbesondere die Attribute shape und coords".
Hier ein Beispiel aus der verlinkten Seite:
<area shape="rect" coords="11,10,59,29"
href="http://www.koblenz.de/" alt="Koblenz" title="Koblenz">
Vergleiche das bezüglich Martins oben genanntem Zitat mit
<area shape="1,1,18,20" OnMouseOver="img_rating('bild','1');">
Gruß, Dennis
Hier ein Beispiel aus der verlinkten Seite:
<area shape="rect" coords="11,10,59,29"
href="http://www.koblenz.de/" alt="Koblenz" title="Koblenz">Vergleiche das bezüglich Martins oben genanntem Zitat mit
<area shape="1,1,18,20" OnMouseOver="img_rating('bild','1');">
Ich bin aber auch sooo blind gewesen. Ich hab selbst mit Deinem Beispiel noch eine gefühlte Ewigkeit gebraucht, um den Unterschied zu sehen. Meine Güte *schäm*
Und schon funktioniert es auch....
Vielen Dank für Eure Geduld und Hilfe.
Klaus
Hi,
<script>
Hier fehlt das vorgeschriebene type-Attribut.
hatte mir gedacht, dass dies angekreidet wird, ist im Code aber mit type-Attribut angegeben.<map id="karte" name="karte">
Hast du einen besonderen Grund, das map-Element auch mit einer ID auszustatten? Mir fällt gerade nichts ein, wozu das gut sein könnte.
Mit der ID hatte ich experimentiert auch mit der Groß-Kleinschreibung. Mit der Zeit wird man paranoid, wenn es nicht funktioniert, obwohl es sollte.
ja, das kommt in den besten Familien vor. ;-)
Das sind aber beides nur formale Kleinigkeiten, die mir beim Drüberlesen aufgefallen sind. Mit der eigentlichen Fragestellung haben sie meines Ermessens nichts zu tun.
<area shape="19,1,36,20" OnMouseOver="img\_rating('bild','2');">Schau dir die richtige Verwendung von area nochmal an, insbesondere die Attribute shape und coords.
Übrigens ist in HTML konsequente Kleinschreibung üblich. In XHTML ist sie sogar Pflicht.
Laut Anleitung sind die Koordinaten x1,y1, x2,y2, also links oben und rechts unten.
Der erste Shape definiert doch also ein Bereich, der ganz links oben anfängt und 18 pixel breit und 20 pixel hoch ist.
Das zweite fängt bündig wieder oben an, geht 18 pixel weiter nach rechts und wieder 20 nach unten
Oder nicht?
Die Koordinaten mögen richtig sein - aber sie sind bei dir in dem Attribut angegeben, das eigentlich die grundsätzliche *Form* (shape) festlegen soll. Das Attribut, das die Koordinaten angeben sollte, fehlt bei dir völlig.
Ich weiß, über selbst geschriebene Fehler kann man etliche Male hinweglesen, ohne sie zu bemerken ...
So long,
Martin
Ich habe zunächst gedacht, dies über eime Image-Map zu realsieren, wobei jedes area shape ein onMouseOver erhält, anstatt einem üblichem onClick, aber das funktioniert leider offenbar nicht ?!
Doch, das funktioniert.
Eine Frage eines js-Verweigherers.:
Wo genau fängt js eigentlich an?
Ich habe auch mal sowas umgesetzt aber ohne <script>...</script>.
Nur:~~~html
<img ... src="" ... usemap="#">
<map name="">
<area shape="poly" coords="" href="" ...
onmouseover=".src='';"
onmouseout=".src='***';">
</map>
Noch eine Frage. Ich kann nicht mehr nachvollziehen wofür der Teil/Bezeichner direkt vor ".src" im onmouseover steht. In meinem Fall sind das drei Buchstaben, kein "this". Wofür steht der?
@@Texter mit x:
nuqneH
Wo genau fängt js eigentlich an?
In den Werten der Eventhandler-Attribute (@onmouseover etc.).
Noch eine Frage. Ich kann nicht mehr nachvollziehen wofür der Teil/Bezeichner direkt vor ".src" im onmouseover steht. In meinem Fall sind das drei Buchstaben, kein "this". Wofür steht der?
Für die Referenz auf das Bildobjekt.
Qapla'
Wo genau fängt js eigentlich an?
In den Werten der Eventhandler-Attribute (@onmouseover etc.).
Still und heimlich wenn man es nicht weiß. Lauern dort schon js-spezifische Gefahren (von Gefahren für Layout, Benutzbarkeit u.s.w. abgesehen), sprich potentielle js-spezifische Sicherheitslücken?
Die zweite Frage hat sich erledigt, das ist der Bezeichner für ein anderes Bild als das zu dem die map gehört.
Lieber Klaus,
Ich habe zunächst gedacht, dies über eime Image-Map zu realsieren, wobei jedes area shape ein onMouseOver erhält, anstatt einem üblichem onClick, aber das funktioniert leider offenbar nicht ?!
auf Deine syntaktischen Fehler hat man Dich ja schon hingewiesen. Hier noch ein Ansatz, den ich mit einem Schüler zusammen für einen interaktiven Rundgang auf unserer Schulwebsite erstellt habe: Rundgang
Liebe Grüße,
Felix Riesterer.
Hey Felix Riesterer,
zur Info: Auf der verlinkten Seite funktioniert nur ein einziger Link und zwar der "nach links". Alle anderen enden in einem 404.
Gruß, Dennis
Lieber Dennis,
zur Info: Auf der verlinkten Seite funktioniert nur ein einziger Link und zwar der "nach links". Alle anderen enden in einem 404.
das ist mir bekannt. Der Rundgang ist noch "work in progress" und ist über die Navi der Website noch nicht erreichbar. Wenn das Teil wesentlich gediehen ist, dann kann man den Rundgang "freischalten", natürlich auch mit dem Hinweis, dass noch nicht alles virtuell erreichbar ist.
Liebe Grüße,
Felix Riesterer.
auf Deine syntaktischen Fehler hat man Dich ja schon hingewiesen. Hier noch ein Ansatz, den ich mit einem Schüler zusammen für einen interaktiven Rundgang auf unserer Schulwebsite erstellt habe: Rundgang
Vielen Dank für den Link.
Ich war schon dabei mir die mögliche Alternative mittels CSS Image Maps anzuschauen, die auch sehr interessant ist, wenn sie auch nicht mit Poly-Coords funktioniert.
Klaus