PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Code-Bewertung und Tabellenfrage

mobius
2005-06-04, 22:01:26
Hallo Leute,

ich bin gerade dabei eine Seite für meine Bilder zu entwerfen und zum ersten mal nur per Notepad :D Die Seite besteht aus einer Tablle mit drei Spalten in denen sich Bilder, die Links darstellen, befinden. Die "Besonderheit" ist, dass jedes Bild mit einem Mousover Effekt verbunden ist, der dann die Bilder wechselt. Funktioniert sogar alles einwandfrei, aber dennoch wollte ich mal Fragen, ob der Code so okay ist oder man da noch was dran feilen kann, schließlich bildet er das Skelett meiner Seite.

<html>

<head><title> --- </title>

<script type="text/javascript">
<!--
PlatzhalterBild1 = new Image();
PlatzhalterBild1.src = "Bilder/BildPlatzhalter.jpg";

PlatzhalterBild2 = new Image();
PlatzhalterBild2.src = "Bilder/BildPlatzhalter2.jpg";

PlatzhalterBild3 = new Image();
PlatzhalterBild3.src = "Bilder/BildPlatzhalter3.jpg";

PlatzhalterBild4 = new Image();
PlatzhalterBild4.src = "Bilder/BildPlatzhalter4.jpg";

PlatzhalterBild5 = new Image();
PlatzhalterBild5.src = "Bilder/Ueberschriftplatzhalter.jpg";

PlatzhalterBild6 = new Image();
PlatzhalterBild6.src = "Bilder/Ueberschriftplatzhalter2.jpg";

PlatzhalterBild7 = new Image();
PlatzhalterBild7.src = "Bilder/Ueberschriftplatzhalter3.jpg";

PlatzhalterBild8 = new Image();
PlatzhalterBild8.src = "Bilder/Ueberschriftplatzhalter4.jpg";


function Tauschen(Bild2,Bild3,Link1)
{
window.document.top.src = Bild2.src;
window.document.news.src = Bild3.src;

window.document.getElementById("link1").href = Link1;
window.document.getElementById("link2").href = Link1;
}

//-->

</script>

