Wie bekomme ich die Höhenanpassung eines Image hin
Usabilityman
- html
Hi,
ich habe schon mächtig im Archiv gestöbert, aber leider keine Lösung für mein Problem gefunden. Im folgenden Quelltext ist die Aufgabe näher beschrieben und auch etwas Experimentier-Code eingebaut. Gibt es einen anderen bzw. besseren Lösungsansatz als meinen? Wäre toll, wenn mir jemand helfen könnte. Wie sieht das ganze auf MAC und UNIX aus?
<html><head>
<SCRIPT TYPE="text/javascript"><!--
function hoehe() //JavaScript für Experimentier-Infos
{
// Wo bekomme ich ggf. die Hoehe des Bereiches her?
// Wie kann ich die Image-Hoehe anpassen?
var hoehe;
if( document.getElementById ) // IE >5.x, Op 6 und NN 6
hoehe = document.getElementById( 'ai1' ).style.height;
if( document.layers ) // NN 4.x
hoehe = document.ai1.clip.height;
if( document.all && !document.getElementById ) // IE 4
hoehe = document.all.ai1.offsetHeight;
if( document.images ) //schoen waer's! Wer hat eine Idee?
{
alert(document.rand.height);
if( hoehe )
document.rand.height = hoehe; // nicht nach dem Laden!
alert(document.rand.height);
}
return( hoehe );
}
function init()
{
alert( hoehe() ); // Op6 OK; NN 4.x OK; NN6 nichts!
}
//--></SCRIPT>
</head>
<body ONLOAD="init()" bgColor="#F0F0F0">
<TABLE WIDTH="600" ALIGN="center" BORDER="0" CELLSPACING="5" CELLPADDING="0">
<TR><TD VALIGN="top" WIDTH="15" HEIGHT="100%">
<IMG NAME="rand" SRC="designs/rand.gif" ALT="" WIDTH="15" HEIGHT="100%">
</TD><TD ID="ai1" WIDTH="100%" STYLE="position:relative;">
<!-- fuer NN 4.x & Opera -->
<h1>Wie bekomme ich die Höhenanpassung eines Image hin, die mit allen Browsern läuft?</h1>
<p>Wenn ich es hinbekomme, weiss der Nutzer besser, wo der Text zuende sein wird. Dies ist eine Frage der Usability s.u.! Die durch den enthaltenen Text variierende Höhe dieser Tabellenspalte soll die Höhe der Randgrafik definieren.</p>
<p>So funktioniert's nur mit IE >6 und NN7, aber nicht darunter und nicht mit Opera. In NN6 bekomme ich noch nicht einmal ein Image angezeigt. Nach dem Laden kann ich die Höhe aber leider auch nicht mehr verändern.</p>
<p><B>Regel: Verwende ein Navigations-System, das dem Nutzer Auskunft gibt, wo er sich gerade im Text befindet.</B></p>
<p>Dies ist zwar bei einem Scrollbar der zwar der Fall, aber man sollte dies sicherlich noch auf eine andere Art und Weise unterstützen, da die Repräsentation durch den Scrollbar nicht auf allen Systemen deutlich ist und durch die Sichtbarkeit von möglicherweise diversen Scrollbars auf einer Bildschirmseite noch sehr an Deutlichkeit verlieren kann - Zuordenbarkeit, Selbsterklärungsfähigkeit usw. nehmen dadurch ab. Gut geeignet wäre höchstwahrscheinlich eine grafische Kennzeichnung vor der Textzeilen, wie ein Verlauf von sehr hell bis dunkel oder langgezogen dreieckig von 1-Pixel bis etwa 15-Pixel Breite mit einer klaren Endlinie (als rand.gif [40x15 Pixel oberhalb der Diagonale schwarz darunter weiss] verwendet, das Design ist zu überarbeiten ;-)). Jeweils für einen inhaltlichen Zusammenhang.</p>
</TD></TR><TR>
<TD bgColor="#000000" COLSPAN="2" WIDTH="100%" HEIGHT="10">
etwa so, aber ohne Lücken
</TD></TR></TABLE>
</body></html>
Danke!