nicht angemeldet
Mouseover effect
Hi,
bin noch ein völliger einsteiger in dem ganzen heir so XD aber ich brauch jetz mal shcon kurz eure hilfe.
also es geht darum.
ich hab ein bild ( grundriss von gebäude) und rechts daneben verschiedene logos.
nun soll das passieren:
wenn ich über einen bestimmten bereich( also zum beispiel ein zimmer) per mouseover drüber gehe, soll rechts das passende logo von schwarz weiß auf farbig wechseln.
wie funktioniert das im groben? is das per imagemap zu realisieren oder wie geht man da dran.
danke schonmal im vorraus
-
Prinzipiell gibt es fast immer mehrere Ansätze, wie man eine Aufgabe lösen kann.
Ein Ansatz wäre sicherlich das über Imagemaps und onmouseover bzw onmouseout zu regeln. Die vergibst dem Bild z.B. eine ID und kannst dies dann in den aufgerufenenen Funktionen über getelementbyid ändern.
Ein anderer Ansatz ist die Nutzung von Flash.
Letztendlich hat alles seine Vor- und Nachteile. Allerdings solltest du solche Fragen entweder üebr Programmiertechnik stellen oder aber probiert haben und dann eine konkrete Problem- / Fragestellung zu einem Bereich äußern, nachdem du über History und Google-Recherche nichts gefunden hast...
Trotzdem viel Erfolg beim Lernen und Umsetzen...
Gruß Patrick
-
ich bin jetz soweit dass ich mir den grundriss in kleiner bilder angelegt habe.
dazu hab ich eine weitere html in der ich zum test 2 schwarzweißlogos habe.Aufbau von grundriss.htm:
<html>
<head>
<title>obergeschoss</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor=#ffffff leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 width=720>
<!-- ImageReady Slices (obergeschoss.jpg) --><table width=561 border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
<img src="images/obergeschoss_01.jpg" width=57 height=57 alt=""></td>
<td>
<img src="images/obergeschoss_02.jpg" width=56 height=57 alt=""></td>
<td>
<img src="images/obergeschoss_03.jpg" width=57 height=57 alt=""></td>
<td>
<img src="images/obergeschoss_04.jpg" width=57 height=57 alt=""></td>
<td>
<img src="images/obergeschoss_05.jpg" width=54 height=57 alt=""></td>
<td>
<img src="images/obergeschoss_06.jpg" width=59 height=57 alt=""></td>
<td>
<img src="images/obergeschoss_07.jpg" width=57 height=57 alt=""></td>
<td>
<img src="images/obergeschoss_08.jpg" width=57 height=57 alt=""></td>
<td>
<img src="images/obergeschoss_09.jpg" width=56 height=57 alt=""></td>
<td>
<img src="images/obergeschoss_10.jpg" width=51 height=57 alt=""></td>
</tr></table>
Aufbau von logo.htm:
<html>
<head>
<title>obergeschoss</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor=#ffffff leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 width=720>
<table valign="top" border=1>
<tr>
<td>
<img src="logos_bw/deichmann_bw.png" >
</td>
</tr>
<tr>
<td>
<img src="logos_bw/ernstings_bw.png" >
</td>
</tr></table>
</body>
</html><!-- End ImageReady Slices -->
</body>
</html>Wie sag ich jetzt einem bild in der grundriss.htm, dass wenn man mit der maus drüber geht dass logo in der logo.htm von schwarzweiß in das farbige logo wechsel. (farbie logos im ordner /logos , schwarzweiße logos im ordner /logos_bw/
-
Mahlzeit,
Aufbau von grundriss.htm:
[...]
<!-- ImageReady Slices (obergeschoss.jpg) --><table width=561 border=0 cellpadding=0 cellspacing=0>
[...]
</table>Zum Thema "Layouts mit Tabellen" folgendes:
Wieso hast Du Deine ursprüngliche Idee von einer Image-Map verworfen?
Aufbau von logo.htm:
[...]
<table valign="top" border=1>
[...]
</table>Auch hier ließe sich - z.B. mit einer entsprechend formatierten http://de.selfhtml.org/html/text/listen.htm#aufzaehlung@title=Liste - eine viel sinnvollere Struktur finden.
Außerdem ist mir noch etwas aufgefallen: Du hast zwei Dateinamen mit verschiedenen Inhalten angegeben. Das riecht ganz stark nach der Benutzung von Frames. Abgesehen davon, dass das in nahezu fast allen Fällen sinnfrei ist und alles nur unnötig kompliziert ... wieso hast Du das nicht gesagt?
Wie sag ich jetzt einem bild in der grundriss.htm, dass wenn man mit der maus drüber geht dass logo in der logo.htm von schwarzweiß in das farbige logo wechsel. (farbie logos im ordner /logos , schwarzweiße logos im ordner /logos_bw/
Wenn Du tatsächlich ein Frameset hast, dann zeige uns bitte den vollständigen Aufbau - ansonsten wäre jegliche Antwort pures Herumraten. Ansonsten habe ich Dir bereits in meiner ersten Antwort einige Hinweise auf möglicherweise hilfreiche Attribute und Funktionen sowie entsprechende Links genannt.
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
jetz hab ich die anfänger-klatsche bekommen..
ich hab es zum test bei mir auf dem rechner in zwei htms gemacht da das ganze später in typo3 eingebaut werden muss.
warum ich imagemap verworfen habe? gute frage..vllt grade wegen des anfängerstatus
-
Mahlzeit,
jetz hab ich die anfänger-klatsche bekommen..
Naja, wenn Du das so bezeichnen willst ... :-)
ich hab es zum test bei mir auf dem rechner in zwei htms gemacht da das ganze später in typo3 eingebaut werden muss.
Werden die beiden Dateien denn später in Typo3 auch in einem Frameset funktionieren (sollen)? Ob Du ein CMS benutzt oder nicht, und wenn ja, um welches es sich handelt, ist vollkommen irrelevant. Wichtig ist nur der HTML-Quellcode, der dabei herauskommt. Wenn es sich dabei also um ein Frameset handelt, dann schreib das auch (und zeige die Struktur des Framesets). Wenn nicht, frage ich mich, wie Du zwei Dateien gleichzeitig anzeigen willst (denn das willst Du laut Deinem Ursprungsbeitrag doch, oder?).
Also hilf Dir selbst, indem Du uns noch ein paar Informationsbröckchen mehr vorwirfst ... ;-)
warum ich imagemap verworfen habe? gute frage..vllt grade wegen des anfängerstatus
Glaub mir - eine Image-Map wäre in diesem Fall erheblich sinnvoller und einfacher als irgendein wildes Bild-auseinanderschneiden mitsamt Tabellengefrickel.
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
So ich habe es bis jetz so gelöst.
<map name="Untergeschoss" id="untergeschoss">
<table border="0">
<tr ><!-- Imagemap -->
<td>
<img src="uploads/pics/untergeschoss.jpg" width="561" height="418" border="0" alt="untergeschoss" title="untergeschoss" usemap="#Untergeschoss" />
</td>
<!-- uploads/pics/logos -->
<td>
<table border="0" >
<!-- tegut-Logo -->
<td>
<tr>
<td><area shape="poly" coords="172,112,173,113,201,80,231,80,231,75,263,75,263,61,257,61,255,51,251,51,251,39,286,73,311,98,377,258,367,261,391,320,385,323,391,338,340,361,310,285,283,295,271,267,276,266,273,257,268,258,250,214,254,212,250,202,246,204,208,204,208,172,180,172,180,126,173,113" href="#" alt="tegut" onmouseover="document.getElementById('untergeschoss_tegut').src='uploads/pics/logos/tegut.png'"onmouseout="document.getElementById('untergeschoss_tegut').src='uploads/pics/logos_bw/tegut_bw.png'"/>
<img src="uploads/pics/logos_bw/tegut_bw.png" alt="tegut" id="untergeschoss_tegut">
</td>
</tr>
</td><!-- Ende tegut-Logo -->
<!-- Mueller-Logo --><td>
<tr>
<td align="center"><area shape="poly" coords="19,216,20,217,20,242,6,242,6,337,97,335,125,323,125,277,207,277,205,312,215,307,221,320,246,310,259,343,285,331,243,228,229,228,229,216,130,217,109,227,97,229,82,226,68,218,67,216,20,216" href="#" alt="Müller" onmouseover="document.getElementById('untergeschoss_mueller').src='uploads/pics/logos/mueller.png'"onmouseout="document.getElementById('untergeschoss_mueller').src='uploads/pics/logos_bw/mueller_bw.png'" />
<img src="uploads/pics/logos_bw/mueller_bw.png" alt="Müller" id="untergeschoss_mueller">
</td>
</tr>
</td>
<!-- Ende Mueller-Logo -->
<!-- Haiky Asia Food-Logo --><td>
<tr>
<td><area shape="poly" coords="20,189,20,191,20,214,67,214,60,198,60,188,20,188" href="#" alt="Haiky Asia Food" onmouseover="document.getElementById('untergeschoss_haiky').src='uploads/pics/logos/haiky.png'"onmouseout="document.getElementById('untergeschoss_haiky').src='uploads/pics/logos_bw/haiky_bw.png'" />
<img src="uploads/pics/logos_bw/haiky_bw.png" alt="Haiky Asia Food" id="untergeschoss_haiky">
</td>
</tr>
</td>
<!-- Ende Haiky Asia Food-Logo --></table>
</td>
</tr></table>
</map>auf meinem rechner sieht es super aus, ich hab extra schon die ordner struktur vom server beibehalten..
mein problem ist jetz dass ich es in typo3 einpflegen muss und dort will es mit dem html code nich so wirklich.-
das ist jetz letzendlich draus geworden:
http://tinyurl.com/3hb7rn
danke für die zeit und hilfe
-
-
-
-
-
-
-
Mahlzeit,
wenn ich über einen bestimmten bereich( also zum beispiel ein zimmer) per mouseover drüber gehe, soll rechts das passende logo von schwarz weiß auf farbig wechseln.
wie funktioniert das im groben? is das per imagemap zu realisieren oder wie geht man da dran.
Ja, ist es. Den einzelnen <http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm#definieren@title=<area>>-Elementen weist Du dann mittels des "http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onmouseover@title=onmouseover"-Attributs einen Eventhandler zu, der z.B. aus einem Funktionsaufruf besteht. Dieser Funktion übergibst Du irgendeine Form von Kennzeichnung (entweder das aktuelle <area>-Objekt oder eine Bezeichnung oder auch die ID oder den Namen des auszutauschenden <img>-Elements), damit sie weiß, welche der Grafiken sie austauschen soll.
In der Funktion selbst wird auf Basis des übergebenen Parameters dann die entsprechende http://de.selfhtml.org/javascript/objekte/images.htm#src@title=Grafikressource ausgetauscht (evtl. empfiehlt es sich, diese beim Laden des Dokuments vorzuladen).
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:| -
Einfachste Möglichkeit: Bild in entsprechende Bereiche zerschneiden und diese mit CSS positionieren sowie ein onmouseover-Attribut entsprechend setzen.
Mit einer Imagemap sollte es eigentlich auch gehen, allerdings habe ich das noch nicht getestet. Versuche einfach, den jeweiligen area-Tags ein onmouseover-Attribut zu verpassen:
<area shape="rect" coords="..." onmouseover="document.getElementById('logo').src='xy.png'" />
Ich wäre interessiert, was bei diesem Test herauskommt.
Gruß, LX