Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

Bilder in Bilder mit mouseover ?

Frage Entwicklung HTML

Mitglied: darkslayer

darkslayer (Level 1) - Jetzt verbinden

23.02.2011, aktualisiert 14:31 Uhr, 4921 Aufrufe, 10 Kommentare

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:

0861cbdc494fde18762ae883c6b57918 - Klicke auf das Bild, um es zu vergrößern

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

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

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

Gruß
Peter
Bitte warten ..
Mitglied: darkslayer
23.02.2011 um 16:14 Uhr
ja ich war der Hoffnung das ich nur den Wald vor lauter Bäumen nicht sehe!
Bitte warten ..
Mitglied: Guenni
24.02.2011 um 04:31 Uhr
@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) . . .

01.
 
02.
<html> 
03.
<head> 
04.
<title>Untitled</title> 
05.
<script type="text/javascript"> 
06.
<!-- 
07.
var images = new Array(); 
08.
images['start'] = new Image(); 
09.
images['start'].src = "domino-start.jpg"; 
10.
images['net'] = new Image(); 
11.
images['net'].src = "domino-net.jpg"; 
12.
images['impress'] = new Image(); 
13.
images['impress'].src = "domino-impress.jpg"; 
14.
 
15.
function mouse_over(index){ 
16.
  document.images.navi.src=images[index].src;  
17.
18.
 
19.
function mouse_out(index){ 
20.
 document.images.navi.src=images[index].src;  
21.
22.
// --> 
23.
</script> 
24.
</head> 
25.
<body> 
26.
<img name="navi" src="domino-start.jpg" width="345" height="312" border="0" alt="Navigation" usemap="#Navigation"> 
27.
  <map name="Navigation"> 
28.
    <area shape="poly" coords="90,150,180,70,200,140,120,180" 
29.
          href="http://server/network" alt="Network" title="Network" onmouseover="mouse_over('net')" 
30.
					 onmouseout="mouse_out('start')"> 
31.
    <area shape="poly" coords="10,150,90,150,90,220,10,220" 
32.
          href="http://server/impressum" alt="Impressum" title="Impressum" onmouseover="mouse_over('impress')" 
33.
					 onmouseout="mouse_out('start')"> 
34.
  </map> 
35.
 
36.
</body> 
37.
</html> 
38.
 
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.
Bitte warten ..
Mitglied: Naderio
07.12.2011 um 13:09 Uhr
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 )
01.
<div id="hover1"> 
02.
   <img id="hoverBild1" src="bild.jpg" /> 
03.
</div> 
04.
 
Das CSS dazu
01.
img[id="hoverBild1"] { 
02.
   display: none; 
03.
04.
div[id="hover1"]:hover > img[id="hoverBild1"] { 
05.
   display: block; 
06.
   position: absolute; 
07.
   /*Hier logsicherweise die Position noch festlegen*/ 
08.
09.
 
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

Mit freundlichen Grüßen

Thomas G.
Bitte warten ..
Mitglied: Naderio
07.12.2011 um 13:22 Uhr
Ich seh grad, es soll Bild in Bild sein...
Aber auch das ist möglich!

Einfach dem sich öffnenden Bild auch ein :hover geben.

01.
img[id="hoverBild1"] {  
02.
   display: none;  
03.
}  
04.
 
05.
div[id="hover1"]:hover > img[id="hoverBild1"], 
06.
div[id="hover1"] > img[id="hoverBild1"]:hover {  
07.
   display: block;  
08.
   position: absolute;  
09.
   /*Hier logsicherweise die Position noch festlegen*/  
10.
}
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.
Bitte warten ..
Neuester Wissensbeitrag
Windows 10

Powershell 5 BSOD

(2)

Tipp von agowa338 zum Thema Windows 10 ...

Ähnliche Inhalte
Outlook & Mail
Outlook 2016 - Briefpapier Bilder werden nicht angezeigt (6)

Frage von Markowitsch zum Thema Outlook & Mail ...

Grafik
gelöst Suche Programm um Bilder zu verkleinern (10)

Frage von fox14ch zum Thema Grafik ...

Viren und Trojaner
Virus macht Bilder unleserlich (25)

Frage von linguin zum Thema Viren und Trojaner ...

Heiß diskutierte Inhalte
LAN, WAN, Wireless
gelöst Server erkennt Client nicht wenn er ausserhalb des DHCP Pools liegt (28)

Frage von Mar-west zum Thema LAN, WAN, Wireless ...

Windows Server
Server 2008R2 startet nicht mehr (Bad Patch 0xa) (18)

Frage von Haures zum Thema Windows Server ...

Outlook & Mail
Outlook 2010 findet ost datei nicht (18)

Frage von Floh21 zum Thema Outlook & Mail ...