• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

onmouseover bei Imagemaps

Lili0312

Lili0312

New member
Es gibt eine Möglichkeit, wie im folgenden Link beschrieben, auch bei Imagemaps onmouseover-Effekte einzustellen.

http://alistapart.byteshift.de/imagemap


Leider werde ich aus dem Quellcode nicht schlau und bin somit nicht in der Lage diesen in meinen Quellcode für meine Seite umgeschrieben zu implementieren.
Kann mir jemand dabei vielleicht hilfreich sein?

Liebe Grüße
Lili0312
 
Zuletzt bearbeitet:
Hallo Lili0312,

was willst du denn machen?

Gib doch mal ein Bischen Quelltext mit rüber und beschreiber welcher Effekt reingestellt werden soll.
 
Also fange ich einfach mal an.

Hier ist der Quellcode vom ersten div:
</head>
<body style="background-color:#b0bec1">
<div id="kopf" align="center"><img src="../pics/head.jpg" usemap="#header">
<map name="header">
<area shape="rect" coords="912,0,1023,39" href="home.html" alt="" />
<area shape="rect" coords="500,228,624,287" href="news.html" alt="" target="frame" />
<area shape="rect" coords="625,228,733,287" href="ueber.html" alt="" target="frame" />
<area shape="rect" coords="734,228,880,287" href="elias.html" alt="" target="frame" />
<area shape="rect" coords="881,228,1023,287" href="fotos.html" alt="" target="frame" />
</map></div>

Jede "area" stellt einen Button dar. Wenn ich auf die "Imagemap, also area" mit der Maus klicke, wird die dazugehörige Seite geöffnet. Ich möchte aber, dass wenn ich diese "area" mit der Maus berühre, das Bild gewechselt wird. Die Grafik, die dann angezeigt werden soll, hat die selben Maße wie die "area".
Wie würde denn der dazugehörige Code lauten, wenn die Austauschgrafik, für "area ...href="news.html", als news_a.jpg benannt ist

Vielen Dank
Lili0312
 
Nein, das möchte mich nicht. Ich versuche es nun anhand der Grafiken zu erklären:

Die Grafik (news.jpg) ist als Imagemap auf der Hintergrundgrafik definiert, also dieser Quellcode:
<area shape="rect" coords="500,228,624,287" href="news.html" alt="" target="frame" />

Und genau diese Fläche soll bei Berührung mit der Maus mit der Grafik(news_a.jpg, gleiche Größe wie die Imagemap) ausgetauscht werden.

Vielleicht kann mir jetzt einer helfen.

Liebe Grüße
Lili0312
 

Anhänge

  • news.jpg
    news.jpg
    2 KB · Aufrufe: 9
  • news_a.jpg
    news_a.jpg
    1,8 KB · Aufrufe: 10
Moin!
Lili0312 schrieb:
Die Grafik (news.jpg) ist als Imagemap auf der Hintergrundgrafik definiert, also dieser Quellcode:
<area shape="rect" coords="500,228,624,287" href="news.html" alt="" target="frame" />
Zum Vergrößern anklicken....
Dein Area definiert nix anderes als ein Rechteck mit den angegebenen Koordinaten auf der Grafik ../pics/head.jpg - auf die von Dir vorgesehene Art und Weise wirst Du Dein Ziel nicht erreichen. news.jpg gibt es gar nicht. Du könntest mit JS die news_a.jpg so positionieren, daß sie über der fraglichen Stelle liegt aber das hätte mit Deinem Ansinnen eigentlich nix mehr zu tun.

Da Du - wie Du selber sagst - mit dem Beispiel auf alistapart nicht klarkommst solltest Du vielleicht mal Deine head.jpg posten. Evt. erbarmt sich ja jemand und häkelt Dir daraus eine CSS-Variante.

Ahoi - Pit
 
So, hier ist nun die Grafikdatei. Vielleicht erbarmt sich ja wirklich jemand. :rolleyes:

Liebe Grüße
Lili0312
 

Anhänge

  • head.jpg
    head.jpg
    66,4 KB · Aufrufe: 9
Dafür braucht man aber keine ImageMap konstruieren.
Das geht auch einfacher.
Wenn Du solange warten kannst, mache ich Dir das heute Abend oder spätestens morgen...
...ausser jemand ist schneller.
 
Hi!

