nicht angemeldet
mouseover in "area-map" einbinden: wie?
Hallo
wie baue ich einen mouseover script in eine area-map ein?
hier ist erstmal der quelletext, könnt ihr mir helfen und sagen wie ich das mache? könnt ihr vllt das mouseover für die ersten 2 "buttons(die klassen und funbereich) vllt sogar einen code mit einbinden?
wäre echt nett.
mfg
björn
<html>
<head>
<title>Homepage der 8. Klasen des GBG's</title>
</head>
<body>
<map name="schule">
<area shape="rect" coords="127,175,247,201" href="index.htm">
<area shape="rect" coords="374,163,503,189" href="http://forum.abi-2010.net">
<area shape="rect" coords="503,154,640,180" href="webradio-pop-up-script">
<area shape="rect" coords="276,206,373,260" href="die klassen">
<area shape="rect" coords="373,195,503,353" href="funbereich">
<area shape="rect" coords="503,189,640,249" href="sonstiges">
<area shape="rect" coords="640,180,708,247" href="gästebuch">
<area shape="rect" coords="784,174,860,278" href="impressum">
<area shape="rect" coords="273,297,369,357" href="downloads">
<area shape="rect" coords="570,288,638,353" href="homepage">
<area shape="rect" coords="638,285,708,353" href="links">
<area shape="rect" coords="565,399,708,463" href="umfeld">
</map>
<img src="gbg1.JPG" usemap="#schule" width="1024" height="768">
</body>
</html>
-
Ich würd's mit:
<area shape="rect" coords="127,175,247,201" href="index.htm" onMouseover="function1()">
<area shape="rect" coords="227,275,347,301" href="blbla.htm" onMouseover="function2()">
.
.
.
.
etc... probieren :)-
Ich würd's mit:
<area shape="rect" coords="127,175,247,201" href="index.htm" onMouseover="function1()">
<area shape="rect" coords="227,275,347,301" href="blbla.htm" onMouseover="function2()">
.
.
.
.
etc... probieren :)ok, und jetzt nochmal für einen js- newbie ;)
müsste ich (zietiere von selfhtml):
...
Function1(
Normal1 = new Image();
Normal1.src = "button1.gif"; /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "button1h.gif"; /* erste Highlight-Grafik */
)
machen oder wie?
kannst du mir vllt das mit dem head tag auch nochmal erklären? mhm, am besten an hand dieses beispiels.
danke
mfg
björn-
ok, und jetzt nochmal für einen js- newbie ;)
Mit Javsacript hat das zunächst nicht viel zu tun...
müsste ich (zietiere von selfhtml):
...
Function1(
Normal1 = new Image();
Normal1.src = "button1.gif"; /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "button1h.gif"; /* erste Highlight-Grafik */
)keine Ahnung was Du vorhast; wenn's ein Rollovereffekt sein soll, bist Du ohenhin gewaltig auf dem Holzweg, falls Du den mit einer area map realisieren willst. In dem von Dir zitierten Beispiel werden die einzelnen Graphiken einfach vorgeladen, der Austausch beim Mouseover erfolgt auf anderem Wege, den aber hier zu erwähnen einfach den Rahmen eines Postings sprengen würde.
kannst du mir vllt das mit dem head tag auch nochmal erklären? mhm, am besten an hand dieses beispiels.
Das head-Tag hat mit alldem noch weniger zu tun, zumindest hängt das Funktionieren von ROllovereffekten nicht vom Vorhandensein eines korrekten Head-Tags ab. Auch wenn Dich das jetzt vielleicht auf falsche Gedanken bringt, muß man sagen, daß es in 99,9% aller Html-Seiten komplett egal ist, ob Du das head-Tag überhaupt setzt oder nicht ...
-
ok ok, ich habs verstanden, kein javascript, aber wie dann? ich habe ganz oben den quelltext geposten kann mir da jemand vllt zu jedem link oder nur zu 2en oder 3en ein beispiel für den rollover-effekt. das würde mir schon echt was bringen, weil ich dann daraus lernen könnte. ok, danke, wenn ihr irgendeinen gfx-pfad angeben müsst, dann macht da doch bitte einfach das wo bei href steht.
danke
mfg
björn-
Hallo Björn,
mach doch einfach für jeden deiner Buttons ein einzelnes kleines Bild. Baue dir entsprechende <a>-Link-Elemente und verpass diesen IDs, also z.B.
<a href="funbereich" id="fun"> </a>
Im Head-Bereich deines HTML-Dokuments oder in einer externen CSS-Datei definierst du dann das Aussehen dieser Links, also z.B.
#fun {
width:100px;
height:20px;
background-image:url(funButtonNormal.gif);
background-repeat:no-repeat;
text-decoration:none;
}#fun:hover {
background-image:url(funButtonNormal.gif);
}passend dazu im Body-Element:
<a id="fun" href="funbereich.html" title="zum Funbereich"> </a>
Vergleiche hierzu:
http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus
und
http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#backgroundMit älteren Browsern (z.B. Netscape Version 4.X und darunter) funktioniert das allerdings nicht, da musst du dann doch mit onMouseover und einem JS-Bildaustausch arbeiten, also z.B. nur im Body-Element:
<a href="#" onMouseover="document.images['fun'].src='funButtonOver.gif'" onMouseOut="document.images['fun'].src='down_normal.gif'">
<img name="fun" src="funButtonNormal.gif" width="100" height="20" border="0" alt="zum Funbereich" title="zum Funbereich"></a>Vergleiche hierzu:
http://de.selfhtml.org/javascript/beispiele/buttons.htmGut kommt in dem Zusammenhang auch eine Funktion zum Vorausladen der Bilder in den Cache, damit sie bei Bedarf auch sofort da sind und das Laden nicht erst beim Drüberfahren mit der Maus beginnt, aber da mach dich mal selbst mit der Suche schlau, da findest du im Self-Bereich bestimmt einiges. wahrscheinlich schadet das dann auch bei der CSS-Variante nicht.
Gruß Gernot
-
-
-
Hallo Boernmaster,
vielleicht hilft dir dieser Thread aus dem Archiv:
http://forum.de.selfhtml.org/archiv/2004/8/t88414
(das Problem ist hier allerdings noch spezieller)
In deinem Fall mit vermutlich rechtwinkliken, sich nicht überlappenden Buttons würde ich ja statt mit einer Imagemap eher mit Einzelgrafiken und einem einfachen Bilderaustausch per JS oder CSS-Hover-Effekt arbeiten.
Gruß Gernot
-
aaalso,
ich habe ein bild. in diesem bild will via mouseover, etc. buttons rein bringen, also ich meine man hat nen bestimmten abschnitt (bespuiels weise nen hausfenster) und wenn man mit der maus über so ein fenster geht dann er scheint der "button, als button habe ich mir in diesem fall eine kl. grafik mit der "beschreibung" des link zu nehmen. wie geht das? könn ihr mir jetzt mal genau sagen wie? ich kann nur html, js lerne im im moment, ss verstehe ich keinen brocken.
björn-
Hallo boernmaster,
zerschneide dein Bild in lauter Einzelbilder. Jeder Button ist ein eigenes Bild, für den du ein Alternativbild als Mousovervariante kreieren kannst. Das geht z.B. Mit ImageReady von Adobe. Mit diesem Programm kannst du dir sogar auch das JavaScript generieren lassen. Bestímmt gibt es auch noch andere Programme, die Ähnliches können, vielleicht sogar als Freeware.
Mit Imagemaps bist du, wie klawischnigg sagt, vermutlich auf dem Holzweg. Poste doch mal dein Bild, das als Navigation fungieren soll, damit wir das beurteilen können!
Gruß Gernot
-
-
-
-