nicht angemeldet
Imagemap-Problematik
Hallo,
ich versuche eine Imagemap zu erstellen, bei der es möglich ist, einzelne Bereiche eines Bildes gegen einen anderen Bereich auszutauschen, der Script sieht folgendermassen aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Sprites: Image Slicing's Kiss of Death</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style media="screen">
#blobs {
width: 300px;
height: 150px;
background: url(blobs.gif);
margin: 10px auto; padding: 0;
position: relative;
}
#blobs li {margin: 0; padding: 0; list-style: none; display: block; position: absolute;}
#blobs a {display: block;}
#blob1 {left: 9px; top: 7px; width: 86px; height: 130px;}
#blob2 {left: 77px; top: 16px; width: 79px; height: 86px;}
#blob3 {left: 160px; top: 0px; width: 112px; height: 77px;}
#blob4 {left: 173px; top: 57px; width: 120px; height: 80px;}
#blob5 {left: 110px; top: 102px; width: 98px; height: 45px;}
#blob1 a {height: 130px;}
#blob2 a {height: 86px;}
#blob3 a {height: 77px;}
#blob4 a {height: 80px;}
#blob5 a {height: 45px;}
#blob1 a:hover {background: url(blobs.gif) -10px -307px no-repeat;}
#blob2 a:hover {background: url(blobs.gif) -77px -166px no-repeat;}
#blob3 a:hover {background: url(blobs.gif) -160px -300px no-repeat;}
#blob4 a:hover {background: url(blobs.gif) -173px -207px no-repeat;}
#blob5 a:hover {background: url(blobs.gif) -110px -402px no-repeat;}
</style>
</head>
<body>
<ul id="blobs">
<li id="blob1"><a href="#"></a></li>
<li id="blob2"><a href="#"></a></li>
<li id="blob3"><a href="#"></a></li>
<li id="blob4"><a href="#"></a></li>
<li id="blob5"><a href="#"></a></li>
</ul>
</body>
</html>
Ich muss die Bereiche allerdings als Polygone definieren können, weiss aber nicht, wie ich das in diesem Script realisieren kann.
Hier ist ein link wie es aussieht, Quelltext kann angezeigt werden:
http://www.alistapart.com/d/sprites/ala-blobs2.html
Das verwendete Image findet ihr hier:
http://www.alistapart.com/d/sprites/blobs.gif
Vielen Dank im Voraus.
-
hallo,
ich versuche eine Imagemap zu erstellen
zumindest nach deinem Quelltext tust du das nicht. Da gibt es weder eine Image Map noch das kleinste Fitzelchen Javascript.
bei der es möglich ist, einzelne Bereiche eines Bildes gegen einen anderen Bereich auszutauschen
Dafür gibt es sowohl Lösungen mit CSS wie auch Lösungen mit Javascript. Was gefällt dir denn an den bisherigen hover-Effekten nicht?
der Script sieht folgendermassen aus:
Naja, es ist halt nicht "der", sondern "das" Script - aber vor allem: wenn du nur einen Scriptbereich angeben möchtest (was ja durchaus erwünscht ist), ist das doch erheblich weniger als gleich der gesamte Quelltext deiner (X)HTML-Datei.
Ich muss die Bereiche allerdings als Polygone definieren können, weiss aber nicht, wie ich das in diesem Script realisieren kann.
Was meinst du mit "Polygon"? Wieviele Ecken soll es denn haben - und aus welchen Gründen?
Hier ist ein link wie es aussieht, Quelltext kann angezeigt werden:
http://www.alistapart.com/d/sprites/ala-blobs2.htmlJa, ganz nett. Aber es macht nicht klar, wo nun eigentlich dein Problem liegt. Wenn die Verweise funktionieren, sieht das ja vermutlich innerhlab deiner künftigen Seite ganz adrett aus.
Grüße aus Berlin
Christoph S.
-
Hallo Levingard
Ich muss die Bereiche allerdings als Polygone definieren können, weiss aber nicht, wie ich das in diesem Script realisieren kann.
Eine Suche im Archiv könnte hilfreich sein.
Dort findet man z.B. Landkarte, Regionen bei mouseover einfaerben.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!