zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Imagemaps in CSS?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.12.2003, 15:09
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.10.2003
Beiträge: 159
Nina befindet sich auf einem aufstrebenden Ast
Standard 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;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.12.2003, 15:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

NEIN

HTML und CSS sind ja 2 Veranstaltungen. HTML weiß ja nichts von diesem Hintergrund-Bild.
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.12.2003, 15:21
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.10.2003
Beiträge: 159
Nina befindet sich auf einem aufstrebenden Ast
Standard

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

Danke für die schnelle Antwort
Mit Zitat antworten
  #4 (permalink)  
Alt 23.12.2003, 15:42
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.10.2003
Beiträge: 159
Nina befindet sich auf einem aufstrebenden Ast
Standard

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:


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?
Mit Zitat antworten
  #5 (permalink)  
Alt 23.12.2003, 15:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard



Falls Deine MAPs rechteckig sein können 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:

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.
__________________
</ulle>
Mit Zitat antworten
  #6 (permalink)  
Alt 23.12.2003, 15:48
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.10.2003
Beiträge: 159
Nina befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #7 (permalink)  
Alt 23.12.2003, 16:00
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.10.2003
Beiträge: 159
Nina befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 23.12.2003, 16:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
</ulle>
Mit Zitat antworten
  #9 (permalink)  
Alt 23.12.2003, 17:02
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.10.2003
Beiträge: 159
Nina befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.12.2003, 17:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Ja wo sind den die LINKs,

gibt diesen doch erstmal eine Hintergrundfarbe damit Du sie vernüftig siehst
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
Einbindung von frei erhältlichen Scripten - CSS Problem DonL CSS 1 22.01.2011 17:09
MYspace mehr als nur CSS oder ? Vinceone CSS 0 12.07.2007 03:21
Eric Meyer's CSS Petty Ressourcen 0 21.11.2005 09:18
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 12:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:45 Uhr.