[HTML] Layout und Idee... und nun ?!

**Sportfreund** · 02.10.2005, 08:57

Also habe jetzt folgenden Plan:

Ich zerlege das Bild in 5 Teile:

Einmal den Teil oben, dann links, dann die Mitte (Textarea), dann rechts und den Teil unten.

Das baue ich dann mit Hilfe von einer Tabelle wieder zusammen.

In den 4 Teilen um die Textarea herum baue ich 4 Imagemaps (geht da Rollover-Effekt ? Das muss nämlich sein, sonst funktioniert das nicht... und ich will keine Vierecke, sondern genaue Bereiche um die Gegenstände heurm)... in de rMitte bleibt dann die Inhaltsseite..

Allerdings dürfte sich die Seite bei jedem Klick neu laden, was zu unerträglichen Ladezeiten führt. Kann man das später irgendwie so einstellen, dass sich ab dann nur noch die Textarea lädt, während der Rest bleibt ?

Oder muss ich dazu mit Frames teilen?

**sgt** · 02.10.2005, 09:46

Rollover-Effekt bei Image-Maps geht so ohne weiteres nicht.
Ich würde es so versuchen:
Lege verschiedene DIV-Container mit Positionsangaben (s. CSS) auf dein Hintergrundbild. Dort kannst du dann die entspr. Ausschnitte deines Hintergundbildes als Image ablegen und einen Rollover-Effekt für jeden Bild-Link erstellen.
Als Textbereich würde ich in diesem Fall ein IFrame erstellen. Das kannst du ebenfalls beliebieg positionieren. Es dient gleichzeitig als Container für die entsprechende HTML-Datei, die du zu einem Link anzeigen lassen willst.
IFRAMES (oder Frames überhaupt) sind zwar nicht besonders beliebt, aber in deinem Fall wohl die einfachere Alternative.

Gruß
Stephan

**Sportfreund** · 02.10.2005, 12:57

Klingt wirklich sehr gut, hab aber 3 Fragen:

Meine Hauptgrafik als Hintergrund?

Kann ich dann wirklich auch die Gegenstände ausschneiden und dann nur die Bereiche "berühren", wo auch der Rollovereffekt stattfinden soll (keine Vierecke)?

Wie sol ldenn bei dem Prinzip der Grundaufbau aussehen ?

Also wie man das mit Div und CSS aufteilt müsste ja eigentlich gehen, aber wie intergrier ich da ein iFrame?

**sgt** · 02.10.2005, 14:10

