rollover <map> ??

bona · 11.01.2006, 12:40

hallo zusammen, bin mir nicht ganz sicher, ob ich im richtigen forum gelandet bin...
ich habe im banner eine mailadresse, und mit dem <map></map> habe ich den bereich definiert, auf den man klicken muss, damit man an diese mailadresse ein mail schreiben kann (einfach ein link..)

kann ich mit dem <map> auch zusätzlich ein rollover machen??

das z.b. dann ein bild zum vorschein kommt, mit der mailadresse nur in einer anderen farbe??

gruss bona

Nightline · 11.01.2006, 12:51

Mit <map> definierst du nur einen unsichtbaren Bereich über einem Bild, der als Link verwendet werden soll. Du kannst hier dann natürlich leicht mit "onmouseover" ein anderes Bild anzeigen lassen, aber das betrifft eben den ganzen Banner und nicht nur den verlinkten Bereich.

Um es richtig zu machen, müsstest du den Banner in Photoshop/ImageReady slicen (zerschneiden), aber ob dir der Aufwand das wert ist?

321 · 11.01.2006, 15:27

im <area kannst Du ein alt="...." angeben, evt. auch title="..." ???

dann <area shape=.... href=... alt="aaa@bbb.cc"

Nicht genau was Du willst, aber vllt. hilfts auch.

321 · 11.01.2006, 15:38

da JavaScript im <area funktioniert, kannst Du damit auch manipulieren.
zB. ein kleines Div mit der Mailadresse einblenden.

Fahre einfach mal über 'Karte', ich hatte kein Bild zum Beispiel.

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title
>Verweis-sensitive Grafiken definieren
</title>
</head>
<body
><h1>Schnell zur Stadt oder Region Ihrer Wahl!</h1
><div
><map name="Landkarte"
><area shape="rect" coords="11,10,59,29" 
href="http://www.koblenz.de/" alt="Koblenz" 
onmouseover="alert('Jepp!')" 
></map>
</div>
<p><img 
src="karte.png" width="345" height="312" alt="Karte" usemap="#Landkarte"
></p>
</body>
</html>

bona · 11.01.2006, 15:57

hmmm..

@nightline:
Dass mit dem slicen habe ich schon einmal gemacht, doch wenn es das banner sehr langsam geladen wird, sieht es komisch aus(immer ein teilbild nach dem anderen) desshalb suchte ich nach einer anderen möglichkeit und bin auf das <map> gestossen.

@321 (1):
das mit dem alt=... ist doch, das, was es anzeigt, wenn das bild nicht geladen wird.. oder nicht?? (bin mir nicht sicher

)

@321 (2):
würde gerne mal über die karte fahren, doch wo ist der link?? :P
sollte nicht 'karte' der link sein??

321 · 11.01.2006, 16:53

Das ALT="...." wird angezeigt, wenn Du über eine Area fährst!
Probiere aber auch mal zusätzlich zu alt title="...."

Ich habe keinen Link, nimm den geposteten Code.
Den mal kopieren und in Meiner Signatur auf HTML-Tester gehn und dort einfügen. Dann auf [Testen] klicken.

Ein neues fenster geht auf:
Neben dem nicht vorh. Bild steht 'Karte'
fahre darüber, es ist eine/die Area der Map.

hero-master · 11.01.2006, 17:01

Zitat:

Zitat von 321

Das ALT="...." wird angezeigt, wenn Du über eine Area fährst!

Das macht jedoch nur der IE, warum auch immer

Dafür ist title="" da

321 · 11.01.2006, 18:56

Ja, title ist korrekt. Habs ja auch erwähnt und hoffe immer,
dass man dann zu solchen Attributen die einem neu sind,
auch nachlesen geht.
Grundzipiell funzt aber, was ich schrieb.

itz · 12.01.2006, 10:42

Hi,

Zitat:

kann ich mit dem <map> auch zusätzlich ein rollover machen??

Jein ;-)

Aber alternativ könntest Du aus dem <map> eine Liste machen, schau Dir mal folgendes an:

http://www.cssplay.co.uk/menu/imap.html

Unter Tutorials oben rechts auf der Seite ist umrissen wie es geht.

Gruß Chris

321 · 12.01.2006, 22:41

wenn ich dort Example 3 und Example 4 anschau, bin ich nicht gerade begeistert.

Nightline · 12.01.2006, 23:18

Zitat:

Zitat von 321

wenn ich dort Example 3 und Example 4 anschau, bin ich nicht gerade begeistert.

Das find ich ja mal seltsam.

Funktioniert ja tatsächlich im IE und FF nicht, dachte schon wieder: "Immer dieser IE!"

itz · 13.01.2006, 09:16

Hi,

Zitat:

Zitat von 321

wenn ich dort Example 3 und Example 4 anschau, bin ich nicht gerade begeistert.

hhmmm?! Die Examples sind der Reihe nach als Schritte aufgeführt und Example 1 bis 9 zeigen nur den Weg zum Ziel.

Ich finde das Konzept perfekt, man kann in zig Richtungen "spielen" und es ist valide.

Gruß Chris

321 · 13.01.2006, 09:54

Nichts gegen die Vorgehensweise und den Beschrieb aber das Ergebnis, welches in den beiden Links zu sehen ist, hat herzlich wenig mit dem zu tun, was man unter einer Image-Map versteht.

Und bei 4 die Overprints, tz tz ...

Da kannst genau so gut ene Grafik als Hintergrund von einigen Text-Links nehmen.