XHTMLforum - Imagemaps in CSS?

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Imagemaps in CSS? (http://xhtmlforum.de/showthread.php?t=32150)

Imagemaps in CSS?

Ich möchte bei der Page gerne oben die Navigation mit einer Imagemap verlinken. Das Problem ist aber, dass ich das Bild auf das die Imagemap angewendet werden soll in einem Container als Hintergrund abgelegt habe. Kann ich das usemap="#header" jetzt auch irgendwie diesem Container zuweisen?

http://nina.gotdns.com/css_test5/

Imagemap die ich gerne verwenden würde:

Code:

[img]img/header.jpg[/img]



<map name="header">

<area shape="rect" coords="202,159,154,139" href="index.php">

<area shape="rect" coords="208,139,266,159" href="forum.php">

<area shape="rect" coords="278,139,325,158" href="infos.php">

<area shape="rect" coords="336,139,427,159" href="community.php">

<area shape="rect" coords="439,139,496,159" href="scripts.php">

<area shape="rect" coords="505,139,598,159" href="multimedia.php">

<area shape="rect" coords="607,139,693,159" href="sonstiges.php">

</map>

Headercontainer:

Code:

#header

        {

        background-image: url(../img/header.jpg);

        background-color:#666666;

        width:900px;

        height:200px;

        margin:0px auto;

}

NEIN :!:

HTML und CSS sind ja 2 Veranstaltungen. HTML weiß ja nichts von diesem Hintergrund-Bild.

Hm, also keine Chance das irgendwie zu machen :(
Naja, werd' ich mir was anderes überlegen müssen ^^

Danke für die schnelle Antwort :)

Hm, ich hab grad eine etwas aufwenigere Version statt den Imagemaps probiert und bin kläglich gescheitert (wie immer ;)).

Und zwar wollte ich einen Container aufbauen in dem ich dann die verlinkten Bereiche habe. Irgendwie geht das aber schief, weil er plötzlich den Hintergrund doppelt anlegt.
http://nina.gotdns.com/css_test6/

So hat es zuvor ausgesehen als die Navigation noch nicht eingebaut war: http://nina.gotdns.com/css_test5/

So sind derzeit im header die Container aufgebaut:
http://nina.gotdns.com/css_test6/beispiel.gif

Code:

#header

        {

        background-image: url(../img/header.jpg);

        background-color:#666666;

        width:900px;

        height:200px;

        margin:0px auto;

}

#kurzinfo

        {

         margin-top:40px;

         margin-bottom:90px;

         margin-right:33px;

         margin-left:716px;

         color:#C5C5C5;

         font-size:10px; 

         font-weight:bold; 

}

#topnav

        {

         margin-top:140px;

         margin-bottom:41px;

         margin-right:211px;

         margin-left:155px;

}

Woran liegt es dass auch diese Version nicht klappt?

:idea:

Falls Deine MAPs rechteckig sein können :arrow: Vorschlag:

Alle Links innerhalb des #header:

Code:



#header a.link1 , #header a.link2 , #header a.link3, usw,   {

  display: block;

  float: left;

  position: relative;

}



#header a.link1 {

  width: 200px; 

  height: 20px; 

  top: 210px; 

  left: -246px;

}

 usw.

Prinzip:

:arrow: Jeder LINK hat eine eigene Klasse. Alle Links bekommen eine Relative Postion, relativ zum normalen Textfluss, innerhalb des #header. Dann noch eine bestimmte Größe und zum guten Schluß sollten diese durchsichtig sein (logisch).

Übrigens: Falls die Größe eines LINKs verändert wird, ändern sich auch die Positionen (Startpunkt zur relativen Berechnung) im normalen TEXT-Fluß

Ist ein Fummelei aber es geht, habe damit mal eine Landkarte verlinkt.

Hm, mal schaun ob ich das hinbekomm. Danke schon mal für den Tipp :)

Aber auch wenn ich jetzt versuchen werde deine Version zu nutzen, hast du eine Ahnung weshalb mein Versuch (Post über deinem) nicht funktionierte? :)

Hier mein Versuch:

Code:

#header a.link1, #header a.link2, #header a.link3, #header a.link4, #header a.link5, #header a.link6, #header a.link7

        { 

        display: block; 

        float: left; 

        position: relative; 

} 

#header a.link1 

        { 

        width: 51px; 

        height: 19px; 

        top: 140px; 

        left: -155px; 

}

#header a.link2 

        { 

        width: 67px; 

        height: 19px; 

        top: 140px; 

        left: -206px; 

}

#header a.link3 

        { 

        width: 59px; 

        height: 19px; 

        top: 140px; 

        left: -273px; 

}

#header a.link4 

        { 

        width: 101px; 

        height: 19px; 

        top: 140px; 

        left: -332px; 

}

#header a.link5 

        { 

        width: 70px; 

        height: 19px; 

        top: 140px; 

        left: -433px; 

}

#header a.link6 

        { 

        width: 101px; 

        height: 19px; 

        top: 140px; 

        left: -503px; 

}

#header a.link7 

        { 

        width: 85px; 

        height: 19px; 

        top: 140px; 

        left: -404px; 

}

Und wie sollte ich das jetzt im Quellcode hinschreiben damit ich da endlich meine Navigationslinks habe? Innerhalb des Header-Containers die ganzen Link-Container untereinander und dahinein durchsichtige-verlinkte Bilder (?):

Code:

  <div id="header">

    <div id="kurzinfo">

        Beta: Q1/Q2 2004




        Release: 2004




        Member: 2448




        Posts: 1245842

    </div>



    <div id="a.link1">[img]img/px.gif[/img]</div>

    <div id="a.link2">[img]img/px.gif[/img]</div>

    <div id="a.link3">[img]img/px.gif[/img]</div>

    <div id="a.link4">[img]img/px.gif[/img]</div>

    <div id="a.link5">[img]img/px.gif[/img]</div>

    <div id="a.link6">[img]img/px.gif[/img]</div>

    <div id="a.link7">[img]img/px.gif[/img]</div>



  </div>

Das Ergebnis davon wäre wie das von mir oben angesprochene Problem, dass der Header wiederholt wird:
http://nina.gotdns.com/css_test7/

Sorry, wenn ich mich dumm anstelle ... ich versuch einfach das Prinzip zu verstehen und laufe durchgehend gegen eine Wand :)

Code:

<div id="a.link1">[img]img/px.gif[/img]</div>

So nicht......

so:

Code:

<a href="index.php" class="link1">

[img]img/px.gif[/img]

</a>

Um den LINK kommt kein Container, mit [display: block] ist dieser doch schon ein BLOCK-Element.

Die Größe des "BLOCK-Links" ist doch durch die height/width-Angabe eingestellt, deshalb benötigt das IMG nicht unbedingt eine Größe.

Ich gehe davon aus das px.gif ein Blind-GIF 1x1 Pixel ist.

Yup is ein Blindgif (1x1)
Aber irgendwie scheint das jetzt trotzdem nicht zu gehen:
http://nina.gotdns.com/css_test7/

Code:

  <div id="header">

    <div id="kurzinfo">

        Beta: Q1/Q2 2004




        Release: 2004




        Member: 2448




        Posts: 1245842

    </div>



    [img]img/px.gif[/img]

    [img]img/px.gif[/img]

    [img]img/px.gif[/img]

    [img]img/px.gif[/img]

    [img]img/px.gif[/img]

    [img]img/px.gif[/img]

    [img]img/px.gif[/img]



  </div>

Ja wo sind den die LINKs,

gibt diesen doch erstmal eine Hintergrundfarbe damit Du sie vernüftig siehst