Bilder in Bilder mit mouseover ?
Hallo zusammen,
nach langer Abstinenz bin ich auch mal wieder hier, weil ich einfach nicht mehr weiter weis
Ich habe zur Zeit folgendes Problem.
Ein Kunde von uns möchte seine Homepage überarbeitet haben.
Die Seite ist Hauptsächlich im HTML-Format geschrieben.
Auf einer der Seiten gibt es drei verschiedene Bilder in denen jeweils mehrere Domino-Steine zu sehen sind.
Nun hätte der Kunde gerne, dass wenn ich auf einen Dominostein gehe, genau dieser Dominostein sich verändert.
Geht er auf einen anderen Dominostein ( im selben Bild) so soll auch nur dieser sich wieder verändern.
Ich hätte ja kein Problem, wenn das ganze Bild sich verändern soll... aber so bin ich gerade etwas aufgeschmissen.
Hier mal eins der Bilder wo sich jeder Dominostein für sich ändern soll:
Um genauer zu werden.
Statt der "Augen" auf dem Dominostein soll dann verschiedene Slogans auf den Steinen stehen.
Vielleicht durch eine Abfrage der koordinaten vom Mauszeiger.
Aber habe ich dann nicht wieder Probleme bei unterschiedlichen Auflösungen?
Hach ... ich bin verzweifelt
Hätte einer von euch eine Ahnung wie ich das realisieren soll / kann ?
Bin für jede Hilfe / Anregung sehr sehr dankbar
Liebe Grüße
Sascha
nach langer Abstinenz bin ich auch mal wieder hier, weil ich einfach nicht mehr weiter weis
Ich habe zur Zeit folgendes Problem.
Ein Kunde von uns möchte seine Homepage überarbeitet haben.
Die Seite ist Hauptsächlich im HTML-Format geschrieben.
Auf einer der Seiten gibt es drei verschiedene Bilder in denen jeweils mehrere Domino-Steine zu sehen sind.
Nun hätte der Kunde gerne, dass wenn ich auf einen Dominostein gehe, genau dieser Dominostein sich verändert.
Geht er auf einen anderen Dominostein ( im selben Bild) so soll auch nur dieser sich wieder verändern.
Ich hätte ja kein Problem, wenn das ganze Bild sich verändern soll... aber so bin ich gerade etwas aufgeschmissen.
Hier mal eins der Bilder wo sich jeder Dominostein für sich ändern soll:
Um genauer zu werden.
Statt der "Augen" auf dem Dominostein soll dann verschiedene Slogans auf den Steinen stehen.
Vielleicht durch eine Abfrage der koordinaten vom Mauszeiger.
Aber habe ich dann nicht wieder Probleme bei unterschiedlichen Auflösungen?
Hach ... ich bin verzweifelt
Hätte einer von euch eine Ahnung wie ich das realisieren soll / kann ?
Bin für jede Hilfe / Anregung sehr sehr dankbar
Liebe Grüße
Sascha
Kommentieren
Teilen
Auf Facebook teilen
Auf X (Twitter) teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 161419
Url: https://administrator.de/forum/bilder-in-bilder-mit-mouseover-161419.html
Ausgedruckt am: 30.04.2025 um 03:04 Uhr
10 Kommentare
Neuester Kommentar
Hallo,
früher(TM), als ich noch HTML-Seiten fabrizierte, hätte ich sowas mittels Flash (4.0, jawoll!) gelöst. Und heute wohl auch...
kristov
früher(TM), als ich noch HTML-Seiten fabrizierte, hätte ich sowas mittels Flash (4.0, jawoll!) gelöst. Und heute wohl auch...
kristov
Hi,
da kann ich meinem Vorredner zu zustimmen. Schau dir mal Flash an, das wird das sinnvollste sein...
da kann ich meinem Vorredner zu zustimmen. Schau dir mal Flash an, das wird das sinnvollste sein...
Omg.... ich habe noch NIE was mit flash gemacht
Moin,
wenn man es denn unbedingt in HTML machen will, geht sowas mit Verweissensitiven Grafiken.
Einfach bei SelfHTML - Imagemaps - suchen.
Die Auflösung spielt hierbei keine Rolle, da die Pixel immer die gleichen sind.
Gruß
Peter
wenn man es denn unbedingt in HTML machen will, geht sowas mit Verweissensitiven Grafiken.
Einfach bei SelfHTML - Imagemaps - suchen.
Die Auflösung spielt hierbei keine Rolle, da die Pixel immer die gleichen sind.
Gruß
Peter
Einfach bei SelfHTML - Imagemaps - suchen.
Imagemaps? Bei diesen Kreuz und Quer liegenden Dominosteinen? Viel Vergnügen!
kristov
Tja, da kann man dann nur mit Polygonen arbeiten.
Wenn's einfach wäre könnt's ja jeder.
Gruß
Peter
Wenn's einfach wäre könnt's ja jeder.
Gruß
Peter
ja ich war der Hoffnung das ich nur den Wald vor lauter Bäumen nicht sehe!
@darkslayer,
Die Polygone um die Dominosteine legen, ist nur ein bißchen "Fummelskram".
Du legst die Bildgröße fest, und näherst dich von links (x) und von oben (y) an die
Ecken eines Steins an. "x1,y1,x2,y2,x3,y3,x4,y4" in Pixel beschreibt also die Lage eines Dominosteins.
Wenn du den ersten Stein erstmal hast, ist der Rest gar nicht mehr so wild.
Das Ursprungsbild ist dein Startbild, das immer wieder angzeigt wird, wenn der Mauszeiger
einen Stein "verläßt".
Für jeden Bereich, zu dem du navigieren willst, radierst du (versuchsweise z.B. mit Paint) in dem Bild in
einem Stein die Punkte weg und schreibst mit irgendeinem Pinsel oder Stift das Thema in den Stein.
Mit ein bißchen Übung klappt das ganz gut. Dann speicherst du das Bild unter einem entspr. Namen ab.
Damit der Bildwechsel zügig von statten geht, werden die Bilder beim Laden der Seite in einem Array abgelegt.
Das Array legst du assoziativ an, dann kannst du die Bilder mit "Namen ansprechen".
Das Ganze sieht dann so aus (mit zwei Beispielsteinen) . . .
Viel Erfolg, bei Fragen einfach fragen oder ==> http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm#definieren
Gruß
Günni
Angucken ==> http://www.net-comm.de
Edit:
Oder erstellst dir eine Grafik mit einem Slogan (was du ja wolltest) und legst diese über die Punkte.
ja ich war der Hoffnung das ich nur den Wald vor lauter Bäumen nicht sehe!
Die Polygone um die Dominosteine legen, ist nur ein bißchen "Fummelskram".
Du legst die Bildgröße fest, und näherst dich von links (x) und von oben (y) an die
Ecken eines Steins an. "x1,y1,x2,y2,x3,y3,x4,y4" in Pixel beschreibt also die Lage eines Dominosteins.
Wenn du den ersten Stein erstmal hast, ist der Rest gar nicht mehr so wild.
Das Ursprungsbild ist dein Startbild, das immer wieder angzeigt wird, wenn der Mauszeiger
einen Stein "verläßt".
Für jeden Bereich, zu dem du navigieren willst, radierst du (versuchsweise z.B. mit Paint) in dem Bild in
einem Stein die Punkte weg und schreibst mit irgendeinem Pinsel oder Stift das Thema in den Stein.
Mit ein bißchen Übung klappt das ganz gut. Dann speicherst du das Bild unter einem entspr. Namen ab.
Damit der Bildwechsel zügig von statten geht, werden die Bilder beim Laden der Seite in einem Array abgelegt.
Das Array legst du assoziativ an, dann kannst du die Bilder mit "Namen ansprechen".
Das Ganze sieht dann so aus (mit zwei Beispielsteinen) . . .
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
var images = new Array();
images['start'] = new Image();
images['start'].src = "domino-start.jpg";
images['net'] = new Image();
images['net'].src = "domino-net.jpg";
images['impress'] = new Image();
images['impress'].src = "domino-impress.jpg";
function mouse_over(index){
document.images.navi.src=images[index].src;
}
function mouse_out(index){
document.images.navi.src=images[index].src;
}
// -->
</script>
</head>
<body>
<img name="navi" src="domino-start.jpg" width="345" height="312" border="0" alt="Navigation" usemap="#Navigation">
<map name="Navigation">
<area shape="poly" coords="90,150,180,70,200,140,120,180"
href="http://server/network" alt="Network" title="Network" onmouseover="mouse_over('net')"
onmouseout="mouse_out('start')">
<area shape="poly" coords="10,150,90,150,90,220,10,220"
href="http://server/impressum" alt="Impressum" title="Impressum" onmouseover="mouse_over('impress')"
onmouseout="mouse_out('start')">
</map>
</body>
</html>Viel Erfolg, bei Fragen einfach fragen oder ==> http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm#definieren
Gruß
Günni
Angucken ==> http://www.net-comm.de
Edit:
Für jeden Bereich, zu dem du navigieren willst, radierst du (versuchsweise z.B. mit Paint) in dem Bild in
einem Stein die Punkte weg und schreibst mit irgendeinem Pinsel oder Stift das Thema in den Stein.
einem Stein die Punkte weg und schreibst mit irgendeinem Pinsel oder Stift das Thema in den Stein.
Oder erstellst dir eine Grafik mit einem Slogan (was du ja wolltest) und legst diese über die Punkte.
Es gibt auch Tools bei denen man die Links direkt einzeichnen kann und dann denn Quellcode bekommt (müsste jetzt aber selbst googeln).
Mein Problem an der Sache mit den Imagemaps ist, das diese heute nicht mehr konform sind, d.h. sie werden vom w3c-Validator als invalid abgestempelt.
Eine Alternative wäre vielleicht unsichtbare Div-Container über die Steine zu legen und diese dann via :hover zu verändern. Das ist dann aber nicht "nahtlos" mit den Steinen möglich.
Dann gibt es noch die Möglichkeit die Container zu drehen, allerdings nur mit CSS 3 und bisher keiner "Flächendeckenden" Browserkompatibilität.
Wenns HTML und CSS 2 sein sollen würde ich die Div-Möglichkeit nutzen, jedem Div eine ID geben und dann etwas ähnliches wie das hier:
Der HTML Code (seeeehr vereinfacht
)
Das CSS dazu
Habe es jetzt nicht getestet, aber eigentlich sollte das so gehen. Eine ähnliche Lösung habe ich selbst schon benutzt um Bilder von einer Karte abzuheben.
Wenn es nicht hilft, kann ich mich gern nochmal ransetzen und es testen bis es geht
MfG
Thomas G.
Mein Problem an der Sache mit den Imagemaps ist, das diese heute nicht mehr konform sind, d.h. sie werden vom w3c-Validator als invalid abgestempelt.
Eine Alternative wäre vielleicht unsichtbare Div-Container über die Steine zu legen und diese dann via :hover zu verändern. Das ist dann aber nicht "nahtlos" mit den Steinen möglich.
Dann gibt es noch die Möglichkeit die Container zu drehen, allerdings nur mit CSS 3 und bisher keiner "Flächendeckenden" Browserkompatibilität.
Wenns HTML und CSS 2 sein sollen würde ich die Div-Möglichkeit nutzen, jedem Div eine ID geben und dann etwas ähnliches wie das hier:
Der HTML Code (seeeehr vereinfacht
)<div id="hover1">
<img id="hoverBild1" src="bild.jpg" />
</div>Das CSS dazu
img[id="hoverBild1"] {
display: none;
}
div[id="hover1"]:hover > img[id="hoverBild1"] {
display: block;
position: absolute;
/*Hier logsicherweise die Position noch festlegen*/
}Habe es jetzt nicht getestet, aber eigentlich sollte das so gehen. Eine ähnliche Lösung habe ich selbst schon benutzt um Bilder von einer Karte abzuheben.
Wenn es nicht hilft, kann ich mich gern nochmal ransetzen und es testen bis es geht
MfG
Thomas G.
Ich seh grad, es soll Bild in Bild sein...
Aber auch das ist möglich!
Einfach dem sich öffnenden Bild auch ein :hover geben.
Die Änderung sorgt dafür, das sobald das Bild geöffnet ist und die Maus sich auf dem Bild befindet, dieses offen bleibt bis man die Maus herunter bewegt.
Hier der Nachteil:
Bilder haben die Eigenschaft viereckig zu sein und 90° Winkel in den Ecken zu haben. dadurch ist der hover-Bereich natürlich nicht nur auf den Dominostein beschränkt, sondern erstreckt sich leider über die Steine hinaus.
Aber auch das ist möglich!
Einfach dem sich öffnenden Bild auch ein :hover geben.
img[id="hoverBild1"] {
display: none;
}
div[id="hover1"]:hover > img[id="hoverBild1"],
div[id="hover1"] > img[id="hoverBild1"]:hover {
display: block;
position: absolute;
/*Hier logsicherweise die Position noch festlegen*/
}Die Änderung sorgt dafür, das sobald das Bild geöffnet ist und die Maus sich auf dem Bild befindet, dieses offen bleibt bis man die Maus herunter bewegt.
Hier der Nachteil:
Bilder haben die Eigenschaft viereckig zu sein und 90° Winkel in den Ecken zu haben. dadurch ist der hover-Bereich natürlich nicht nur auf den Dominostein beschränkt, sondern erstreckt sich leider über die Steine hinaus.
