Hotspot Problem

    Hallo liebe Mitglieder,

    leider hat unser Webmensch unsere Firma verlassen und ich bin der arme Teufel der sich jetzt schnell in Dreamweaver arbeiten muss :D

    Folgendes Problem:

    Ich habe eine Tabelle erstellt die lediglich aus 1 x Spalte und 3 Zeilen besteht. In der obersten Zeile habe ich eine in Photoshop erstellte Navigationsleiste (gif) eingefügt. Auf dieser steht HOME, EVENTS, GALLERY etc.

    Ich wollte nun im Dreamweaver CS4 einen Hotspot auf HOME und GALLERY etc legen, umso auf die jeweiligen Unterseiten zu gelangen. Klappt auch alles prima. Einzigstes Problem = ich habe die selben Hotspots in der Zeile unten drunter noch einmal! Dort wo eigentlich dann mein Mengentext stehen sollte. Ich schaffe es nicht, dass er mir dass nur in der obersten Zeile macht. :confused:

    Hier mein verwendeter Code:

    </TR>
    </TABLE>

    <map name="menuMap" id="menuMap">
    <area shape="rect" coords="4,52,42,80" href="#" />
    </map>
    </body>
    </html>

    Hm... vielleicht weis ein schlauer Kopf von euch Rat?

    Grüße Ben

    Also Tabellen-Layouts sind böse ;D

    Aber egal. Also soweit ich richtig verstehe, willst du ein Menü aus Bildern machen, richtig?
    Anstatt mit einer Image-Map würde ich die Bilder einfach zerschneiden und mit <a href="..."><img src="..." alt="..." /></a> das Menü machen.
    Ist auch viel suchmaschinenfreundlicher und barrierefrei.

    Falls du noch etwas benötigst, wäre ein Link, oder ein volles Beispiel gut

    Something big is coming. And there will be pirates and ninjas and unicorns...

    Hm... das Bild Stückeln würd eich auschließen. Gibt es denn keine Möglichkeit nur bestimmte Hotspots auf dem Bild anzulegen ohne dass er es in die untere Tabelle mit übernimmt?
    Ich hätt egerne dass die Hotspots NUR auf dem oberen Bild sind - er legt es mir aber auch noch auf das untere Bild in der zweiten Zeile... wo ist der Fehler?

    Hier mein gesamter "Saustall" Code :D (OHNE HOTSPOTS)

    <body>
    <BODY BGCOLOR="#000000">
    <div align="center">
    <br />

    <TABLE>
    <TR>

    <TD width="800" height="417"><img src="bilder/home_bild.gif" alt="Menu" name="menu" width="800" height="417" border="0" usemap="#menuMap" id="menu" /></TD>


    </TR>
    <TR>

    <TD height="266"><img src="bilder/body_Verlauf.gif" alt="Menu" name="menu" width="800" height="417" border="0" usemap="#menuMap" id="menu" />&nbsp;</TD>

    </TR>
    <TR>

    <TD ALIGN="CENTER" border="0">
    <FONT COLOR="#999999"><FONT FACE="Arial"><FONT SIZE="1">&copy;2010 Sports Lounge Ramstein v 1.0</FONT>

    </TD>

    </TR>
    </TABLE>

    </body>
    </html>

    Ich sag nur das:

    Div machen, Höhe, Breite festlegen (laut Bild), Bild als Hintergrund nehmen.
    Im HTML Code die Links mit <a> festlegen.

    Jedes A Element positionierst du dann mit position: absolute durch top: xxx px und left: xxx px.
    Natürlich noch jedes A Element durch display: block zu einem Block Element verwandeln.

    So mach ich das immer und ich finde das die eleganteste Lösung, als imagemap

    Ach, sorry, wennste über die ganze Breite brauchst, dann ist absolute nicht notwendig.
    Absolute ist nur dann sinnvoll, wenn der "Link" irgendwo auf dem Bild positioniert wird.
    Aber eben, wenn alles untereinander ist, dann ist nur ein margin notwendig.

    Zitat von bandit600

    2x usemap="#menuMap" ???

    Hallo bandit600 & Thonixx

    Erstmal danke für die Hilfe - hat tatsächlich geklappt und ihr habt mir sehr geholfen - DAUMEN HOCH :)
    Habe bei meinem zweiten Bild einfach das "usemap" rausgemacht und siehe da - es hat mein Problem gelöst. Dass ich das die ganze Zeit überlesen habe :confused: - na na na einfach doof eben :D

    Grüße Ben