Bereich mit Koordinaten festlegen
- Ersteller VirusX
- Erstellt am
- Status
thuemmy
Aktives Mitglied
Meinst Du sowas SELFHTML: HTML/XHTML / Grafiken / Verweis-sensitive Grafiken (Image Maps) ?
Gruß thuemmy
Gruß thuemmy
Das geht schonmal in die richtige Richtung ;)
Also hier ist meine Buttonleiste:
Das ganze ist ein Bild, und ich möchte jetzt mit Koordinaten das Bild in Buttons unterteilen und in diesen Regionen dort soll dann ein Wort mit hoover stehen.
(Hier: Player's won't Die, die linke Buttonleiste wurde auch so erstellt)
EDIT:
So, ich habe jetzt mal versucht, die area Elemente anzuwenden, aber es funktioniert nicht:
Und so siehts aus:
Normal sollte es so aussehen:
Also hier ist meine Buttonleiste:
Das ganze ist ein Bild, und ich möchte jetzt mit Koordinaten das Bild in Buttons unterteilen und in diesen Regionen dort soll dann ein Wort mit hoover stehen.
(Hier: Player's won't Die, die linke Buttonleiste wurde auch so erstellt)
EDIT:
So, ich habe jetzt mal versucht, die area Elemente anzuwenden, aber es funktioniert nicht:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Steam Template</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Main">
<map>
<area shape="rect" coords="80,154,150,180"
href="" title="News"></area>
<area shape="rect" coords="168,154,238, 180"
href="" alt="Forum" title="Forum"></area>
<area shape="rect" coords="256,154,327,180"
href="" alt="Roster" title="Roster"></area>
<area shape="rect" coords="334,154,413,180"
href="" alt="Results" title="Results"></area>
<area shape="rect" coords="433,154,500,180"
href="" alt="Guestbook" title="Guestbook"></area>
<area shape="rect" coords="522,154,587,180"
href="" alt="Join us" title="Join us"></area>
<area shape="rect" coords="610,154,680,180"
href="" alt="Fight us" title="Fight us"></area>
<area shape="rect" coords="698,154,767,180"
href="" alt="History" title="History"></area>
<area shape="rect" coords="786,154,854,180"
href="" alt="Userlist" title="Userlist"></area>
<area shape="rect" coords="877,154,942,180"
href="" alt="Imprintk" title="Imprint"></area>
</maps>
</div>
</body>
</html>
Code:
@charset "utf-8";
/* CSS Document */
body {
background-color: #196143;
}
#Main {
background-image: url(Steam_Template.jpg);
width: 1024px;
height: 868px;
display: block;
margin: 0;
border: 0;
}Und so siehts aus:
Normal sollte es so aussehen:
Zuletzt bearbeitet:
E
Efchen
Guest
Ich würde sowas gar nicht mit einem einzigen Bild machen.
Wie willst Du denn da auch den Alternativtext angeben, wie sollen damit dann Leute ohne Imageanzeige navigieren?
Und was machst Du, wenn jemand die Schrift vergrößert?
Das sollte HTML-technisch eine Liste sein und CSS-technisch weist Du jedem einzelnen Tab eine Hintergrundgrafik zu. Wobei das nach wie vor beim Vergrößern der Schrift in die Hose gehen wird.
Wie willst Du denn da auch den Alternativtext angeben, wie sollen damit dann Leute ohne Imageanzeige navigieren?
Und was machst Du, wenn jemand die Schrift vergrößert?
Das sollte HTML-technisch eine Liste sein und CSS-technisch weist Du jedem einzelnen Tab eine Hintergrundgrafik zu. Wobei das nach wie vor beim Vergrößern der Schrift in die Hose gehen wird.
Okay...
Was muss ich denn machen, damit das bei Schriftvergrößerung nicht in die Hose geht?
E
Efchen
Guest
Mir würde spontan nur einfallen, entweder den runden Rahmen durch aufwändige div-Suppe ersetzen, auf CSS3 warten, oder aber das Design den Möglichkeiten anzupassen.
Ich würde evtl. proprietäre Mozilla-Eigenschaften benutzen, um einen runden Rahmen zu erhalten und andere Browser hätten dann einen eckigen.
Ich würde evtl. proprietäre Mozilla-Eigenschaften benutzen, um einen runden Rahmen zu erhalten und andere Browser hätten dann einen eckigen.
- Status
