HTML Dünamische Überblendungen

SizZle · 17. Oktober 2011

Hallo zusammen,
ich arbeite zur Zeit an einer kleinen Homepage.
Diese besteht aus drei Buttons, einem Bild und einem Text auf einem Bild (alles untereinander).
Nun möchte ich das Ganze etwas dynamisch gestalten, also die Überblendungen einfügen.
Ich habe im Internet leider nicht viel dazu gefunden, was auch zu Firefox kompatibel ist.
Nochmal zusammengefallst:

Oben: Buttons.
Mitte: ein Bild.
Unten: Text auf Bild.

Die anordnung habe ich mit Tabellen realisiert. Wenn ich jetzt auf einen Button klicke, soll sich der mittlere und der untere Teil ändern. Am liebsten würde ich dabei ohne Frames, bzw. meherern HTML Dateien arbeiten, da das ganze relativ klein gehalten werden soll.
Hier ein Auszug:

Code:

<!-- ##Navigationsleiste## -->
		<table hspace="0" vspace="0" cellpadding="0" cellspacing="0" border="0" >
			<tr>
				<td width="17"></td> 
				<td>
					<a href="<!-- ##Hier die Überblendung## -->"><img src="button_1.png" border="0" hspace="0" vspace="0" border="0" ONMOUSEOVER="high(this)" ONMOUSEOUT="low(this)" class="inset" style="FILTER: alpha(opacity=60)"></a>
				</td>
				<td>
					<a href="<!-- ##Hier die Überblendung## -->"><img src="button_2.png" border="0" hspace="0" vspace="0" border="0" ONMOUSEOVER="high(this)" ONMOUSEOUT="low(this)" class="inset" style="FILTER: alpha(opacity=60)"></a>
				</td>
				<td>
					<a href="<!-- ##Hier die Überblendung## -->"><img src="button_3.png" border="0" hspace="0" vspace="0" border="0" ONMOUSEOVER="high(this)" ONMOUSEOUT="low(this)" class="inset" style="FILTER: alpha(opacity=60)"></a>
				</td>
			</tr>	
		</table>
		<!-- ##Ende der Navigationsleiste## -->
		
		<!-- ##Mainframe## -->
		<table hspace="0" vspace="0" cellpadding="0" cellspacing="0" border="0" style="position:relative;" >
		<tr>
			<img src="bild_1.png" width=486 height=362 border="0" hspace="17" vspace="0" id="100" >
		</tr>
		<tr>
			<td background="hintergrund_1.png" width="520" height="393" hspace="0" vspace="0" border="0" align="left" valign="top">
				<div id="content_headline">
					<div style='position:relative'><!--Überschrift vom Text--></div>
				</div>
				<div id="content_sub">
					<div style="position:relative"><!--## Hier steht dann der Text## -->
					</div>
				</div>
			</td>
		</tr>
		<!-- ##Ende Mainframe## -->

Ich hoffe ihr könnt damit was anfangen und freue mich auf eure Hilfe

Gruß

EDIT: Sorry für das "Dünamische" in der Überschrift...es soll natürlich Dynamisch heißen

savuti · 17. Oktober 2011

Sorry, aber das was du da zusammengeschustert hast, geht gar nicht. Nimm die überflüssigen Tabellen raus und mach alles mit Ebenen (divs). Mit Tabellen ein Design umsetzen, macht in Zeiten von CSS keinen Sinn und ärgert nur die Suchmaschinen...

Zur Frage: Hast du irgendein Beispiel? Ich kann gerade nicht folgen wie das zum Schluss aussehen soll.

Meinst du mit Überblendungen mouseover?

karuso · 17. Oktober 2011

Wenn du es wie savuti schon sagte umbaust und die Tabellen entfernst kannst du Objekte per javascript verändern, bzw deren Eigenschaften. Am einfachsten geht das mit fertigen Frameworks wie jquery und scriptaculous:
http://madrobby.github.com/scriptaculous/

Auf der Seite sieht man wie man relativ leicht und schnell mit scriptaculous Effekte einbauen kann.

SizZle · 17. Oktober 2011

Ja bin noch ein Anfänger was das Thema Design angeht. Die Page sollte schnellstmöglich stehen und im nachinein optimiert werden. Daher habe ich die einfache Variante mit Tabellen gewählt.
Beispiel hab ich leider keins, da der Webserver noch nicht online ist.

Im Anhang ist ein Layoutentwurf, wie das Ganze in etwa am Ende aussehen soll.

ryan_blackdrago · 17. Oktober 2011

Sobald JavaScript deaktiviert / blockiert ist, siehts leider mit der Webseite schlecht aus. Würde eher zur Flashprogrammierung tendieren. Das sprengt aber wahrscheinlich den Aufwand ...

SizZle · 17. Oktober 2011

@savuti: der Effekt mit mouseover ist nur das "Highlighten" der Buttens

Ergänzung (17. Oktober 2011)

@ryan_blackdrago: so isses

Hancock · 17. Oktober 2011

@ryan_blackdragon: Und wer kein Flash hat...
Also sorry, das ist ja mal ne komische Aussage, auch haben Suchmaschinen bei Flash mal gar keine Chance, was gescheites zu finden.

Mir fallen spontan zwei Sachen ein:
1. javascript mit display:none und display:block
2. CSS mit :hover

Das damit keine "sanften" Überblendungen möglich sind, ist klar, geht aber mit so Geschichten wie setTimeout() und javascript.

EDIT: Das mit :hover fällt raus, da du klicken willst...

Also ich würde einfach alle 3 Varianten laden und diese dann per javascript anzeigen lassen:

Code:

<script>
function swap(id){
foreach(var elem in document.getElementyById("container")
elem.style.display="none";
document.getElementById(id).style.display="block";
}</script>
<input button>
<..>
<...>
<div id=container>
<div id="text1"><img src".."><p>...</div>
<div id="text2" style="display:none">...</div>
<div id="text3" style="display:none">...</div>
</div>

xXyzXx · 17. Oktober 2011

ryan_blackdrago schrieb:
Sobald JavaScript deaktiviert / blockiert ist, siehts leider mit der Webseite schlecht aus. Würde eher zur Flashprogrammierung tendieren. Das sprengt aber wahrscheinlich den Aufwand ...

flash geht mal gar nicht. diese nur flash websites sind mal voll fürn ....
wer javascript deaktiviert wird nicht viel freude haben.

am besten die website so schreiben, das man keine extra plugins braucht.

Dese · 17. Oktober 2011

total offtopic aber ich möchte mich für den lacher hier im büro bedanken, den es bei mir und meinem kollegen ausgelöst hat beim anblick des titels.

dÜnamisch ist ein knaller

p.s. nein, dieser post ist nicht böse gemeint. ich habe verständnis für die merkwürdigsten verschreiber.

SizZle · 17. Oktober 2011

Dese schrieb:
total offtopic aber ich möchte mich für den lacher hier im büro bedanken, den es bei mir und meinem kollegen ausgelöst hat beim anblick des titels.

dÜnamisch ist ein knaller

p.s. nein, dieser post ist nicht böse gemeint. ich habe verständnis für die merkwürdigsten verschreiber.

Gern geschehen

leider kann man die Überschrift ja nichtmehr im Nachhinein korrigieren.

Suche

HTML Dünamische Überblendungen

SizZle

Cadet 4th Year

savuti

Lt. Commander

karuso

Captain

SizZle

Cadet 4th Year

Anhänge

ryan_blackdrago

Captain

SizZle

Cadet 4th Year

Hancock

Captain

xXyzXx

Banned

Dese

Commodore

SizZle

Cadet 4th Year

Ähnliche Themen