<script language="javascript">
var win = null;
function NewWindow(wizpage, wizname, w, h, scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings = 'height=' + h + ',width=' + w + ',top= 100,' + TopPosition + ',left=' + LeftPosition + ',scrollbars=' + scroll + ',resizable'
win = window.open(wizpage, wizname, settings)
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>

<table border="0" align="center">
<tr>
<th>
<img src="Bilder/BildEcke.jpg" border="0" height="40" width="187"></br>
<a href="http://keinlink.de/Link1/" target="_top" onmouseover="Tauschen(PlatzhalterBild5,PlatzhalterBild1,'http://KeinLink.de/Link1/')"><img src="Bilder/ButtonPlatzhalter.jpg" border="0" height="98" width="187"></a></br>
<a href="http://keinlink.de/Link2/" target="_top" onmouseover="Tauschen(PlatzhalterBild6,PlatzhalterBild2,'http://KeinLink.de/Link2/')"><img src="Bilder/ButtonPlatzhalter2.jpg" border="0" height="98" width="187"></a></br>
<a href="http://keinlink.de/Link3/" target="_top" onmouseover="Tauschen(PlatzhalterBild7,PlatzhalterBild3,'http://KeinLink.de/Link3/')"><img src="Bilder/ButtonPlatzhalter3.jpg" border="0" height="98" width="187"></a></br>
<a href="http://keinlink.de/Link4/" target="_top" onmouseover="Tauschen(PlatzhalterBild8,PlatzhalterBild4,'http://KeinLink.de/Link4/')"><img src="Bilder/ButtonPlatzhalter4.jpg" border="0" height="98" width="187"></a></br>
<img src="Bilder/BildEcke2.jpg" border="0" height="39" width="187">
</th>
<th>
<img src="Bilder/Ueberschriftplatzhalter.jpg" name="top" height="51" width="512"></br>
<img src="Bilder/BildPlatzhalter.jpg" name="news" border="0" height="384" width="512"></br>
<a href="http://keinlink/Enter/" id="link4"><img src="Bilder/EnterPlatzhalter.jpg" name="linkbild" border="0" height="36" width="79" align="left"></a>
</th>
<th>
<img src="Bilder/BildEcke.jpg" border="0" height="40" width="187"></br>
<a href="http://keinlink.de/Link1/" target="_top" onmouseover="Tauschen(PlatzhalterBild5,PlatzhalterBild1,'http://KeinLink.de/Link1/')"><img src="Bilder/ButtonPlatzhalter.jpg" border="0" height="98" width="187"></a></br>
<a href="http://keinlink.de/Link2/" target="_top" onmouseover="Tauschen(PlatzhalterBild6,PlatzhalterBild2,'http://KeinLink.de/Link2/')"><img src="Bilder/ButtonPlatzhalter2.jpg" border="0" height="98" width="187"></a></br>
<a href="http://keinlink.de/Link3/" target="_top" onmouseover="Tauschen(PlatzhalterBild7,PlatzhalterBild3,'http://KeinLink.de/Link3/')"><img src="Bilder/ButtonPlatzhalter3.jpg" border="0" height="98" width="187"></a></br>
<a href="gallery.htm" onclick="NewWindow(this.href,'name','840','620','yes');return false" onmouseover="Tauschen(PlatzhalterBild8,PlatzhalterBild4,'http://KeinLink.de/Link4/')"><img src="Bilder/ButtonPlatzhalter4PopUp.jpg" border="0" height="98" width="187"></a></br>
<img src="Bilder/BildEcke2.jpg" border="0" height="39" width="187">
</th>
</tr>
</table>

</body>

</html>

Zuletzt wollte ich noch fragen ob es möglich ist die Tabelle mit ihren 3 Spalten so anzulegen, dass gar kein Freiraum zwischen ihnen ist. Trotz Border="0" sieht man immernoch (ich schätze mal) 1 Pixel Freiraum.

Vielen Dank für die Aufmerksamkeit.
PuppetMaster
2005-06-04, 23:20:58
- Wenn du, was deine Frage vermuten lässt, Wert auf sauberen Code legst, dann orientiere dich an einem HTML-Standard. Du kannst deine Seite mit DOCTYPE versehen und solange durch den Validator (http://validator.w3.org/) jagen, bis der Code einnwandfrei ist.

- <script language="javascript"> ist völlig veraltet. Schreib <script type="text/javascript">

- </br> gibts nicht. Entweder <br> bei HTML 4 oder <br /> (oder <br/>) bei XHTML.

- Tabellenlayout ist eigentlich nicht mehr zeitgemäß. Im Netz gibts viele Beispiele für XHTML+CSS-Seiten, aber ich befüchte das wird hier zu ausschweifend...
mobius
2005-06-04, 23:32:30
- <script language="javascript"> ist völlig veraltet. Schreib <script type="text/javascript">

- </br> gibts nicht. Entweder <br> bei HTML 4 oder <br /> (oder <br/>) bei XHTML.

Danke dir, hab die zwei Sachen geändert und nun ist sie w3c Konform :)

Wenn jetz noch der Freiraum zwischen den Spalten weg wäre, wäre alles perfekt. Kann mich eigentlich nur auf normales HTML stützen, da ich das mal in den Basics gelernt hab. CSS ist mir völlig unbekannt :redface:
PuppetMaster
2005-06-05, 00:28:37
Bei Tabellen fehlt mir etwas die Übung, aber probier mal, ob folgendes hilft:

<table style="border-collapse:collapse;" border="0" align="center">
mobius
2005-06-05, 00:31:47
Bei Tabellen fehlt mir etwas die Übung, aber probier mal, ob folgendes hilft:

<table style="border-collapse:collapse;" border="0" align="center">

Der Zwischenraum ist deutlich kleiner als vorher, aber immernoch minimal da. Sieht jetzt auf jedenfall besser aus.
Gast
2005-06-05, 13:11:17
Tabellen... ;)
Benutze doch einfach cellpadding="0" und cellspacing="0".

http://de.selfhtml.org/html/tabellen/abstand.gif
(Geklaut bei Selfhtml)
mobius
2005-06-05, 14:35:41
Tabellen... ;)
Benutze doch einfach cellpadding="0" und cellspacing="0".

http://de.selfhtml.org/html/tabellen/abstand.gif
(Geklaut bei Selfhtml)

Danke Herr Gast, dass ist genau das was ich brauche ;) Funktioniert einwandfrei.
CodeSeven
2005-06-05, 17:11:16
Bitte nicht.... Mouseover-Effekte macht man heutzutage doch nicht mehr mit JavaScript, sondern mit CSS.

Da onmouseover, onmouseout usw. normale HTML-Bestandteile sind, funktioniert es auch bei den Leuten, die kein JavaScript haben. Wenn jedoch JavaScript deaktiviert ist, funktioniert der Mouseover-Effekt, wie er bei dir ist nicht.

Daher solltest du für jeden Mouseover-Effekt eine CSS-Klasse festlegen. Eingebunden wird es dann folgendermaßen:

onmouseover="className='over1'" onmouseout="className='out1'" class="out1"
overX ist dann für die Mouseovereffekte und
outX für den Normalzustand
Gast1
2005-06-05, 19:53:44
Mouseovereffekt per CSS und gänzlich ohne JS:

<span class="hover-test">Testtext</span>

CSS:
.hover-test {
background-color: Green;
}

.hover-test:hover {
background-color: Red;
}

Funktioniert in jedem ordentlichen Browser.
tomtom
2005-06-05, 20:36:24
Ich weiß ich schweife total vom Thema ab, aber du solltest eventuell, falls es deine Kenntnisse zulassen, das ganze in HTML/CSS und PHP realisieren.
Mit PHP könntest du dann Thumbnails der Bilder erzeugen, damit würdest du dir schonmal das manuelle Erzeugen der Vorschaubilder sparen.

Das Problem ist halt, dass wenn der User in seinem Browser JS deaktiviert funzt das ganze nicht denke ich...

Is nur ein Tipp ;)

Mit freundlichen Grüßen,
terminator2k3
mobius
2005-06-05, 20:43:03
Mag sein, dass CSS schöner ist, nur hab ich davon 0,0 Ahnung :redface:, d.h. ihr müsstet mir dann das komplette Tauschtscript in CSS übersetzt. Man da freut man sich, dass man eine W3C Konforme Seite geschrieben hat und es ist immernoch net gut :(
tomtom
2005-06-05, 20:46:36
CSS ist keine Programmiersprache, CSS gehört gewissermaßen zu HTML und ist somit eine Description Language. ;)
mobius
2005-06-05, 20:52:45
CSS ist keine Programmiersprache, CSS gehört gewissermaßen zu HTML und ist somit eine Description Language. ;)

Wie soll ich dann das mouseover zusammen mit Tauschen ohne JavaScript machen?
tomtom
2005-06-05, 22:32:49
Jo das mit dem Mouseover könnte ein Problem werden mit CSS, da geb ich dir recht. Hab da (wenn die Thumbnails per PHP erzeugt werden würden) eher an sowas wie ne Änderung der Rahmenfarbe mittels CSS auf dem Bild gedacht.

Aber am Einfachsten ist der Hovereffekt wohl mit JS zu realisieren, da hast du vollkommen recht!

MfG
CodeSeven
2005-06-06, 13:58:14
Aber am Einfachsten ist der Hovereffekt wohl mit JS zu realisieren, da hast du vollkommen recht!Funktioniert aber nicht überall. Man könnte dafür einfach "background-image" verwenden. Nur so als kleiner Gedankenanstoß ;)
mobius
2005-07-10, 00:06:38
Ich bins nochmal. Hab die Seite mal selbstgecoded und ist eigentlich ganz nett geworden. Wenn jetzt noch eine Sache funktionieren würde, wäre sie wirklich vollständig und ich bräuchte nur noch die Bilder. Ich fände es nett, wenn bei den Mouseover Effekten ein passender Link übergeben wird.

Hier erstmal der Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head><title> --- </title>

<script type="text/javascript">
<!--
PlatzhalterBild1 = new Image();
PlatzhalterBild1.src = "Bilder/BildPlatzhalter.jpg";

PlatzhalterBild2 = new Image();
PlatzhalterBild2.src = "Bilder/BildPlatzhalter2.jpg";

PlatzhalterBild3 = new Image();
PlatzhalterBild3.src = "Bilder/BildPlatzhalter3.jpg";

PlatzhalterBild4 = new Image();
PlatzhalterBild4.src = "Bilder/BildPlatzhalter4.jpg";

PlatzhalterBild5 = new Image();
PlatzhalterBild5.src = "Bilder/Ueberschriftplatzhalter.jpg";

PlatzhalterBild6 = new Image();
PlatzhalterBild6.src = "Bilder/Ueberschriftplatzhalter2.jpg";

PlatzhalterBild7 = new Image();
PlatzhalterBild7.src = "Bilder/Ueberschriftplatzhalter3.jpg";

PlatzhalterBild8 = new Image();
PlatzhalterBild8.src = "Bilder/Ueberschriftplatzhalter4.jpg";


function Tauschen(Bild2,Bild3,Link1)
{
window.document.top.src = Bild2.src;
window.document.news.src = Bild3.src;

window.document.getElementById("link1").href = Link1;
window.document.getElementById("link2").href = Link1;
}