Hab mir leider erst nachdem ich das Bild gesehen hab auch mal die relevanten Koordinaten angesehen - hätte ich schon früher machen müssen. Mit fortschreitender Dauer des Computer-Zeitalters darf man zwar durchaus mit immer mehr Benutzern rechnen, deren Monitor mit 1024 und mehr Pünktchen angesteuert wird, aber die "Kleinen" leben auch noch. Daß Deine Grafik 1024 Pünktchen hat finde ich nicht wirklich schlimm (obwohl sie besser so breit wäre, daß sie bei 'ner 1024-er Auflösung dann auch wirklich auf die Glotze passen würde).

Aber spätestens, daß ausgerechnet die für die Navi wichtigen Bereiche rechts positioniert sind, finde ich einen recht unglücklichen Ansatz. Du solltest Dir überlegen, daran was zu ändern bevor jemand "sich erbarmt" (wozu ich grundsätzlich bereit wäre) - sonst müßten Leute mit 'ner 800-er Auflösung zum Navigieren horizontal scrollen und das ist Mist...

Ahoi - Pit

Edit - @dkdenz: Deinen Beitrag nich gesehen. :(
Was hältst Du von dem Breitenvorschlag?
 
Zuletzt bearbeitet:
pit-r schrieb:
Edit - @dkdenz: Deinen Beitrag nich gesehen. :(
Was hältst Du von dem Breitenvorschlag?
Zum Vergrößern anklicken....
Prinzipiell hast Du da recht,
obschon man inzwischen für nicht-kommerzielle Seiten die 800er-Schiene vernachlässigen kann.
Aber mit der Rechtsausrichtung 'sagst' Du natürlich was wichtiges...
 
So, bitte schön...
Den Rest kannst Du nun selbst machen.

Einfach nach unterem Schema weiter machen.
Also a.bild2:link, a.bild2:visited, a.bild2:hover, a.bild2:active etc.
Musst halt genau arbeiten mit dem Ausschneiden der Bilder.
Und ich würde sie breiter machen.
So das eins an's andere direkt anschliesst.

Link: http://dkmd.de/tests/lili312/lili.html
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>xxx</title>
		<style type="text/css">
		    body {
		    background:url(head.jpg) no-repeat;
		    }
		    #menu {
		    position:absolute;
		    top:228px;
		    left:500px;
		    height:60px;
		    }
		    a.bild1:link, a.bild1:visited, a.bild1:hover, a.bild1:active {
		    width:72px;
		    height:60px;
		    float:left;
		    }
                   a.bild1:hover {
                   background:url(news.jpg);
                   }
		</style>
	</head>
	<body>
      <div id="menu"><a class="bild1" href=""></a></div>
</body>
</html>
 
Zuletzt bearbeitet:
:)
Ersteinmal vielen Dank für den Quellcode. Genauso, wie es auf der Testseite dargestellt ist, wollte ich es haben. Gestern kam auch von Video2Brain die DVD "CSS Design" damit ich auch verstehe was ich dort mache.
Sorry, aber hier gab es ein familiäres Problem und nun kann ich mich wieder der Homepage widmen.
Werde mich gleich heute abend daran setzen. Mal sehen ob ich es weiter umgesetzt bekomme.

Liebe Grüße
Lili0312
 
Wieso ist das Bild nicht nur mittig, sondern auch nach oben verrutscht?

body { background: url(../pics/head.jpg) no-repeat;
background-position:center;
background-color: #b0bec1; }

Liebe Grüße
Lili0312
 
Ich kann mir jetzt gar nicht vorstellen, was Du meinst.
Und wie's jetzt aussieht.
Hast Du's schon so probiert?
Code: 
body {background:url(../pics/head.jpg) no-repeat top center #b0bec1;}
 
So, ich habe es nun passend umgeschrieben. Jetzt ist nur der Nachteil, wenn ich beim Background-Image als Ausrichtung top center eingebe, müßte ich ja die einzelnen Button auch verschieben. Muß ich dann alles Pixelgenau ausmessen oder gibt es da noch eine andere Möglichkeit?

Liebe Grüße
Lili0312
 
Liebe Lili0312,
es wäre sehr hilfreich, wenn Du den Quältext, den Du bisher hast, hier aufzuzeigen.
Denn der Teufel liegt oft im Detail...
Sei zuversichtlich: Wir kriegen das hin!!!
 
Hier der Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Home of Li-Visions</title>
<style type="text/css">
body {
background: url(../pics/head.jpg); background-repeat: no-repeat; background-position: top center; background-color: #b0bec1;
}
#news {
position: absolute;
top:228px;
left:500px;
height:60px;
}
a.news:link, a.news:visited, a.news:hover, a.news:active {
width:125px;
height:60px;
float:left;
}
a.news:hover {
background:url(../pics/news_a.jpg);
}
</style>
</head>
<body>
<div id="news"><a class="news" href=""></a></div>
</body>
</html>
Zum Vergrößern anklicken....

Denn wenn ich das Hintergrundbild mittig setze, stimmen ja die Angaben von #news nicht mehr.

Liebe Grüße vom verzweifelten
Lili0312
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben