  |
| Autor |
Nachricht |
Tobias
Erfahrener [User]
Anmeldung: 18.08.05
Beiträge: 79
Wohnort: Schutterwa ...
|
 Verfasst am: 26.08.2005, 08:46 Titel: Informationsfenster |
 |
|
hallo zusammen,
ich habe ein problem, bei dem ihr mir hoffentlich helfen könnt.
ich schreibe gerade neue inhalte für den pc-spiele-bereich. zur zeit schreibe ich an age of empires 2. wenn ich jetzt dort ein bild, zum beispiel vom dorfzentrum habe möchte ich, dass wenn man mit der maus darüber fährt, dass dann ein kleines fenster aufgeht, indem inforationen über dieses gebäude drin stehen. im prinzip wie ein alt-Text nur, dass ein richtiges kleines fenster kommen soll.
gleiches prinzip findet man manchmal bei java-script-navigationen. über link fahren dann öffnet sich untermenü.
so wie das soll es aussehen. nur halt nicht als untermenü, sondern als infofenster.
um quellcode wäre ich sehr dankbar.
mfg tobias
_________________
Webdesign Feldmeth - Ihre Zufriedenheit ist mein Ziel
 www.webdesign.feldmeth.de
-------------------------------------------------------
www.tobias.feldmeth.de
tobias@feldmeth.de
viel Spaß beim Surfen
|
|
| Nach oben |
|
 |
Anamy
User [User]
Anmeldung: 26.08.05
Beiträge: 16
|
| Verfasst am: 26.08.2005, 09:03 Titel: |
|
|
Diese Datei Donwloaden: http://www.walterzorn.de/scripts/wz_tooltip.zip
Folgende Zeilen innerhalb des <body>-Bereichs der HTML-Datei unmittelbar vor dem schließenden </body>-Tag einfügen:
| Code: | | <script language="JavaScript" type="text/javascript" src="wz_tooltip.js"></script> |
Die Tags benötigen nur ein onmouseover-Attribut, das onmouseout-Attribut ist überflüssig:
| Code: | | <a href="index.htm" onmouseover="return escape('Irgendein Text')">Zur Startseite</a> |
Das sind die normalen Tool Tips, die wohl jeder kennt.
Bei Bildern sieht es wie folgt aus:
| Code: | <map name="myMap">
<area onmouseover="return escape('Dies ist Area 1')" shape=... >
<area onmouseover="return escape('Dies ist Area 2')" shape=... >
</map>
<img usemap="#myMap" src="myImage.jpg" alt="..."> |
Hoffe das hilft Dir.
_________________
Media-Solution24
Quality Webhosting Solution
info@media-solution24.de
http://www.media-solution24.de
|
|
| Nach oben |
|
|
Tobias
Erfahrener [User]
Anmeldung: 18.08.05
Beiträge: 79
Wohnort: Schutterwa ...
|
| Verfasst am: 26.08.2005, 21:37 Titel: |
|
|
hallo,
werd mal schauen und sag dann bescheid. danke erst mal für die schnelle antwort
gruss tobias
_________________
Webdesign Feldmeth - Ihre Zufriedenheit ist mein Ziel
www.webdesign.feldmeth.de
-------------------------------------------------------
www.tobias.feldmeth.de
tobias@feldmeth.de
viel Spaß beim Surfen
|
|
| Nach oben |
|
|
parthy
Erfahrener [User]
Anmeldung: 24.08.05
Beiträge: 50
Wohnort: Kuernach
|
| Verfasst am: 26.08.2005, 22:09 Titel: |
|
|
sowas geht aber auch huebsch mit css 
|
|
| Nach oben |
|
|
dein_opi
Beliebter [User]
Anmeldung: 07.11.04
Beiträge: 428
Wohnort: Göttingen
|
| Verfasst am: 26.08.2005, 22:48 Titel: |
|
|
| parthy hat folgendes geschrieben: | | sowas geht aber auch huebsch mit css |
dann sag mal auch gleich wie das geht..
_________________
News Script Rezepte CMS Counter
|
|
| Nach oben |
|
|
parthy
Erfahrener [User]
Anmeldung: 24.08.05
Beiträge: 50
Wohnort: Kuernach
|
| Verfasst am: 26.08.2005, 22:54 Titel: |
|
|
| Code: |
<a class="test">Text<p>Tooltip</p></a>
|
den link kann man jetzt stylen, unterstreichen und link-mauszeiger wegmachen z.b., und ansonsten:
#testdesc p {
display:none;
}
#testdesc:hover p {
display:block;
}
das p kann man dann auch noch mit position und so weiter bearbeiten, dass es nicht mitten im text steht. da gibts sehr viele moeglichkeiten ^^
https://standards.webmasterpro.de/index-article-navigation%20mit%20hoverbox.html
hier wird auch der hover effekt von css verwendet.
|
|
| Nach oben |
|
|
Tobias
Erfahrener [User]
Anmeldung: 18.08.05
Beiträge: 79
Wohnort: Schutterwa ...
|
| Verfasst am: 27.08.2005, 10:05 Titel: |
|
|
@parthy,
wenn ich mir die beispielseite recht anschaue, glaube ich du hast mich falsch verstanden. ich wollte, das wenn man mit der maus über eine bild fährt sich wie bei einem alt-text ein fenster öffnet. nur das dieses fenster ein richtiges mit rahmen und allem was dazu gehört sein soll.
@anamy;
wie soll das mit dem
<map name="myMap">
<area onmouseover="return escape('Dies ist Area 1')" shape=... >
<area onmouseover="return escape('Dies ist Area 2')" shape=... >
</map>
genau funktionieren. wo muss ich was einfügen, dass das funktioniert. bei mir zeigt es nur das bild mit dem alt-text an. kannst du mir vielleicht ein komlett funktionierendes beispiel für sowas geben?, danke
gruss tobias
_________________
Webdesign Feldmeth - Ihre Zufriedenheit ist mein Ziel
www.webdesign.feldmeth.de
-------------------------------------------------------
www.tobias.feldmeth.de
tobias@feldmeth.de
viel Spaß beim Surfen
|
|
| Nach oben |
|
|
parthy
Erfahrener [User]
Anmeldung: 24.08.05
Beiträge: 50
Wohnort: Kuernach
|
| Verfasst am: 27.08.2005, 10:59 Titel: |
|
|
das geht doch damit tobias... du kannst mit css den hover effekt machen und auch das was dann erscheint entsprechend bearbeiten...
hab gerade nochwas gefunden: du kannst auch das hier mal anschaun:
http://www.webmasterworld.com/forum83/3690.htm
da wird keine imagemap mehr verwendet sondern ne liste die mit css bearbeitet wurde. bei bedarf auch mal icq oder so anwerfen
|
|
| Nach oben |
|
|
Tobias
Erfahrener [User]
Anmeldung: 18.08.05
Beiträge: 79
Wohnort: Schutterwa ...
|
| Verfasst am: 27.08.2005, 20:44 Titel: |
|
|
muss ich das alles direkt da hin schreiben wo ich das haben will oder muss da manches von in den header. also bei mir kam da wie gesagt nur der alt text.
gruss tobias
_________________
Webdesign Feldmeth - Ihre Zufriedenheit ist mein Ziel
www.webdesign.feldmeth.de
-------------------------------------------------------
www.tobias.feldmeth.de
tobias@feldmeth.de
viel Spaß beim Surfen
|
|
| Nach oben |
|
|
Anamy
User [User]
Anmeldung: 26.08.05
Beiträge: 16
|
| Verfasst am: 28.08.2005, 00:35 Titel: |
|
|
Hallo Tobias,
ich habe da noch eine leichte Anleitung für den MouseOver Effect bei Bildern gefunden.
http://www.roflweb.de/Script/Sonstiges/update19/tooltipBilder1/tooltipBilder1.htm
Ansonsten noch den einfachsten Befehl:
| Code: | | <img border="0" src="HIER DEIN FOTO" width="GRÖßE" height="BREITE" onMouseOver="alert('DEINE NACHRICHT');return true;"> |
Wobei auch ich die CSS Variante vorziehen würde..
Die CSS Befehle musst Du zwischen head und /head packen oder in eine externe CSS Datei. Dann gibst Du deinem Bild einfach die id an, wie es auszusehen hat.
Hoffe das hilft Dir ein wenig weiter.
Gruß Anamy
_________________
Media-Solution24
Quality Webhosting Solution
info@media-solution24.de
http://www.media-solution24.de
|
|
| Nach oben |
|
|
|
|