//-->
</script>

<script type="text/javascript">
<!--
var win = null;
function NewWindow(wizpage, wizname, w, h, scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings = 'height=' + h + ',width=' + w + ',top= 100,' + TopPosition + ',left=' + LeftPosition + ',scrollbars=' + scroll + ',resizable'
win = window.open(wizpage, wizname, settings)
}
//-->
</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>

<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<th>
<img src="Bilder/BildEcke.jpg" alt="w.gif" border="0" height="40" width="187"><br>
<a href="http://keinlink.de/Link1/" target="_top" onmouseover="Tauschen(PlatzhalterBild5,PlatzhalterBild1,'http://KeinLink.de/Link1/')"><img src="Bilder/ButtonPlatzhalter.jpg" alt="w.gif" border="0" height="98" width="187"></a><br>
<a href="http://keinlink.de/Link2/" target="_top" onmouseover="Tauschen(PlatzhalterBild6,PlatzhalterBild2,'http://KeinLink.de/Link2/')"><img src="Bilder/ButtonPlatzhalter2.jpg" alt="w.gif" border="0" height="98" width="187"></a><br>
<a href="http://keinlink.de/Link3/" target="_top" onmouseover="Tauschen(PlatzhalterBild7,PlatzhalterBild3,'http://KeinLink.de/Link3/')"><img src="Bilder/ButtonPlatzhalter3.jpg" alt="w.gif" border="0" height="98" width="187"></a><br>
<a href="http://keinlink.de/Link4/" target="_top" onmouseover="Tauschen(PlatzhalterBild8,PlatzhalterBild4,'http://KeinLink.de/Link4/')"><img src="Bilder/ButtonPlatzhalter4.jpg" alt="w.gif" border="0" height="98" width="187"></a><br>
<img src="Bilder/BildEcke2.jpg" alt="w.gif" border="0" height="39" width="187">
</th>
<th>
<img src="Bilder/Ueberschriftplatzhalter.jpg" alt="w.gif" name="top" height="51" width="512"><br>
<img src="Bilder/BildPlatzhalter.jpg" alt="w.gif" name="news" border="0" height="384" width="512"><br>
<a href="http://keinlink.de/Enter/" id="link4"><img src="Bilder/EnterPlatzhalter.jpg" alt="w.gif" name="linkbild" border="0" height="36" width="79" align="left"></a>
</th>
<th>
<img src="Bilder/BildEcke.jpg" alt="w.gif" border="0" height="40" width="187"><br>
<a href="http://keinlink.de/Link1/" target="_top" onmouseover="Tauschen(PlatzhalterBild5,PlatzhalterBild1,'http://KeinLink.de/Link1/')"><img src="Bilder/ButtonPlatzhalter.jpg" alt="w.gif" border="0" height="98" width="187"></a><br>
<a href="http://keinlink.de/Link2/" target="_top" onmouseover="Tauschen(PlatzhalterBild6,PlatzhalterBild2,'http://KeinLink.de/Link2/')"><img src="Bilder/ButtonPlatzhalter2.jpg" alt="w.gif" border="0" height="98" width="187"></a><br>
<a href="http://keinlink.de/Link3/" target="_top" onmouseover="Tauschen(PlatzhalterBild7,PlatzhalterBild3,'http://KeinLink.de/Link3/')"><img src="Bilder/ButtonPlatzhalter3.jpg" alt="w.gif" border="0" height="98" width="187"></a><br>
<a href="gallery.htm" onclick="NewWindow(this.href,'name','840','620','yes');return false" onmouseover="Tauschen(PlatzhalterBild8,PlatzhalterBild4,'http://KeinLink.de/Link4/')"><img src="Bilder/ButtonPlatzhalter4PopUp.jpg" alt="w.gif" border="0" height="98" width="187"></a><br>
<img src="Bilder/BildEcke2.jpg" alt="w.gif" border="0" height="39" width="187">
</th>
</tr>
</table>

</body>

</html>

Dick markiert habe ich jetzt mal einen Enter Button. Kann mir jemand sagen, wie ich mein Tauschscript so umschreiben kann, dass bei einem Mouseover Effekt der 8 Buttons ein Link mitgegeben wird, so dass sich die Linkaddresse des Enter Buttons ändert? Hoffe ich habe mich verständlich ausgedrückt.

P.s. ich weiss, dass das ganze eigentlich keinen großen Sinn hat, aber ich finde es kosmetisch gesehen ganz nett ^^.