darkslayer
Goto Top

Bilder in Bilder mit mouseover ?

Hallo zusammen,
nach langer Abstinenz bin ich auch mal wieder hier, weil ich einfach nicht mehr weiter weis face-sad

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:

0861cbdc494fde18762ae883c6b57918

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 face-sad


Hätte einer von euch eine Ahnung wie ich das realisieren soll / kann ?

Bin für jede Hilfe / Anregung sehr sehr dankbar face-sad


Liebe Grüße


Sascha

Content-Key: 161419

Url: https://administrator.de/contentid/161419

Ausgedruckt am: 28.03.2024 um 20:03 Uhr

Mitglied: kristov
kristov 23.02.2011 um 14:44:59 Uhr
Goto Top
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
Mitglied: Flo985
Flo985 23.02.2011 um 15:01:02 Uhr
Goto Top
Hi,
da kann ich meinem Vorredner zu zustimmen. Schau dir mal Flash an, das wird das sinnvollste sein...
Mitglied: darkslayer
darkslayer 23.02.2011 um 15:09:30 Uhr
Goto Top
Omg.... ich habe noch NIE was mit flash gemacht face-sad
Mitglied: Petrof
Petrof 23.02.2011 um 15:12:30 Uhr
Goto Top
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
Mitglied: kristov
kristov 23.02.2011 um 15:21:57 Uhr
Goto Top
Einfach bei SelfHTML - Imagemaps - suchen.

Imagemaps? Bei diesen Kreuz und Quer liegenden Dominosteinen? Viel Vergnügen!

kristov
Mitglied: Petrof
Petrof 23.02.2011 um 15:37:03 Uhr
Goto Top
Tja, da kann man dann nur mit Polygonen arbeiten.
Wenn's einfach wäre könnt's ja jeder.

Gruß
Peter
Mitglied: darkslayer
darkslayer 23.02.2011 um 16:14:31 Uhr
Goto Top
ja ich war der Hoffnung das ich nur den Wald vor lauter Bäumen nicht sehe!
Mitglied: Guenni
Guenni 24.02.2011 um 04:31:14 Uhr
Goto Top
@darkslayer,

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.

Oder erstellst dir eine Grafik mit einem Slogan (was du ja wolltest) und legst diese über die Punkte.
Mitglied: Naderio
Naderio 07.12.2011 um 13:09:21 Uhr
Goto Top
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 face-wink )
<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 face-wink

MfG

Thomas G.
Mitglied: Naderio
Naderio 07.12.2011 um 13:22:07 Uhr
Goto Top
Ich seh grad, es soll Bild in Bild sein...
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.