Deine Hauptgrafik als Hintergrund!
Sonst müßtest du ja bei jedem Mouse-Over-Event die große Grafik mit farblich geändertem Bereich neu laden.
So machst du aus jedem Ausschnit ein ImageMap und generierst dazu ein Mousover-Event.
Sieh dir dazu mal an, wie das bei Landkarten gemacht wird, bei denen z.B. das Bundesland beim "Drüberfahren" hervorgehoben wird (z.b. http://www.toyota.de/dealers/index.asp).

Das IFrame baust du genauso ein, wie einen div-Container.
Über das style-Attribut kannst du u.a. die Position bestimmen.
Näheres siehe SELFHTML (etc.).

Gruß
Stephan

**Sportfreund** · 02.10.2005, 15:20

Also nochmal..

1. Mein Bild als Hintergrund (überall und das bild ganz lassen, richtig?)

2. Mit Div die Seite so aufteilen, dass in die Mitte das iframe mit Textarea kommt und außen herum Image-Maps

3. Zu jedem Gegenstand ne eigene Imagemap ? Daversteh ich dich irgendwie nicht...

Ich hab das in links, rechts, oben und unten aufgeteilt...

PS: Hab den Code von der Toyota-Seite mal ausprobiert, anhand des Handys:

<html>

<SCRIPT language=javascript>
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

//MM_preloadImages('handy.gif')

</script>

<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<img src="links.jpg" width="366" height="384" border="0" alt="" title="" usemap="#dealer_de" name="dmap" />
<map name="dealer_de">
<area shape="poly" href="" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('dmap','','handy.gif',1)" alt="Schlesw. Holst." coords="35,26,36,27,93,35,87,73,26,64,35,27">
</map>

</body>
</html>

Funktioniert zwar, aber statt dass der "neue", farblich veränderte Ausschnitt auf dem alten angezeigt wird, wird das Bild auf das Gesamtbild verzerrt / vergrößtert

**sgt** · 02.10.2005, 16:51

Schick mir mal deine Mail-Adresse (s. deine private Nachricht in diesem Portal).
Dann habe ich ein Beispiel für dich, dass dir weiterhelfen sollte.

Gruß
Stephan

**Sportfreund** · 02.10.2005, 17:07

funktioniert irgendwie nicht mit der PM... egal: captainkomisch@web.de

**Sportfreund** · 02.10.2005, 18:23

ok, läuft doch, bleibt die Frage unter mir...

ich hab das hintergrundbild in de rmitte, also sollen sich auch die koordinaten danach richten

**Sportfreund** · 02.10.2005, 18:47

Sobald ich eigene Koordinaten angebe um das auf mein leicht verändertes Design anzupassen geht alles drunter und drüber...

Außerdem sollden die sich an dem DIV "#home" orientieren und von da aus anfangen, pixel zurAusrichtung zu zählen

**sgt** · 03.10.2005, 09:09

Dann sieh dir mal den Unterschied zwischen absoluter und relativer Positionierung an.
Noch ein Stichwort: z-index.
Das Beispiel, das ich dir geschickt habe, basiert auf deiner Vorlage (s. Link in deinem ersten Posting). Um es an deinen Vorstellungen anzupassen, mußt du dich auch selber etwas in CSS einlesen.
Gib den DIVs noch Angaben für Höhe und Breite (je nach Größe des beinhalteten Bildausschnitts).
Wenn du dein Bild als Hintergrund der HTML-Seite definierst, egal ob zentriert oder sonst wie, dann sollten im Allgemeinen auch die Koordinaten passen.

Gruß
Stephan

**Sportfreund** · 03.10.2005, 10:25

Irgendwie ist es so gut wie unmöglich das zu kombinieren...

<style type="text/css">
#home {
background-image:url(home.jpg); background-repeat:no-repeat;
background-position:center;
background-color:white; height:550px;
background-attachment:fixed; padding:0px;}
</style>

.... javascript.....

<body>
<div id="home" height="733" width="550" style="position:absolute top:550px; width:733px">

<div style="position:absolute; left

x; top

x">
<img src="pix/ball1.jpg" width="72" height="74" border="0" usemap="#ImMap2" name="ball">
<map name="ImMap2">
<area shape=circle coords="36,36,35" href="javascript:create_func_string(1)" onMouseOver="ball.src='pix/ball2.jpg'" onMouseOut="ball.src='pix/ball1.jpg'">
<area shape=default NOHREF>
</map>
<div id="Content1" class="std" style="position:absolute; left:90px; top:-290px; width:270px; height:370px; z-index:3; visibility: hidden; text-align:left; border-style:solid; border-width:1px" align="center">
<iframe src="fussball.html" width="270" height="370" name="SELFHTML_in_a_box">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
Sie können die eingebettete Seite über den folgenden Verweis
aufrufen: <a href="fussball.html">SELFHTML</a></p>
</iframe>
</div>

</div>
</body>
</html>

Also mein Ziel ist es, das Hintergrundbild aus div="home" in die Mitte zu kriegen und dass der Ball sich da dran orientiert (also dessen left & top-Pixelangaben), damit es bei höheren Auflösungen nicht verruscht...

**sgt** · 03.10.2005, 10:46

Du hast das DIV-Tag mit dem Ball nicht abgeschlossen.
Außerdem brauchst du keinen DIV-Container für das IFrame. Dieses
kannst Du direkt über das style-Attribut (u.a.) positionieren.

Gruß
Stephan

**Sportfreund** · 03.10.2005, 11:36

meinst du, dass nur ein </div> fehlt ?

**sgt** · 03.10.2005, 11:49

Ja.
Zumindest kann das schonmal zu Problemen führen.

[HTML] Layout und Idee... und nun ?!