HTML - Hilfe! Bildskalierung und Verlinken im Bild

N

Nagelschere

Grünschnabel
Hi liebe Community,
Ich versuche gerade verzweifelt eine Seite für meinen Kurs zu gestalten.
Das Bild habe ich soweit fertig und auch schon hochgeladen, nur will es mir nicht gelingen ein bestimmtes Segment des Bildes mit einem Link zu versehen.
Das Bild welches ich benutze ist das hier: http://img52.imageshack.us/img52/9711/kurs12.jpg

Das "FM 1" soll halt ein Link sein und auf ne bestimmte Seite führen(die auch schon fertig ist).
Hab das ganze dann mit mit area + coords gemacht, also so:

<map name="FM 1">
<area shape="rect" coords="1050,145,1180,205"
href="http://www.meineseite.de" >

Klappt aber alles nicht und bringt mich auch zu meiner zweiten Frage: Das ganze sieht bei meiner Auflösung echt super aus, aber bei einer kleineren Auflösung wird das Bild ganz komisch zugeschnitten :(

Das Bild selber hab ich folgendermaßen eingebunden:

<style type="text/css">
<!--
body {background:url(http://img52.imageshack.us/img52/9711/kurs12.jpg) no-repeat center left fixed; }
//-->
</style>

Im Grunde suche ich eine Lösung, die es mir ermöglicht das Bild bei verschiedenen Auflösungen skalieren zu lassen, wobei der Link trotzdem weiterhin über dem Schriftzug "Fm 1" liegt!

Ich bin eine totale Anfängerin und brauche auch eigentlich nur das zu wissen um fertig zu sein! Bitte helft mir :-)

Danke für jede Antwort.
 
Hallo,

lege ein absolut positioniertes A-Element, das als Blockelement deklariert wird und dessen top-/left-Positionswerte sowie dessen Breite und Höhe in Prozent angegeben werden, über das "FM 1"-Rechteck.
 
Danke für deine schnelle Antwort!
Aber......was?
Könntets du dir vielleicht die Mühe machen und einem leidenden, zu html gezwungenem Mädchen helfen und das ganze verständlicher auszudrücken?^^
 
Nagelschere hat gesagt.:
Danke für deine schnelle Antwort!
Aber......was?
Könntets du dir vielleicht die Mühe machen ...
Zum Vergrößern anklicken....
Ja klar. Wenn du dir bitte die Mühe machst und hier dein relevantes HTML und (falls vorhanden) zugehöriges CSS zu zeigen. Ich vermute stark, dass es sich bei deiner Frage um eine HTML-Seite und nicht nur um ein Bildchen handelt.
 
Hallo,

die Verwendung einer verweissensitiven Grafik für eine Seite, die insgesamt skalierbar sein soll, ist insofern ungeeignet, da die Browser nur Shapes mit Pixelangaben und keine prozentualen Angaben unterstützen. Besser wäre die Seite in zwei Teile aufzugliedern:
  • Ein IMG-Element, das die volle Breite des Viewports einnimmt und als "full-screen"-Hintergrundbild fungiert (wurde hier schon öfter besprochen)
  • und einem absolut positioniertem A-Element (oder auch einem Listenmenü), das als Inhalt eine eigene Grafik (kleines "FM_1"-Bild) hat, über dem Pseudo-Hintergrundbild liegt und durch prozentuale Größenangaben ebenfalls über den Viewport skalierbar ist.

Die prozentuale Position und Größe des A-Elements ("FM_1"-Grafik) müssen aus der Gesamtgröße des Pseudo-Hintergrundbildes berechnet werden: Angenommen dass die Größe des "FM_1"-Bildes (7,3% × 5,5%) beträgt und seine linke obere Ecke bei (62,9% × 13,8%) des gesamten Pseudo-Hintergrundbildes positioniert ist, dann könnte das zugehörige HTML/CSS beispielsweise so aussehen:
HTML: 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Kurs 12</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      html, body {
        width: 100%;
        height: 100%;
        background-color: #000;
        color: #fff;
      }
      #bgDummy {
        position: relative;
        width: 100%;
      }
      #bgDummy img {
        width: 100%;
        border: 0;
      }
      #bgDummy a {
        position: absolute; /* => Blockelement */
        top: 13.8%;
        left: 62.9%;
        width: 7.3%;
        height: 5.5%;
        text-decoration: none;
        outline: none;
      }
    </style>
  </head>
  <body>
    <div id="bgDummy">
      <img src="kurs12-solo.jpg" alt="" title="">
      <a href="#">
        <img src="fm1.jpg" alt="" title="">
      </a>
    </div>
  </body>
</html>
Ich kann das i.A. mit dem IE6 nicht überprüfen und hoffe, dass das auch dort funktioniert. :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück